jax 2011 keynote
DESCRIPTION
Slides at JAX Mainz 2011 about Flex 4.5 and mobile applicationsTRANSCRIPT
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Michaël Chaize | Flash Platform Evangelist | www.RIAgora.com | @mchaizeArchitecting user experiences
1Wednesday, May 11, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe Flex
2
2Wednesday, May 11, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flex SDK
Flex Class Library
MXML ActionScript
Debuggers
How Flex Works in the Browser
Flash Builder IDE
3Wednesday, May 11, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flex SDK
Flex Class Library
MXML ActionScript
Debuggers
How Flex Works in the Browser
Compile
SOAP HTTP/S AMF/S RTMP/S
Web Server
Existing Applications & Infrastructure
J2EE Application Server
Adobe Data ServicesXML/HTTPREST
SOAP Web Services
Browser
Flash Player
Flash Builder IDE
3Wednesday, May 11, 2011
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flex & Java
&
Richness / Fast / Open-source / Industrialization
4Wednesday, May 11, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
5Wednesday, May 11, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
"e explosion of devices introduces new challenges for application development
5Wednesday, May 11, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Native Mobile Application Development Model
NativeApp
NativeApp
NativeApp
NativeApp
Additional OS’s
A costly, inefficient development model
6Wednesday, May 11, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Introducing a new mobile development paradigm
Additional OS’s
AIR
Flex Application
One Tool, One Language, One Codebase
Any Platform
Common codebase
7Wednesday, May 11, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Platforms, browsers, and devices
In-browser
Outside the browser
Set-top boxes (Future)
Mobile Platforms
8Wednesday, May 11, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe AIR
9
9Wednesday, May 11, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
How Flex Works on Mobile and Desktop
Flex SDK
Flex Class Library
Debuggers
Flash Builder IDE
MXML ActionScript
10Wednesday, May 11, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
How Flex Works on Mobile and Desktop
Compile & Package
SOAP HTTP/S AMF/S RTMP/S
Web Server / Market place
Existing Applications & Infrastructure
J2EE Application Server
LC Data ServicesXML/HTTPREST
SOAP Web Services
Mobile or Desktop
AIR Client Runtime
Files SQLite Noti!cations ClipboardFlex SDK
Flex Class Library
Debuggers
Flash Builder IDE
MXML ActionScript
10Wednesday, May 11, 2011
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe AIR APIs
- Multitouch- Geolocation- Cameras- Microphone- Accelerometer- Display a web page- SQLite local database- Native extensions- GPU acceleration
11Wednesday, May 11, 2011
© 2011 Adobe Systems Incorporated.
AIR on smartphones and tablets
12Wednesday, May 11, 2011
What about Flex ?
13Wednesday, May 11, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe Flex 4.5
14
4.5
14Wednesday, May 11, 2011
SPARK COMPONENT MODEL
FLEX FRAMEWORK 4
ActionScript MXML
GraphicsLayout
AnimationParts
States
Component Skin
CSS properties
BehaviorLogicData
15Wednesday, May 11, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Mobile Applications in Flex 4.5
16
s:TabbedViewNavigatorApplications:ViewNavigatorApplications:Application
16Wednesday, May 11, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved.
<s:ViewNavigatorApplication> life cycle
17
views.ListEmployees views.DetailsEmployee views.ListEmployees
DATA DATA
persisted in memory
subset
view destroyed view created
view destroyed view created
“BACK” bu!on
17Wednesday, May 11, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved.
<s:ViewNavigatorApplication> life cycle
17
views.ListEmployees views.DetailsEmployee views.ListEmployees
DATA DATA
persisted in memory
subset
view destroyed view created
view destroyed view created
“BACK” bu!on
17Wednesday, May 11, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved.
<s:ViewNavigatorApplication> life cycle
17
views.ListEmployees views.DetailsEmployee views.ListEmployees
DATA DATA
persisted in memory
subset
view destroyed view created
view destroyed view created
“BACK” bu!on
17Wednesday, May 11, 2011
© 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>
18 3
navigationContent titleContent actionContent
18Wednesday, May 11, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Components that have Mobile Skins
§ Bu$on
§ CheckBox
§ DataGroup
§ Group/HGroup/VGroup/TileGroup
§ Image/BitmapImage
§ Label List
§ RadioBu$on/RadioBu$onGroup
§ Scroller
§ TextArea
§ TextInput
19
19Wednesday, May 11, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Screens and Flex 4.5
<?xml version="1.0" encoding="utf-8"?>
<s:MobileApplication applicationDPI="160"> ...
20
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>
20Wednesday, May 11, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flex 4.5 and tablets
21
BlackBerry PlayBookAndroid tablets Apple tablets
21Wednesday, May 11, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Demo
22
22Wednesday, May 11, 2011
© 2011 Adobe Systems Incorporated.
Tablet and Enterprise applications
Camera
Microphone
GPS
3G
Mobility
Bright screen
23Wednesday, May 11, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Mobile applications + JAVA = REAL-TIME
24
24Wednesday, May 11, 2011
LiveCycle Collaboration Service
IN-CONTEXT COLLABORATION
Webcam Chat
SharedForm
25Wednesday, May 11, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
All external content and images pending approvals.
Multi-user collaboration in real time
LiveCycle Collaboration Service Flex & JAVA API
Major CapabilitiesMajor Capabilities
Peer-to-peer (P2P) streaming of data, audio and video HTTP server-to-server APIsPrivate audio/video streaming Server-side provisioning of services
Large Rooms – via on-demand loading of user presence
Audio/video application multicast
Record and Playback Screen sharing
JavaScript APIs – integration with a customer’s existing websitesJavaScript APIs – integration with a customer’s existing websites
26
§ 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),
26Wednesday, May 11, 2011
JAVA rockstar
JAVA + FLEX 4 rockstar
27Wednesday, May 11, 2011
JAVA rockstar
JAVA + FLEX 4 rockstar
JAVA + FLEX 4.5HYPER ROCK STAR
27Wednesday, May 11, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Michaël Chaize & resources
30
@mchaize
RIAgora.com Flex.orglabs.adobe.com
developer.adobe.com
Tour de Mobile Flex
30Wednesday, May 11, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
31Wednesday, May 11, 2011