More Related Content
Similar to Develop mobile applications with Flex
Similar to Develop mobile applications with Flex (20)
Develop mobile applications with Flex
- 1. Develop mobile applications with Flex
Michaël Chaize | Flash Platform Evangelist
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 2. Menu du jour
Flex & Flash on mobile
Live coding for Android
Mobile APIs
Flex, Java and Real-time
Resources
2
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 3. Adobe Flex
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
- 4. Adobe Flex basics
Flash Builder IDE Browser
Flex SDK Flash Player
MXML ActionScript
Flex Class Library SOAP HTTP/S AMF/S RTMP/S
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
- 5. FLEX FRAMEWORK 3
OLD COMPONENT MODEL
Component / Skin
Graphics
Layout
Animation
Parts
States
Behavior
Logic
Data
- 6. FLEX FRAMEWORK 4
SPARK COMPONENT MODEL
ActionScript MXML
Component Skin
Graphics
Behavior Layout
Animation
Logic
CSS properties Parts
Data States
- 9. Open Screen Project
Technologic partners Content providers
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 10. Flash Player 10.1
Flash Player 10.1
Google TV
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 11. Adobe AIR 2.5 = native applications = multiple screens
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 12. Native Applications
Native Native Native Native Native Native
App App App App App App
iOS ?
© 2010 Adobe Systems Incorporated. All Rights Reserved.
- 13. Abstraction Layer
Flex Application
Adobe runtimes (Flash & AIR)
iOS ?
2011 READY READY soon soon
© 2010 Adobe Systems Incorporated. All Rights Reserved.
- 15. Mobile Applications in "Hero"
s:Application s:MobileApplication s:TabbedMobileApplication
© 2010 Adobe Systems Incorporated. All Rights Reserved. 15
- 16. <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. 16
- 17. 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. 17 3
- 18. 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. 18
- 20. GEO APIs
§ Android Permission Required:
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission
android:name="android.permission.ACCESS_FINE_LOCATION" />
§ Geolocation.isSupported
§ g.addEventListener(GeolocationEvent.UPDATE, callbackFunction);
§ GeolocationEvent:
§ altitude
§ heading
§ horizontalAccuracy
§ latitude
§ longitude
§ speed
§ timestamp
§ verticalAccuracy
© 2010 Adobe Systems Incorporated. All Rights Reserved.
- 21. Accelerometer APIs
§ Accelerometer.isSupported
§ a.addEventListener(AccelerometerEvent.UPDATE, callbackFunction);
§ AccelerometerEvent:
§ accelerationX
§ accelerationY
§ accelerationZ
§ timestamp
© 2010 Adobe Systems Incorporated. All Rights Reserved.
- 22. Multi-Touch APIs
§ Android manifest change:
<uses-feature android:required="true" android:name="android.hardware.touchscreen.multitouch"/>
§ Gesture OR Multitouch --- Multitouch.inputMode
MultitouchInputMode.GESTURE § MultitouchInputMode.TOUCH_POINT
§
TransformGestureEvent § TouchEvent
§
GESTURE_PAN § TOUCH_BEGIN
§
GESTURE_ROTATE § TOUCH_END
§
GESTURE_SWIPE § TOUCH_MOVE
§
GESTURE_ZOOM § TOUCH_OUT
§
GestureEvent.GESTURE_TWO_FINGER_TAP § TOUCH_OVER
§
PressAndTapGestureEvent.GESTURE_PRESS_AND_TAP § TOUCH_ROLL_OUT
§
§ TOUCH_ROLL_OVER
§ TOUCH_TAP
© 2010 Adobe Systems Incorporated. All Rights Reserved.
- 23. Remote Data
§ Android Permission Required:
<uses-permission android:name="android.permission.INTERNET"/>
§ Standard Flex Networking Libraries:
§ HTTPService
§ WebService
§ RemoteObject
© 2010 Adobe Systems Incorporated. All Rights Reserved.
- 24. Full Screen & Orientation
§ stage.displayState = StageDisplayState.NORMAL
§ stage.displayState = StageDisplayState.FULL_SCREEN
§ stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE
§ StageOrientationEvent:
stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, callbackFunction);
§ foo-app.xml:
<initialWindow>
<autoOrients>true</autoOrients>
© 2010 Adobe Systems Incorporated. All Rights Reserved.
- 25. Camera Access
§ Camera - Raw camera feed
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="true"/>
<uses-feature android:name="android.hardware.camera.autofocus" android:required="false"/>
<uses-feature android:name="android.hardware.camera.flash" android:required="false"/>
§ CameraUI - Native Camera App
var cameraUI:CameraUI = new CameraUI();
cameraUI.launch(MediaType.IMAGE);
§ CameraRoll - Choose photos from the device's camera roll
var cameraRoll:CameraRoll = new CameraRoll();
cameraRoll.browseForImage();
cameraRoll.addBitmapData(bd);
© 2010 Adobe Systems Incorporated. All Rights Reserved. 25
- 26. Native App Integration
§ Open Email, Browser, Maps, Phone, or SMS
§ navigateToURL(new URLRequest('mailto:foo@bar.com'));
§ navigateToURL(new URLRequest('http://www.jamesward.com'));
§ navigateToURL(new URLRequest('http://maps.google.com/'));
§ navigateToURL(new URLRequest('tel:1234567890'));
§ navigateToURL(new URLRequest('sms:1234567890'));
© 2010 Adobe Systems Incorporated. All Rights Reserved. 26
- 27. Local DB APIs
§ SQLite - Nothing different than AIR for the Desktop
§ SQLConnection
§ Sync and/or Async connections
§ SQLStatement
§ Prepared Statements:
var stmt:SQLStatement = new SQLStatement();
stmt.sqlConnection = FlexGlobals.topLevelApplication['sqlConnection'];
stmt.text = "INSERT into giberish values(:giberish)";
stmt.parameters[":giberish"] = g.text;
stmt.execute();
© 2010 Adobe Systems Incorporated. All Rights Reserved.
- 28. StageWebView
§ Requires Android INTERNET permission:
<uses-permission android:name="android.permission.INTERNET" />
§ WebStageView.isSupported
var swv:StageWebView = new StageWebView();
swv.viewPort = new Rectangle(0, stage.height - height, width, height);
swv.stage = stage;
swv.loadURL("http://www.riagora.com");
© 2010 Adobe Systems Incorporated. All Rights Reserved. 28
- 29. Mobile applications + JAVA = REAL-TIME
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29
- 31. 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. 31
All external content and images pending approvals.
- 32. LiveCycle Data Services today
Flex Client Flex Client Flex Client
LCDS
Java Classes
Thing1.class
Thing2.class
Thing3.class
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32
- 33. LiveCycle Data Services tomorrow (2011)
HTML5/JS Client Java Client Flex Client Flex Client Flex Client Android Client ObjC Client
.NET Adapter
Remoting
Messaging
Data Mgmt IIS Plugin
.NET Remoting
LCDS
.NET Adapter
Messaging
MSMQ Messaging
NET
Java Classes .NET C# Classes
Thing1.class Thing1.dll
??.???
Thing2.class Thing2.dll
??.???
Thing3.class Thing3.dll
??.???
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33
- 34. Publish/Subscribe Messaging
LiveCycle DS / Blaze DS
§Client A
Message
Endpoint
Service
§Client B
§RTMP
§Client C
§AMF Publisher
§HTTP Subscriber
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 35. Data Push - Messaging
LiveCycle DS / Blaze DS
Messaging
Adapter X
System X
Message JMS
Endpoint JMS Adapter
Services Provider
Messaging
Adapter Y
System Y
§RTMP
§AMF Publisher
§HTTP Subscriber
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 36. Data Push - Messaging
public static class GPSThread extends Thread {
public boolean running = true;
public void run() {
MessageBroker msgBroker = MessageBroker.getMessageBroker(null);
String clientID = UUIDUtils.createUUID();
while (running) {
double change = gpsService.getCurrentPosition();
AsyncMessage msg = new AsyncMessage();
msg.setDestination("feed");
msg.setClientId(clientID);
msg.setMessageId(UUIDUtils.createUUID());
msg.setTimestamp(System.currentTimeMillis());
msg.setBody(new Double(change));
msgBroker.routeMessageToService(msg, null);
try {
Thread.sleep(300);
} catch (InterruptedException e) {
}
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 37. 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. 37
- 38. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 39. Bar Chart
Try to use neutral colors for most chart elements, and highlight elements of interest
with bright colors
5.0
3.8
Series 1
2.5 Series 2
Series 3
1.3
0
Category 1 Category 2 Category 3 Category 4
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 39
- 40. Pie Chart
Try to use neutral colors for most chart elements, and highlight elements of interest
with bright colors
Sales
1st Qtr
2nd Qtr
3rd Qtr
4th Qtr
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40
- 41. Gray Content Area Layout
For use with full-screen images or diagrams that look good on gray
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 41
- 42. Black Content Area Layout
For use with full-screen images or diagrams that look good on black
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 42
- 43. Color Palette
Dynamic Note
The Adobe corporate color
palette has been incorporated
into this presentation template.
R - 255 R – 251 R - 255 R - 193 R-0 R - 131
G-0 G - 176 G - 221 G - 216 G - 164 G - 72
B-0 B - 52 B-0 B - 47 B - 228 B - 181 Refer to the Corporate Brand
Guidelines, found on Brand
Center for more guidance on
using this color palette
Neutral
www.adobe.com/brandecenter
R - 218 R - 172 R - 107 R - 228 R - 192 R - 136
G - 221 G - 179 G - 115 G - 223 G - 181 G - 120
B – 224 B - 185 B - 123 B - 217 B - 169 B - 104
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.