Devoxx 2010: Develop mobile applications with Flex

1,899 views

Published on

Presentation by James Ward and Michaël Chaize for Devoxx 2010.

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

No Downloads
Views
Total views
1,899
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
41
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Devoxx 2010: Develop mobile applications with Flex

  1. 1. ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Develop mobile applications with AIR 2.5 James Ward & Michaël Chaize | Platform Evangelists
  2. 2. ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. James Ward & Michaël Chaize 2 @mchaize RIAgora.comjamesward.com @riacowboy
  3. 3. Flex on mobile ?
  4. 4. © 2010 Adobe Systems Incorporated. All Rights Reserved. Native Applications iOS Native App Native App Native App Native App Native App Native App
  5. 5. © 2010 Adobe Systems Incorporated. All Rights Reserved. AIR Flash Player Abstraction Layer iOS Flex Application
  6. 6. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Technologic partners Open Screen Project Content providers
  7. 7. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Flash Player 10.1 Flash Player 10.1 Google TV
  8. 8. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Adobe AIR 2.5 = native applications = multiple screens
  9. 9. © 2010 Adobe Systems Incorporated. All Rights Reserved. AIR extends the benefits of Flash Player Geo-Location SQLite Application Update Framework Application Lifecycle .AIR File format for multi-screen applications Enhanced Application Security model Marketplace Distribution Mobile Hardware Softkey Support File-System Access (if allowed) MediaLibrary API Native Extensibility ! Richer and more engaging user experiences out of the browser ! Empower Flash developers to deploy applications in app catalogs ! Leverage desktop AIR app ecosystem ! Shared codebase and porting with Flash Player ActionScript3 Support Memory, battery & CPU optimizations Audio/Video hardware decoding Optimized SWF management Multi-touch and Gestures Hardware Acceleration Mobile Text input
  10. 10. © 2010 Adobe Systems Incorporated. All Rights Reserved. Deploying AIR Android Applications Chroma Circuit.apkChroma Circuit.air ! AIR Applications are packaged up as .APK files ! Will be distributed through Android Market and other catalogs ! AIR Application upgrade mechanism through Android Market ! AIR Runtime will be distributed in Android Market as Shared Library ! Users will have to download the Runtime once for all AIR applications ! Upgrade through the Android Market Android Market Android Device
  11. 11. © 2010 Adobe Systems Incorporated. All Rights Reserved. AIR for iOS ! Export SWF to IPK ! Cross-Compiles AIR Runtime and App to native Objective-C Bytecode ! Uses LLVM ! Many AIR APIs are implemented ! Some APIs not possible (Loader.loadBytes)
  12. 12. © 2010 Adobe Systems Incorporated. All Rights Reserved. AIR for BlackBerry PlayBook http://us.blackberry.com/developers/tablet/devresources.jsp WIN A PLAYBOOK !!!
  13. 13. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. TOUR DE MOBILE FLEX
  14. 14. © 2010 Adobe Systems Incorporated. All Rights Reserved. Mobile Applications in "Hero" 14 s:TabbedMobileApplications:MobileApplications:Application
  15. 15. © 2010 Adobe Systems Incorporated. All Rights Reserved. 1 MobileApplication and TabbedMobileApplication ! View stack metaphor ! View ! ViewNavigator / TabbedViewNavigator ! Built-in mobile navigation experience ! Action bar ! Back button ! Transitions ! APIs 15
  16. 16. © 2010 Adobe Systems Incorporated. All Rights Reserved. ViewNavigator API ! navigator.pushView(); ! navigator.popView(); ! navigator.popToFirstView() ! navigator.activeView; 16 2
  17. 17. © 2010 Adobe Systems Incorporated. All Rights Reserved. ActionBar <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> 17 3 navigationContent titleContent actionContent
  18. 18. © 2010 Adobe Systems Incorporated. All Rights Reserved. Components that have Mobile Skins ! Button ! CheckBox ! DataGroup ! Group/HGroup/VGroup/TileGroup ! Image/BitmapImage ! Label List ! RadioButton/RadioButtonGroup ! Scroller ! TextArea ! TextInput 18
  19. 19. © 2010 Adobe Systems Incorporated. All Rights Reserved. View Lifecycle ! Alternative option: destructionPolicy=“none” 19 View becomes active View Created Another view becomes active View Destroyed User navigates back to view View Recreated data 3B
  20. 20. © 2010 Adobe Systems Incorporated. All Rights Reserved. Mobile ItemRenderers ! MobileItemRenderer ! MobileIconItemRenderer <s:MobileIconItemRenderer labelField="lastName" messageField="title" iconField="picture" decoratorClass=”phoneIcon"> 20 4
  21. 21. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. LET’S CODE A FLEX MOBILE APP
  22. 22. labs.adobe.com Download Flash Builder “Burrito” and Flex “Hero” Get the source code of Tour de Mobile Flex Check the Flex “Hero” tutorials on developer.adobe.com Free Flex 4 trainings in Belgium and seminars http://bit.ly/ria_update
  23. 23. ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Feel free to contact us 23 @mchaize RIAgora.comjamesward.com @riacowboy

×