Flex and mobile apps      Michaël Chaize | Flash Platform Evangelist | www.RIAgora.com | @mchaize© 2011 Adobe Systems Inco...
Adobe Flex for Java developers© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.   2
Adobe Flex for Java developers                                                                             +© 2010 Adobe S...
Adobe Flex for Java developers                                                                             +              ...
Adobe Flex programming language              <MXML>                                                              AS3<s:Scr...
Adobe Flex programming language     <MXML>                                                                             AS3...
Adobe Flex programming language             <MXML>                                                                AS3     ...
Adobe Flex programming language                                                                             Automated buil...
Flex & Java are already succesful on the desktop                                               &                          ...
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
e explosion of devices introduces new                          challenges for application development© 2011 Adobe Systems ...
Native Mobile Application Development Model                                                           A costly, inefficient ...
Introducing a new mobile development paradigm                                  One Tool, One Language, One Codebase       ...
FLEX FRAMEWORK 4SPARK COMPONENT MODEL              ActionScript                      MXML                   Component     ...
Mobile Applications in Flex 4.5                   s:Application© 2010 Adobe Systems Incorporated. All Rights Reserved.   13
Mobile Applications in Flex 4.5                   s:Application                          s:ViewNavigatorApplication© 2010 ...
Mobile Applications in Flex 4.5                   s:Application                          s:ViewNavigatorApplication   s:Ta...
<s:ViewNavigatorApplication> life cycle                       views.ListEmployees                views.DetailsEmployee   v...
<s:ViewNavigatorApplication> life cycle                       views.ListEmployees                views.DetailsEmployee   v...
<s:ViewNavigatorApplication> life cycle                       views.ListEmployees                views.DetailsEmployee   v...
ActionBar                     navigationContent                    titleContent   actionContent <s:View xmlns:fx=http://ns...
Components that have Mobile Skins                                                          §   Bu on                     ...
Multiple densities:                                           e problem                                                   ...
Multiple densities:                                           e problem                                                   ...
Multiple densities:                                           e problem                                                   ...
Multiple densities:                                           e problem                                                   ...
Multiple densities:                                           e problem                                                   ...
Multiple densities:                                           e problem                                                   ...
Multiple densities:                                           e problem                                                   ...
Can I use dynamic layout to solve this?© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.   18
Can I use dynamic layout to solve this?          320x480 @160dpi           (Not easily. You can make           stuff ll the...
Can I use dynamic layout to solve this?          320x480 @160dpi                          100%           (Not easily. You ...
Can I use dynamic layout to solve this?          320x480 @160dpi                                                    640x96...
Can I use dynamic layout to solve this?          320x480 @160dpi                                                    640x96...
Can I use dynamic layout to solve this?          320x480 @160dpi                                                    640x96...
Solution: Automatic scaling for different DPIs© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.   19
Solution: Automatic scaling for different DPIs    <Application applicationDPI=“160”>    	      <Button width=“160” height=“...
Solution: Automatic scaling for different DPIs    <Application applicationDPI=“160”>    	      <Button width=“160” height=“...
Solution: Automatic scaling for different DPIs    <Application applicationDPI=“160”>    	      <Button width=“160” height=“...
Solution: Automatic scaling for different DPIs    <Application applicationDPI=“160”>    	      <Button width=“160” height=“...
Solution: Automatic scaling for different DPIs    <Application applicationDPI=“160”>    	      <Button width=“160” height=“...
Screens and Flex 4.5                                                              <?xml version="1.0"                     ...
Flex 4.5 and tablets© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.   21
Flex 4.5 and tablets          Android tablets© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.   21
Flex 4.5 and tablets          Android tablets                                                    BlackBerry PlayBook© 2010...
Flex 4.5 and tablets          Android tablets                                                    BlackBerry PlayBook   App...
Flex 4.5 and tablets          Android tablets                                                    BlackBerry PlayBook   App...
Demo© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.   22
New APIs for mobile apps                                                                            - Multitouch          ...
Create your on libraries© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.   24
Create your on libraries  ANE: No more limitation   ActionScript Native Extension© 2010 Adobe Systems Incorporated. All Ri...
Create your on libraries  ANE: No more limitation   ActionScript Native Extension© 2010 Adobe Systems Incorporated. All Ri...
Create your on libraries  ANE: No more limitation   ActionScript Native Extension                                         ...
Create your on libraries  ANE: No more limitation   ActionScript Native Extension                                         ...
Create your on libraries  ANE: No more limitation   ActionScript Native Extension                                         ...
Create your on libraries  ANE: No more limitation   ActionScript Native Extension                                         ...
Tomorrow’s Enterprise applications© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.   25
Tomorrow’s Enterprise applications  Business opportunities   Flex + JAVA services© 2010 Adobe Systems Incorporated. All Ri...
Michaël Chaize & resources                                                                             RIAgora.com       F...
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
Upcoming SlideShare
Loading in...5
×

Flex mobile for JUG

818

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Flex mobile for JUG

  1. 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. 2. Adobe Flex for Java developers© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 2
  3. 3. Adobe Flex for Java developers +© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 2
  4. 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. 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. 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. 7. Adobe Flex programming language <MXML> AS3 MVC© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 6
  8. 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. 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. 10. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  11. 11. e explosion of devices introduces new challenges for application development© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  12. 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. 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. 14. FLEX FRAMEWORK 4SPARK COMPONENT MODEL ActionScript MXML Component Skin Graphics Behavior Layout Animation Logic Parts Data CSS properties States
  15. 15. Mobile Applications in Flex 4.5 s:Application© 2010 Adobe Systems Incorporated. All Rights Reserved. 13
  16. 16. Mobile Applications in Flex 4.5 s:Application s:ViewNavigatorApplication© 2010 Adobe Systems Incorporated. All Rights Reserved. 13
  17. 17. Mobile Applications in Flex 4.5 s:Application s:ViewNavigatorApplication s:TabbedViewNavigatorApplication© 2010 Adobe Systems Incorporated. All Rights Reserved. 13
  18. 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. 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. 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. 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. 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. 23. Multiple densities: e problem 150 x 40 pixel bu on© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17
  24. 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. 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. 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. 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. 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. 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. 30. Can I use dynamic layout to solve this?© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18
  31. 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. 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. 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. 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. 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. 36. Solution: Automatic scaling for different DPIs© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 19
  37. 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. 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. 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. 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. 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. 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. 43. Flex 4.5 and tablets© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21
  44. 44. Flex 4.5 and tablets Android tablets© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21
  45. 45. Flex 4.5 and tablets Android tablets BlackBerry PlayBook© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21
  46. 46. Flex 4.5 and tablets Android tablets BlackBerry PlayBook Apple tablets© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21
  47. 47. Flex 4.5 and tablets Android tablets BlackBerry PlayBook Apple tablets© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21
  48. 48. Demo© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 22
  49. 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. 50. Create your on libraries© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24
  51. 51. Create your on libraries ANE: No more limitation ActionScript Native Extension© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24
  52. 52. Create your on libraries ANE: No more limitation ActionScript Native Extension© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24
  53. 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. 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. 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. 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. 57. Tomorrow’s Enterprise applications© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 25
  58. 58. Tomorrow’s Enterprise applications Business opportunities Flex + JAVA services© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 25
  59. 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. 60. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×