This document discusses how Flex can be used to build mobile applications that run across multiple platforms from a single codebase. It introduces Adobe AIR, which allows Flex applications to run as native mobile apps. It also highlights new features in Flex 4.5 that improve the mobile development experience, such as mobile skins for components and support for tablet densities.

1. One backend, multiple screens
Michaël Chaize | Flash Platform Evangelist | www.RIAgora.com | @mchaize
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

2. Adobe Flex
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2

3. 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 Confidential.

4. Flex & Java
&
Richness / Fast / Open-source / Industrialization
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

5. The explosion of devices introduces new
challenges for application development
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

6. 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 Confidential.

7. 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 Confidential.

8. Platforms, browsers, and devices
In-browser
Outside the browser
Mobile Platforms
Set-top boxes (Future)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

9. Adobe AIR
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9

10. How Flex Works on Mobile and Desktop
Mobile or Desktop
Files SQLite Notifications 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 Confidential.

11. 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 Confidential.

12. AIR on smartphones and tablets
© 2011 Adobe Systems Incorporated.

13. What about Flex ?

14. Adobe Flex 4.5
4.5
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14

15. FLEX FRAMEWORK 4
SPARK COMPONENT MODEL
ActionScript MXML
Component Skin
Graphics
Behavior Layout
Animation
Logic Parts
Data CSS properties States

16. Mobile Applications in Flex 4.5
s:Application s:MobileApplication s:TabbedMobileApplication
© 2010 Adobe Systems Incorporated. All Rights Reserved. 16

17. <s:MobileApplication> 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

18. 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

19. Components that have Mobile Skins
§ Button
§ CheckBox
§ DataGroup
§ Group/HGroup/VGroup/TileGroup
§ Image/BitmapImage
§ Label List
§ RadioButton/RadioButtonGroup
§ Scroller
§ TextArea
§ TextInput
© 2010 Adobe Systems Incorporated. All Rights Reserved. 19

20. 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

21. Flex 4.5 and tablets
Android tablets BlackBerry PlayBook Apple tablets
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21

22. Demo
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22

23. Tablet and Enterprise applications
Camera GPS
3G
Mobility
Bright screen Microphone
© 2011 Adobe Systems Incorporated.

24. Mobile applications + JAVA = REAL-TIME
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24

25. IN-CONTEXT COLLABORATION
LiveCycle Collaboration Service
Webcam Chat
Shared
Form

26. LiveCycle Collaboration Service
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 exist
ting websites
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26
All external content and images pending approvals.

27. JAVA
JAVA + FLEX
rockstar
rockstar

28. WIN A MOTOROLA XOOM !!!
http://tinyurl.com/adobejax
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28

29. Tomorrow at 3:45pm : technical workshop
© 2011 Adobe Systems Incorporated.

30. 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 Confidential. 30

31. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.