Flex mobile for JUG

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© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 3

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> © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 4

Adobe Flex programming language <MXML> AS3package 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 {© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 5 manager.addContact(trigger.contact);

Native Mobile Application Development Model A costly, ineﬃcient development model Native Native Native Native App App App App Additional OS’s© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

Introducing a new mobile development paradigm One Tool, One Language, One Codebase Flex Application Common codebase Additional OS’s Any Platform© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

FLEX FRAMEWORK 4SPARK COMPONENT MODEL ActionScript MXML Component Skin Graphics Behavior Layout Animation Logic Parts Data CSS properties States

<s:ViewNavigatorApplication> life cycle views.ListEmployees views.DetailsEmployee views.ListEmployees view destroyed view created view destroyed view created “BACK” bu on DATA subset DATA persisted in memory© 2010 Adobe Systems Incorporated. All Rights Reserved. 14

ActionBar navigationContent titleContent actionContent <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>© 2010 Adobe Systems Incorporated. All Rights Reserved. 15 3

Components that have Mobile Skins § Bu on § CheckBox § DataGroup § Group/HGroup/VGroup/TileGroup § Image/BitmapImage § Label List § RadioBu on/RadioBu onGroup § Scroller § TextArea § TextInput© 2010 Adobe Systems Incorporated. All Rights Reserved. 16

Multiple densities: e problem 150 x 40 pixel bu on Desktop monitor Galaxy Tab @100 dpi @160 dpi = 1.5” x 0.4” = 0.9” x 0.25”© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17

Multiple densities: e problem 150 x 40 pixel bu on Desktop monitor Galaxy Tab Droid 2 @100 dpi @160 dpi @240 dpi = 1.5” x 0.4” = 0.9” x 0.25” = 0.6” x 0.17”© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17

Multiple densities: e problem 150 x 40 pixel bu on Desktop monitor Galaxy Tab Droid 2 iPhone 4 @100 dpi @160 dpi @240 dpi @320 dpi = 1.5” x 0.4” = 0.9” x 0.25” = 0.6” x 0.17” = 0.46” x 0.13”© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17

Multiple densities: e problem 150 x 40 pixel bu on Desktop monitor Galaxy Tab Droid 2 iPhone 4 @100 dpi @160 dpi @240 dpi @320 dpi = 1.5” x 0.4” = 0.9” x 0.25” = 0.6” x 0.17” = 0.46” x 0.13” Same pixel count, diﬀerent physical sizes (Minimum recommended size: 0.25” x 0.25”)© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17

Can I use dynamic layout to solve this? 320x480 @160dpi (Not easily. You can make stuﬀ 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.)© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18

Can I use dynamic layout to solve this? 320x480 @160dpi 100% (Not easily. You can make stuﬀ ll the screen using percent sizing, but your fonts and icons will still be tiny. And any xed pixel100% sizes, e.g. in constraint- based layouts or padding values, will be wrong.)© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18

Can I use dynamic layout to solve this? 320x480 @160dpi 640x960 (at same density) 100% (Not easily. You can make (Not easily. You can make stuﬀ ll the screen stuﬀ ll the screen using using percent sizing, but your fonts and icons percent sizing, but your will still be tiny. And any xed pixel sizes, e.g. in fonts and icons will still be constraint-based layouts or padding values, will tiny. And any xed pixel be wrong.)100% sizes, e.g. in constraint- based layouts or padding values, will be wrong.)© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18

Can I use dynamic layout to solve this? 320x480 @160dpi 640x960 (at same density) 100% 100% (Not easily. You can make (Not easily. You can make stuﬀ ll the screen stuﬀ ll the screen using using percent sizing, but your fonts and icons percent sizing, but your will still be tiny. And any xed pixel sizes, e.g. in fonts and icons will still be constraint-based layouts or padding values, will tiny. And any xed pixel be wrong.)100% sizes, e.g. in constraint- based layouts or padding values, will be wrong.) 100%© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18

Can I use dynamic layout to solve this? 320x480 @160dpi 640x960 (at same density) 640x960 @320dpi 100% 100% (Not easily. You can make (Not easily. You can make stuﬀ ll the screen stuﬀ ll the screen using using percent sizing, but your fonts and icons percent sizing, but your will still be tiny. And any xed pixel sizes, e.g. in fonts and icons will still be constraint-based layouts or padding values, will tiny. And any xed pixel be wrong.)100% sizes, e.g. in constraint- based layouts or padding values, will be wrong.) 100%© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18

Solution: Automatic scaling for diﬀerent DPIs <Application applicationDPI=“160”> <Button width=“160” height=“40”/> </Application>© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 19

Solution: Automatic scaling for diﬀerent DPIs <Application applicationDPI=“160”> <Button width=“160” height=“40”/> </Application> 160 dpi 240 dpi 320dpi© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 19

Solution: Automatic scaling for diﬀerent DPIs <Application applicationDPI=“160”> <Button width=“160” height=“40”/> </Application> 160 dpi 240 dpi 320dpi Scaled 1.5x© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 19

Solution: Automatic scaling for diﬀerent DPIs <Application applicationDPI=“160”> <Button width=“160” height=“40”/> </Application> 160 dpi 240 dpi 320dpi Scaled 1.5x Scaled 2x© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 19

Solution: Automatic scaling for diﬀerent DPIs <Application applicationDPI=“160”> <Button width=“160” height=“40”/> </Application> 160 dpi 240 dpi 320dpi Scaled 1.5x Scaled 2x REMEMBER: To your code, the screen is always 160 dpi, and this bu on is always 160 x 40, regardless of how the application is being scaled.© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 19

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>© 2010 Adobe Systems Incorporated. All Rights Reserved. 20

New APIs for mobile apps - Multitouch - Geolocation - Cameras - Microphone - Accelerometer - Display a web page - SQLite local database - Native extensions - GPU acceleration©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

Create your on libraries ANE: No more limitation ActionScript Native Extension AS3 bridge Flex Mobile project C, JAVA ANE SWF .AIR, .APK, .IPA, .BAR© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24

Flex mobile for JUG

by Michael Chaize on Oct 10, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 28

Statistics

Flex mobile for JUG — Presentation Transcript