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.

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