Developing for Mobile with the Flex Framework


Published on

A presentation given at AndroidTO conference about developer for mobile with AIR 3 and Flex 4.5.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • How many designers out there? How many developers? How many Flex developers? Developers familiar with Flex 4?
  • supports hardware keys currently only back button, but looks like support for menu button is coming in a later release orientation support keeps track of the device orientation as a Flex state you can create a UI that changes with orientation or you can give it a completely different view provides API to save data between application sessions & phone calls note the data that is saved is not encrypted best not use this for any sensitive data, unless you add your own encryption
  • Developing for Mobile with the Flex Framework

    1. 1. AndroidTO Developing for Mobile with the Flex Framework By Matthew Fabb
    2. 2. Who Am I? <ul><li>I’m a Flash/Flex developer that has been doing Flash work from the tail-end of Flash 4 and the beginning of Flash 5
    3. 3. I am currently a developer at StickerYou
    4. 4. I was a technical editor on Wrox’s Professional Flex 3 </li><ul><li>Authored by: Joseph Balderson, Andrew Trice, Peter Ent, Joe Berkovitz, Tom Sugden, Todd Prekaski, David Hassoun, and Jun Heider. </li></ul></ul> [email_address] @mattthewfabb
    5. 6. Flash & AIR - Reach
    6. 8. System Requirements for AIR <ul><li>Android </li><ul><li>Android 2.2+
    7. 9. ARMv7 processor </li><ul><li>Vector FPU (Floating Point Units)
    8. 10. Minimum 550MHz
    9. 11. OpenGL ES 2.0
    10. 12. H.264 and AAC HW decoders </li></ul><li>256MB of RAM </li></ul><li>iOS </li><ul><li>iOS 4+
    11. 13. iPhone 3GS+
    12. 14. iPad 1+ </li></ul></ul>
    13. 15. New in Adobe AIR 3 <ul><li>AIR Native Extensions (ANE) </li><ul><li>Native code can be combined with an AIR app
    14. 16. Allows an AIR app to access any API
    15. 17. ANE file is compiled separately then compiled into an AIR app
    16. 18. Adobe has a growing list of examples
    17. 19. Native components can be used, but there are some limitations to graphics </li></ul></ul>
    18. 20. New in Adobe AIR 3 <ul><li>AIR Native Extensions (ANE) </li><ul><li>ANE can be bundled into the hardware
    19. 21. Flash Builder 4.6 will have built in ANE support </li><ul><li>Flash Builder 4.6 will be a free update to users of Flash Builder 4.5
    20. 22. Will be out before the end of the year </li></ul></ul></ul>
    21. 23. New in Adobe AIR 3 <ul><li>Captive Runtime </li><ul><li>This means an AIR runtime can be packaged inside of an AIR app
    22. 24. An AIR APK file can be installed like a native Android app without AIR installed
    23. 25. EXE files can be made for Windows </li><ul><li>AIR apps can run without being installed </li><ul><li>Run off an USB or DVD/CD </li></ul></ul><li>DMG files can be made for Mac </li><ul><li>AIR apps can now be added to the Apple Mac Store </li></ul></ul></ul>
    24. 26. New in AIR 3 <ul><li>StageText </li><ul><li>Native text input
    25. 27. Get to use the native auto-correct & auto-capitalize functionality
    26. 28. Will be used in the Flex TextInput component </li></ul></ul>
    27. 29. The Future of AIR <ul><li>Adobe continues to heavily invest in AIR
    28. 30. Adobe is releasing Flash & AIR on a quarterly schedule
    29. 31. AIR 3.1 scheduled for release before the end of 2011
    30. 32. Adobe has an Incubator builds of Flash Player, which they expect to move up to monthly, weekly & ultimately daily builds
    31. 33. Photoshop Touch was built in Adobe AIR using native extensions </li></ul>
    32. 34. What is Flex? <ul><li>Flex is an Adobe open source framework to create Flash applications
    33. 35. MXML, an XML-based mark up language is used to layout the interface of the application
    34. 36. ActionScript is used with the MXML for interactivity
    35. 37. CSS can be used to style the application
    36. 38. MXML, ActionScript & CSS is very similar to HTML, JavaScript & CSS
    37. 39. MXML, CSS & ActionScript is compiled into generated ActionScript which is then compiled into a SWF file </li></ul>
    38. 40. What is Flex? <ul><li>The Flex compiler is free & open source
    39. 41. Developers can create Flex applications via: </li><ul><li>Adobe Flash Builder
    40. 42. 3 rd party tools such as FlashDevelop or FDT
    41. 43. Any text editor & the Flex compiler </li></ul></ul>
    42. 44. Flex 4.5 <ul><li>Flex 4.5 was built to target mobile
    43. 45. Flex 4.6 will be out by the end of 2011 with more mobile components & increases in performance
    44. 46. Tour Du Flex mobile </li></ul>
    45. 47. <ul><li>Supports hardware keys
    46. 48. Orientation support
    47. 49. Provides API to save data between application sessions & interruptions (such as phone calls)
    48. 50. Has 2 methods of dealing with multiple DPIs/PPIs on different devices </li></ul>Mobile Application
    49. 51. 1024x600 170 DPI 854x480 240 DPI 800x480 240 DPI 480x320 160 DPI 960x640 326 DPI 1024x768 120 DPI
    50. 52. Dealing with multiple DPIs <ul><li>In dealing with different PPI/DPI's, Flex divides it into 3 sections: </li><ul><li>160 dpi </li><ul><li>< 200 </li></ul><li>240 dpi </li><ul><li>>= 200
    51. 53. < 280 </li></ul><li>320 dpi </li><ul><li><= 280 </li></ul></ul></ul>
    52. 54. Dealing with multiple DPIs <ul><li>ApplicaitonDPI </li><ul><li>Get the app working on one DPI, set that DPI and have the app scale up or down for other DPIs </li></ul><li>MultiDPIBitmapSource <s:MultiDPIBitmapSource source160dpi=&quot;logo.png&quot; source240dpi=&quot;logo240.png&quot; source320dpi=&quot;logo320.png&quot; />
    53. 55. CSS that deals with multiple DPIs </li></ul>
    54. 56. What Flex 4.5 Mobile is made up of? <ul><li>Mobile theme
    55. 57. Mobile Application
    56. 58. View & ViewNavigator
    57. 59. Mobile Application Components </li><ul><li>ActionBar
    58. 60. Text Components
    59. 61. List, Scroller and Touch Gestures </li></ul><li>Mobile Splash Screen
    60. 62. Mobile View Menu – For Android menu settings hardware button
    61. 63. Functionality to deal with different DPI
    62. 64. Soft keyboard support </li></ul>
    63. 65. Flex 4.5 app breakdown <ul><li>ActionBar can appear above or bellow the view or both
    64. 66. ActionBar is consistent while the View changes from screen to screen </li></ul>
    65. 67. View & ViewNavigator <ul><li>The basis of how Flex mobile works
    66. 68. The main area is a stack where views are popped on and off
    67. 69. Only one view is visible at a time
    68. 70. When leaving a view the UI objects are destroyed, but data object persists, keeping the memory footprint small
    69. 71. You can override the destruction of the UI, if it's an expensive UI to build and destroy (detailed chart with lots of visible data)
    70. 72. A history is maintained and when the back button is pressed it cycles through the history
    71. 73. Transitions can be easily added from one screen to another </li></ul>
    72. 74. ActionBar <ul><li>There's 3 areas of the ActionBar </li><ul><li>navigationContent, titleContent and actionContent </li></ul><li>All are optional just like the ActionBar itself
    73. 75. TitleContent default has a label displaying the view title </li><ul><li>Can be disabled to just have the title of the app or something else similar </li></ul><li>Can be used with view transitions to animated in-sync with the view </li></ul>
    74. 76. Q & A
    75. 77. Resources <ul><li>Adobe Flash Builder:
    76. 78. Flex 4.5.1 SDK:
    77. 79. Flex portal run by Adobe:
    78. 80. Flex Developer Center:
    79. 81. Devgirl's Weblog - Holly Schinsky
    80. 82. Renaun Erickso </li></ul>