Flex mobile for JUG
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Flex mobile for JUG

on

  • 1,105 views

 

Statistics

Views

Total Views
1,105
Views on SlideShare
1,077
Embed Views
28

Actions

Likes
1
Downloads
19
Comments
0

1 Embed 28

http://paper.li 28

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Flex mobile for JUG Presentation 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.