Your SlideShare is downloading. ×
Flex mobile for JUG
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Flex mobile for JUG

777
views

Published on

Published in: Technology, Business

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
777
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Flex and mobile apps Michaël Chaize | Flash Platform Evangelist | www.RIAgora.com | @mchaize© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  • 2. Adobe Flex for Java developers© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 2
  • 3. Adobe Flex for Java developers +© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 2
  • 4. 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
  • 5. 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
  • 6. 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);
  • 7. Adobe Flex programming language <MXML> AS3 MVC© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 6
  • 8. Adobe Flex programming language Automated builds, debug & pro le, CI, TDD, load/stressing...© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 7
  • 9. Flex & Java are already succesful on the desktop & Good UI = Efficient users = Success & ROI©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  • 10. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  • 11. e explosion of devices introduces new challenges for application development© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  • 12. Native Mobile Application Development Model A costly, inefficient development model Native Native Native Native App App App App Additional OS’s© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  • 13. 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.
  • 14. FLEX FRAMEWORK 4SPARK COMPONENT MODEL ActionScript MXML Component Skin Graphics Behavior Layout Animation Logic Parts Data CSS properties States
  • 15. Mobile Applications in Flex 4.5 s:Application© 2010 Adobe Systems Incorporated. All Rights Reserved. 13
  • 16. Mobile Applications in Flex 4.5 s:Application s:ViewNavigatorApplication© 2010 Adobe Systems Incorporated. All Rights Reserved. 13
  • 17. Mobile Applications in Flex 4.5 s:Application s:ViewNavigatorApplication s:TabbedViewNavigatorApplication© 2010 Adobe Systems Incorporated. All Rights Reserved. 13
  • 18. <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
  • 19. <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
  • 20. <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
  • 21. 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
  • 22. 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
  • 23. Multiple densities: e problem 150 x 40 pixel bu on© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17
  • 24. Multiple densities: e problem 150 x 40 pixel bu on Desktop monitor @100 dpi = 1.5” x 0.4”© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17
  • 25. 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
  • 26. 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
  • 27. 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
  • 28. 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, different physical sizes (Minimum recommended size: 0.25” x 0.25”)© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17
  • 29. 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, different physical sizes (Minimum recommended size: 0.25” x 0.25”)© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17
  • 30. Can I use dynamic layout to solve this?© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18
  • 31. Can I use dynamic layout to solve this? 320x480 @160dpi (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.)© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18
  • 32. Can I use dynamic layout to solve this? 320x480 @160dpi 100% (Not easily. You can make stuff 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
  • 33. 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 stuff ll the screen stuff 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
  • 34. 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 stuff ll the screen stuff 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
  • 35. 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 stuff ll the screen stuff 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
  • 36. Solution: Automatic scaling for different DPIs© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 19
  • 37. Solution: Automatic scaling for different DPIs <Application applicationDPI=“160”> <Button width=“160” height=“40”/> </Application>© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 19
  • 38. Solution: Automatic scaling for different 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
  • 39. Solution: Automatic scaling for different 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
  • 40. Solution: Automatic scaling for different 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
  • 41. Solution: Automatic scaling for different 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
  • 42. 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
  • 43. Flex 4.5 and tablets© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21
  • 44. Flex 4.5 and tablets Android tablets© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21
  • 45. Flex 4.5 and tablets Android tablets BlackBerry PlayBook© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21
  • 46. Flex 4.5 and tablets Android tablets BlackBerry PlayBook Apple tablets© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21
  • 47. Flex 4.5 and tablets Android tablets BlackBerry PlayBook Apple tablets© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21
  • 48. Demo© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 22
  • 49. 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.
  • 50. Create your on libraries© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24
  • 51. Create your on libraries ANE: No more limitation ActionScript Native Extension© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24
  • 52. Create your on libraries ANE: No more limitation ActionScript Native Extension© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24
  • 53. Create your on libraries ANE: No more limitation ActionScript Native Extension C, JAVA© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24
  • 54. Create your on libraries ANE: No more limitation ActionScript Native Extension AS3 bridge C, JAVA© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24
  • 55. Create your on libraries ANE: No more limitation ActionScript Native Extension AS3 bridge C, JAVA ANE© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24
  • 56. 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
  • 57. Tomorrow’s Enterprise applications© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 25
  • 58. Tomorrow’s Enterprise applications Business opportunities Flex + JAVA services© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 25
  • 59. Michaël Chaize & resources RIAgora.com Flex.org labs.adobe.com developer.adobe.com @mchaize Tour de Mobile Flex© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 26
  • 60. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.