Developing for Mobile with Adobe AIR
Download as ODP, PDF•0 likes•1,142 views
The document provides an overview of the Sheridan Mobile Summit 2011 presentation by Matthew Fabb on developing mobile applications using Adobe AIR and related tools. It covers the features of Adobe Flex and its 4.5 version aimed at mobile development, including support for different devices, DPI handling, and key components for building apps. The presentation also touches on tools like Flash Builder, Dreamweaver, and the integration of HTML5 with mobile platforms.
Developing for Mobile with Adobe AIR
- 1. Sheridan Mobile Summit 2011 Developing for Mobile with Adobe AIR By Matthew Fabb
- 2. Who Am I? Education Sheridan's System Analyst/Computer Programmer in 2000 Sheridan's Interactive Mulitmedia in 2002 I am currently a developer at StickerYou I was a technical editor on Wrox’s Professional Flex 3 Authored by: Joseph Balderson, Andrew Trice, Peter Ent, Joe Berkovitz, Tom Sugden, Todd Prekaski, David Hassoun, and Jun Heider. http://www.mathewfabb.com [email protected] @mattthewfabb
- 3. Adobe & mobile Dreamweaver CS5.5 jQuery Mobile integration Allows you to create Android & iOS apps with PhoneGap using HTML, JS & CSS Adobe “Wallaby” Converts Flash into HTML5 content Very basic animations, good for banner ads WebKit only & optimized for iOS Adobe “Edge” prototype HTML5 animation tool Uses jQuery
- 4. Adobe & Mobile Digital Publishing Suite Creates digital magazines for iOS, Android & PlayBook (possibly for WebOS in the future) Photoshop Touch SDK Flash CS5.5 CS5 targeted iOS & now CS5.5 adds Android & Playbook Flash Builder 4.5 Includes Flex SDK 4.5 that has components targeted for mobile
- 5. Flash & AIR - Reach
- 6. Xoom, Galaxy Tab, Droid2, iPod Touch, iPad and in the browser.
- 7. What is Flex? Flex is an Adobe open source framework to create Flash applications MXML, an XML-based mark up language is used to layout the interface of the application ActionScript is used with the MXML for interactivity CSS can be used to style the application MXML, CSS & ActionScript is compiled into generated ActionScript which is then compiled into a SWF file
- 8. Adobe AIR AIR for desktop .AIR file for Mac, Linux, PC AIR for mobile .IPA file for iOS .APK file for Android .BAR file for PlayBook
- 9. What is Flex? The Flex compiler is free & open source Developers can create Flex applications via: Adobe's Flash Builder 3rd party tools such as FlashDevelop or FDT Any text editor & the Flex compiler
- 10. Flex 4.5 Next version of the Flex SDK is 4.5, code named Flex Hero Additional features were added to regular Flex applications, but the main focus was mobile
- 11. Mobile Application Supports hardware keys Orientation support Provides API to save data between application sessions & interruptions (such as phone calls) Has 2 methods of dealing with multiple DPIs on different devices
- 12. 480x320 800x480 854x480 960x640 1024x600 1024x768 160 DPI 240 DPI 240 DPI 326 DPI 170 DPI 120 DPI
- 13. Goals of Flex 4.5 Hero's 3 main goals of Flex 4.5 Spark Maturation Flex 4 Spark components still lag behind MX components Likely not to catch up completely in 4.5 Large-Application Development Better RSLs You can no use RSLs with monkey patching More spark componets: DataGrid, Form, PopUpContainer Text Layout Framework 2.0 integration Multi-Screen Development Mobile
- 14. What Flex 4.5 Mobile is made up of? Mobile theme Mobile Application View & ViewNavigator Mobile Application Components ActionBar Text Components List, Scroller and Touch Gestures Mobile Splash Screen Mobile View Menu – For Android menu settings hardware button Functionality to deal with different DPI Soft keyboard support
- 15. Flex 4.5 app breakdown ActionBar can appear above or bellow the view or both ActionBar is consistent while the View changes from screen to screen
- 16. Mobile theme Set of skins that are quite different from the regular Spark skins Designed and optimized for mobile devices For performance reasons all graphics are FXG and interaction is pure ActionScript Mobile skins in the preview for the following regular spark components: Button CheckBox RadioButton TextInput TextArea List Scrollbar More to come before final release
- 17. View & ViewNavigator The basis of how Flex Hero mobile works The main area is a stack where views are popped on and off Only one view is visible at a time When leaving a view the UI objects are destroyed, but data object persists, keeping the memory footprint small 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) A history is maintained and when the back button is pressed it cycles through the history Transitions can be easily added from one screen to another
- 18. ActionBar There's 3 areas of the ActionBar navigationContent, titleContent and actionContent All are optional just like the ActionBar itself TitleContent default has a label displaying the view title Can be disabled to just have the title of the app or something else similar Can be used with view transitions to animated in-sync with the view
- 19. Mobile text components Optimized for mobile TLF (Text Layout Framework) is not used and discouraged for mobile A mobile version of TLF is in the works but is not ready yet Flex mobile text components use old school TextField which has better performance over the new FTE (Flash Text Engine)
- 20. Additional components Mobile List, Scroller Similar to regular list, but optimized using MobileItemRenderer & responds to touch events Splash screen A graphic or animation to show as your application starts up and initializes Mobile View Menu Not in the latest build, but in the specification and is a menu that appears when the physical menu button on Android devices is pressed
- 21. Dealing with multiple DPIs Flex Hero has multiple ways displaying content at different DPIs In dealing with different DPI's, Flex Hero divides it into 3 sections: 160 dpi < 200 240 dpi >= 200 < 280 320 dpi <= 280
- 22. Dealing with multiple DPIs ApplicaitonDPI Get the app working on one DPI, set that DPI and have the app scale up or down for other DPIs MultiDPIBitmapSource <s:MultiDPIBitmapSource source160dpi="logo.png" source240dpi="logo240.png" source320dpi="logo320.png" /> CSS that deals with multiple DPIs
Editor's Notes
- #2: How many designers out there? How many developers? How many Flex developers? Developers familiar with Flex 4?
- #12: 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