flex mobile for jug

Michaël Chaize | Flash Platform Evangelist | www.RIAgora.com | @mchaizeFlex and mobile apps

Adobe Flex for Java developers

Free and Open source Application framework

Easily build mobile, tablet, desktop and web applications

One single programming language, tool & codebase

Adobe Flex programming language

<MXML> AS3

<s:Scroller width="100%" height="100%" horizontalScrollPolicy="off"> <s:Group width="{this.width}"> <s:Image id="myImage"> <s:source> <s:MultiDPIBitmapSource source160dpi="assets/icons/splashLittle.jpg" source240dpi="assets/icons/splashMedium.jpg" source320dpi="assets/icons/splashBig.jpg"/> </s:source> </s:Image> <s:Button x="82" y="356" width="159" height="30" label="Jetzt anmelden" chromeColor="0xffa600" click="button1_clickHandler(event)" fontSize="14" textShadowColor="0x555555"/> </s:Group> </s:Scroller>

<MXML> AS3

package contacts.application{ import contacts.domain.ContactManager;

public class AddContactsCommand { [Inject] public var service:IContactService; [Inject] public var manager:ContactManager; public function execute(event:AddContactsMessage):AsyncToken { return service.addContact(event.contact); } public function result(event:ResultEvent, trigger:AddContactsMessage):void { manager.addContact(trigger.contact); } public function error(event:FaultEvent, trigger:AddContactsMessage):void { trace("Error ! "); } }}

<MXML> AS3

Automated builds, debug & pro!le, CI, TDD, load/stressing...

Flex & Java are already succesful on the desktop

Good UI = Efficient users = Success & ROI

"e explosion of devices introduces new challenges for application development

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Native Mobile Application Development Model

NativeApp

Additional OS’s

A costly, inefficient development model

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Introducing a new mobile development paradigm

Additional OS’s

Flex Application

One Tool, One Language, One Codebase

Any Platform

Common codebase

SPARK COMPONENT MODEL

FLEX FRAMEWORK 4

ActionScript MXML

GraphicsLayout

AnimationParts

States

Component Skin

CSS properties

BehaviorLogicData

Mobile Applications in Flex 4.5

s:Application

s:ViewNavigatorApplications:Application

s:TabbedViewNavigatorApplications:ViewNavigatorApplications:Application

<s:ViewNavigatorApplication> life cycle

views.ListEmployees views.DetailsEmployee views.ListEmployees

DATA DATA

persisted in memory

subset

view destroyed view created

“BACK” bu!on

DATA DATA

persisted in memory

subset

“BACK” bu!on

DATA DATA

persisted in memory

subset

“BACK” bu!on

ActionBar

<s:View xmlns:fx=http://ns.adobe.com/mxml/2009 … title=”Expenses"> <s:navigationContent> <s:Button icon="@Embed('assets/home.png')"/> </s:navigationContent> <s:actionContent> <s:Button label=”+"/> </s:actionContent></s:View>

navigationContent titleContent actionContent

Components that have Mobile Skins

§ Bu$on

§ CheckBox

§ DataGroup

§ Group/HGroup/VGroup/TileGroup

§ Image/BitmapImage

§ Label List

§ RadioBu$on/RadioBu$onGroup

§ Scroller

§ TextArea

§ TextInput

Multiple densities: "e problem

150 x 40 pixel bu$on

Desktop monitor@100 dpi

= 1.5” x 0.4”

Galaxy Tab@160 dpi

= 0.9” x 0.25”

= 1.5” x 0.4”

Galaxy Tab@160 dpi

= 0.9” x 0.25”

Droid 2@240 dpi

= 0.6” x 0.17”

= 1.5” x 0.4”

Galaxy Tab@160 dpi

= 0.9” x 0.25”

Droid 2@240 dpi

= 0.6” x 0.17”

iPhone 4@320 dpi

= 0.46” x 0.13”

= 1.5” x 0.4”

Galaxy Tab@160 dpi

= 0.9” x 0.25”

Droid 2@240 dpi

= 0.6” x 0.17”

iPhone 4@320 dpi

= 0.46” x 0.13”

Same pixel count, different physical sizes(Minimum recommended size: 0.25” x 0.25”)

= 1.5” x 0.4”

Galaxy Tab@160 dpi

= 0.9” x 0.25”

Droid 2@240 dpi

= 0.6” x 0.17”

iPhone 4@320 dpi

= 0.46” x 0.13”

Same pixel count, different physical sizes(Minimum recommended size: 0.25” x 0.25”)

Can I use dynamic layout to solve this?

(Not easily. You can make stuff "ll the screen using percent sizing, but your fonts and icons will still be tiny. And any "xed pixel sizes, e.g. in constraint-based layouts or padding values, will be wrong.)

320x480 @160dpi

320x480 @160dpi 640x960 (at same density)

320x480 @160dpi 640x960 (at same density) 640x960 @320dpi

Solution: Automatic scaling for different DPIs

160 dpi 240 dpi 320dpi

Scaled 1.5x

Scaled 1.5x Scaled 2x

REMEMBER: To your code, the screen is always 160 dpi, and this bu$on is always160 x 40, regardless of how the application is being scaled.

Scaled 1.5x Scaled 2x

Screens and Flex 4.5

<?xml version="1.0" encoding="utf-8"?>

<s:MobileApplication applicationDPI="160"> ...

var curDensity:Number = FlexGlobals.topLevelApplication.runtimeDPI;

<s:Image> <s:source> <s:MultiDPIBitmapSource source160dpi="logo.png" source240dpi="logo240.png" source320dpi="logo320.png" /> </s:source> </s:Image>

Flex 4.5 and tablets

Android tablets

BlackBerry PlayBookAndroid tablets

BlackBerry PlayBookAndroid tablets Apple tablets

New APIs for mobile apps

- Multitouch- Geolocation- Cameras- Microphone- Accelerometer- Display a web page- SQLite local database- Native extensions- GPU acceleration

Create your on libraries

ANE: No more limitation

ActionScript Native Extension

C, JAVA

AS3 bridge

C, JAVA

AS3 bridge

C, JAVA

AS3 bridge

C, JAVA

Flex Mobileproject

ANE SWF

.AIR, .APK, .IPA, .BAR

Tomorrow’s Enterprise applications

Business opportunities

Flex + JAVA services

Michaël Chaize & resources

@mchaize

RIAgora.com Flex.orglabs.adobe.com

developer.adobe.com

Tour de Mobile Flex

flex mobile for jug

flex java

flex framework

e problem

mobile applications

mobile skins bu

multiple densities

detailsemployee views

life cycle views

Technology

cross-platform app development with flex mobile

developing for mobile with the flex framework

flex™ mobile · flex mobile is the most elegant,...

chapter 08_building a cross platform compatible mobile app...

flex™ mobile€¦ · choose from 13 standard frame color...

making mobile flex apps blazing fast

building mobile applications with flex · 2019-09-11 ·...

adobe max2011 performance tuning flex mobile apps

watering jug

beginning flash, flex, and air development for mobile...

developing mobile applications with flex and flash...

forum php flex et mobile - afup · adobe con˜dential....

fxg and flex mobile development

flex mobile development

flex 4.5 and mobile development

project avatar (lyon jug & alpes jug - march 2014)

top 5 things to know about field flex for mobile iwms

mobile flex-cool brochure

mobile flex-cool mobile compressor refrigeration containers...

jug day flex / jee