Jax 2011 keynote
0 likes532 views
The document discusses architecting user experiences with Flex and discusses: - How Flex works in the browser and on mobile/desktop. - Flex components that have mobile skins. - Features of Flex 4.5 for mobile like ViewNavigatorApplication and ActionBar. - Support for tablets in Flex 4.5. - Using Flex and Java together for real-time collaboration applications.
Jax 2011 keynote
- 1. Architecting user experiences Michaël Chaize | Flash Platform Evangelist | www.RIAgora.com | @mchaize © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. Wednesday, May 11, 2011 1
- 2. Adobe Flex © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 2 Wednesday, May 11, 2011 2
- 3. How Flex Works in the Browser Flex SDK MXML ActionScript Flex Class Library Debuggers Flash Builder IDE © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. Wednesday, May 11, 2011 3
- 4. How Flex Works in the Browser Browser Flex SDK MXML ActionScript Flash Player Flex Class Library Debuggers SOAP HTTP/S AMF/S RTMP/S Flash Builder IDE Web Server Compile XML/HTTP Adobe Data Services REST SOAP Web Services J2EE Application Server Existing Applications & Infrastructure © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. Wednesday, May 11, 2011 3
- 5. Flex & Java & Richness / Fast / Open-source / Industrialization ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. Wednesday, May 11, 2011 4
- 6. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. Wednesday, May 11, 2011 5
- 7. e explosion of devices introduces new challenges for application development © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. Wednesday, May 11, 2011 5
- 8. 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. Wednesday, May 11, 2011 6
- 9. Introducing a new mobile development paradigm One Tool, One Language, One Codebase Flex Application Common codebase AIR Additional OS’s Any Platform © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. Wednesday, May 11, 2011 7
- 10. Platforms, browsers, and devices In-browser Outside the browser Mobile Platforms Set-top boxes (Future) © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. Wednesday, May 11, 2011 8
- 11. Adobe AIR © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 9 Wednesday, May 11, 2011 9
- 12. How Flex Works on Mobile and Desktop Flex SDK MXML ActionScript Flex Class Library Debuggers Flash Builder IDE © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. Wednesday, May 11, 2011 10
- 13. How Flex Works on Mobile and Desktop Mobile or Desktop Files SQLite Noti cations Clipboard Flex SDK MXML ActionScript AIR Client Runtime Flex Class Library Debuggers SOAP HTTP/S AMF/S RTMP/S Flash Builder IDE Web Server / Market place Compile & Package XML/HTTP LC Data Services REST SOAP Web Services J2EE Application Server Existing Applications & Infrastructure © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. Wednesday, May 11, 2011 10
- 14. Adobe AIR APIs - 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. Wednesday, May 11, 2011 11
- 15. AIR on smartphones and tablets © 2011 Adobe Systems Incorporated. Wednesday, May 11, 2011 12
- 16. What about Flex ? Wednesday, May 11, 2011 13
- 17. Adobe Flex 4.5 4.5 © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 14 Wednesday, May 11, 2011 14
- 18. FLEX FRAMEWORK 4 SPARK COMPONENT MODEL ActionScript MXML Component Skin Graphics Behavior Layout Animation Logic Parts Data CSS properties States Wednesday, May 11, 2011 15
- 19. Mobile Applications in Flex 4.5 s:Application s:ViewNavigatorApplication s:TabbedViewNavigatorApplication © 2010 Adobe Systems Incorporated. All Rights Reserved. 16 Wednesday, May 11, 2011 16
- 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. 17 Wednesday, May 11, 2011 17
- 21. <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. 17 Wednesday, May 11, 2011 17
- 22. <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. 17 Wednesday, May 11, 2011 17
- 23. 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. 18 3 Wednesday, May 11, 2011 18
- 24. 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. 19 Wednesday, May 11, 2011 19
- 25. 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 Wednesday, May 11, 2011 20
- 26. Flex 4.5 and tablets Android tablets BlackBerry PlayBook Apple tablets © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21 Wednesday, May 11, 2011 21
- 27. Demo © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 22 Wednesday, May 11, 2011 22
- 28. Tablet and Enterprise applications Camera GPS 3G Mobility Bright screen Microphone © 2011 Adobe Systems Incorporated. Wednesday, May 11, 2011 23
- 29. Mobile applications + JAVA = REAL-TIME © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24 Wednesday, May 11, 2011 24
- 30. IN-CONTEXT COLLABORATION LiveCycle Collaboration Service Webcam Chat Shared Form Wednesday, May 11, 2011 25
- 31. LiveCycle Collaboration Service Flex & JAVA API Multi-user collaboration in real time § Engage more effectively through a web presence enhanced with real-time collaboration tools. § Integrate text chat, whiteboard functionality, webcam video, and audio into any rich Internet application (RIA), Major Capabilities Peer-to-peer (P2P) streaming of data, audio and video HTTP server-to-server APIs Private audio/video streaming Server-side provisioning of services Large Rooms – via on-demand loading of user Audio/video application multicast presence Record and Playback Screen sharing JavaScript APIs – integration with a customer’s existing websites © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 26 All external content and images pending approvals. Wednesday, May 11, 2011 26
- 32. JAVA JAVA + FLEX 4 rockstar rockstar Wednesday, May 11, 2011 27
- 33. JAVA + FLEX 4.5 HYPER ROCK STAR JAVA JAVA + FLEX 4 rockstar rockstar Wednesday, May 11, 2011 27
- 34. 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. 30 Wednesday, May 11, 2011 30
- 35. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. Wednesday, May 11, 2011 31