0
Architecting user experiences       Michaël Chaize | Flash Platform Evangelist | www.RIAgora.com | @mchaize © 2011 Adobe S...
Adobe Flex © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.   2Wednesday, May 11, 2011          ...
How Flex Works in the Browser          Flex SDK               MXML                   ActionScript                    Flex ...
How Flex Works in the Browser                                                                                             ...
Flex & Java                                                &                            Richness / Fast / Open-source / In...
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.Wednesday, May 11, 2011                         ...
e explosion of devices introduces new                           challenges for application development © 2011 Adobe System...
Native Mobile Application Development Model                                                            A costly, inefficient...
Introducing a new mobile development paradigm                                   One Tool, One Language, One Codebase      ...
Platforms, browsers, and devices  In-browser  Outside the browser  Mobile Platforms  Set-top boxes (Future) © 2011 Adobe S...
Adobe AIR © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.   9Wednesday, May 11, 2011           ...
How Flex Works on Mobile and Desktop          Flex SDK               MXML                   ActionScript                  ...
How Flex Works on Mobile and Desktop                                                                                      ...
Adobe AIR APIs                                                                             - Multitouch                   ...
AIR on smartphones and tablets © 2011 Adobe Systems Incorporated.Wednesday, May 11, 2011               12
What about Flex ?Wednesday, May 11, 2011   13
Adobe Flex 4.5                                                                                   4.5 © 2010 Adobe Systems ...
FLEX FRAMEWORK 4 SPARK COMPONENT MODEL                 ActionScript                    MXML                    Component  ...
Mobile Applications in Flex 4.5                    s:Application                          s:ViewNavigatorApplication   s:T...
<s:ViewNavigatorApplication> life cycle                        views.ListEmployees                views.DetailsEmployee   ...
<s:ViewNavigatorApplication> life cycle                        views.ListEmployees                views.DetailsEmployee   ...
<s:ViewNavigatorApplication> life cycle                        views.ListEmployees                views.DetailsEmployee   ...
ActionBar                      navigationContent                    titleContent   actionContent  <s:View xmlns:fx=http://...
Components that have Mobile Skins                                                           §   Bu on                    ...
Screens and Flex 4.5                                                               <?xml version="1.0"                    ...
Flex 4.5 and tablets           Android tablets                                                    BlackBerry PlayBook   Ap...
Demo © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.   22Wednesday, May 11, 2011               ...
Tablet and Enterprise applications                                                         Camera    GPS                  ...
Mobile applications + JAVA = REAL-TIME © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.   24Wedn...
IN-CONTEXT COLLABORATION   LiveCycle Collaboration Service                            Webcam   Chat       Shared       For...
LiveCycle Collaboration Service Flex & JAVA API     Multi-user collaboration in real time     §     Engage more effective...
JAVA         JAVA + FLEX 4            rockstar         rockstarWednesday, May 11, 2011                   27
JAVA + FLEX 4.5   HYPER ROCK STAR             JAVA         JAVA + FLEX 4            rockstar         rockstarWednesday, Ma...
Michaël Chaize & resources                                                                              RIAgora.com       ...
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.Wednesday, May 11, 2011                         ...
Upcoming SlideShare
Loading in...5
×

Jax 2011 keynote

822

Published on

Slides at JAX Mainz 2011 about Flex 4.5 and mobile applications

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

  • Be the first to like this

No Downloads
Views
Total Views
822
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Jax 2011 keynote"

  1. 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. 2. Adobe Flex © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 2Wednesday, May 11, 2011 2
  3. 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. 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. 5. Flex & Java & Richness / Fast / Open-source / Industrialization ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.Wednesday, May 11, 2011 4
  6. 6. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.Wednesday, May 11, 2011 5
  7. 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. 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. 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. 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. 11. Adobe AIR © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 9Wednesday, May 11, 2011 9
  12. 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. 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. 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. 15. AIR on smartphones and tablets © 2011 Adobe Systems Incorporated.Wednesday, May 11, 2011 12
  16. 16. What about Flex ?Wednesday, May 11, 2011 13
  17. 17. Adobe Flex 4.5 4.5 © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 14Wednesday, May 11, 2011 14
  18. 18. FLEX FRAMEWORK 4 SPARK COMPONENT MODEL ActionScript MXML Component Skin Graphics Behavior Layout Animation Logic Parts Data CSS properties StatesWednesday, May 11, 2011 15
  19. 19. Mobile Applications in Flex 4.5 s:Application s:ViewNavigatorApplication s:TabbedViewNavigatorApplication © 2010 Adobe Systems Incorporated. All Rights Reserved. 16Wednesday, May 11, 2011 16
  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. 17Wednesday, May 11, 2011 17
  21. 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. 17Wednesday, May 11, 2011 17
  22. 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. 17Wednesday, May 11, 2011 17
  23. 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 3Wednesday, May 11, 2011 18
  24. 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. 19Wednesday, May 11, 2011 19
  25. 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. 20Wednesday, May 11, 2011 20
  26. 26. Flex 4.5 and tablets Android tablets BlackBerry PlayBook Apple tablets © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21Wednesday, May 11, 2011 21
  27. 27. Demo © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 22Wednesday, May 11, 2011 22
  28. 28. Tablet and Enterprise applications Camera GPS 3G Mobility Bright screen Microphone © 2011 Adobe Systems Incorporated.Wednesday, May 11, 2011 23
  29. 29. Mobile applications + JAVA = REAL-TIME © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24Wednesday, May 11, 2011 24
  30. 30. IN-CONTEXT COLLABORATION LiveCycle Collaboration Service Webcam Chat Shared FormWednesday, May 11, 2011 25
  31. 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. 32. JAVA JAVA + FLEX 4 rockstar rockstarWednesday, May 11, 2011 27
  33. 33. JAVA + FLEX 4.5 HYPER ROCK STAR JAVA JAVA + FLEX 4 rockstar rockstarWednesday, May 11, 2011 27
  34. 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. 30Wednesday, May 11, 2011 30
  35. 35. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.Wednesday, May 11, 2011 31
  1. A particular slide catching your eye?

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

×