flex mobile for jug

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

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

http://www.RIAgora.com

http://www.RIAgora.com


Adobe Flex for Java developers

2



2

+



3

+

Free and Open source Application framework

Easily build mobile, tablet, desktop and web applications

One single programming language, tool & codebase


Adobe Flex programming language

4

<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>



5

<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 ! "); } }}



6

<MXML> AS3

MVC



7

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

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

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

NativeApp

NativeApp

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

© 2010 Adobe Systems Incorporated. All Rights Reserved.

Mobile Applications in Flex 4.5

13

s:Application



13

s:ViewNavigatorApplications:Application



13

s:TabbedViewNavigatorApplications:ViewNavigatorApplications:Application


<s:ViewNavigatorApplication> life cycle

14

views.ListEmployees views.DetailsEmployee views.ListEmployees

DATA DATA

persisted in memory

subset

view destroyed view created

view destroyed view created

“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>

15 3

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

16


Multiple densities: "e problem

17

150 x 40 pixel bu$on



17


Desktop monitor@100 dpi

= 1.5” x 0.4”



17



= 1.5” x 0.4”

Galaxy Tab@160 dpi

= 0.9” x 0.25”



17



= 1.5” x 0.4”

Galaxy Tab@160 dpi

= 0.9” x 0.25”

Droid 2@240 dpi

= 0.6” x 0.17”



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”



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”

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


Can I use dynamic layout to solve this?

18



18

(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



18


320x480 @160dpi

100%

100%



18



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

100%

100%



18



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

100%

100%

100%

100%



18



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

100%

100%

100%

100%


Solution: Automatic scaling for different DPIs

19



19

<Application applicationDPI=“160”> <Button width=“160” height=“40”/></Application>



19


160 dpi 240 dpi 320dpi



19



Scaled 1.5x



19



Scaled 1.5x Scaled 2x



19


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"> ...

20

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

21



21

Android tablets



21

BlackBerry PlayBookAndroid tablets



21

BlackBerry PlayBookAndroid tablets Apple tablets


Demo

22

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

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

24



24

ANE: No more limitation

ActionScript Native Extension



24



C, JAVA



24



AS3 bridge

C, JAVA



24



AS3 bridge

C, JAVA

ANE



24



AS3 bridge

C, JAVA

Flex Mobileproject

ANE SWF

.AIR, .APK, .IPA, .BAR


Tomorrow’s Enterprise applications

25


Tomorrow’s Enterprise applications

25

Business opportunities

Flex + JAVA services


Michaël Chaize & resources

26

@mchaize

RIAgora.com Flex.orglabs.adobe.com

developer.adobe.com

Tour de Mobile Flex

flex mobile for jug

Technology

flex java

flex framework

e problem

mobile applications

mobile skins bu

multiple densities

detailsemployee views

life cycle views