develop mobile applications with flex
DESCRIPTION
TRANSCRIPT
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Michaël Chaize | Flash Platform Evangelist
Develop mobile applications with Flex
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Menu du jour
2
Flex & Flash on mobileLive coding for AndroidMobile APIsFlex, Java and Real-timeResources
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobe Flex
3
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flash Builder IDE
Flex SDK
Flex Class Library
MXML ActionScript
Compile
SOAP HTTP/S AMF/S RTMP/S
Web Server
Existing Applications & Infrastructure
J2EE Application Server
Adobe Data ServicesXML/HTTP
REST
SOAP Web Services
Browser
Flash Player
4
Adobe Flex basics
OLD COMPONENT MODEL
FLEX FRAMEWORK 3
GraphicsLayoutAnimationPartsStatesBehaviorLogicData
Component / Skin
SPARK COMPONENT MODEL
FLEX FRAMEWORK 4
ActionScript MXML
GraphicsLayout
AnimationParts
States
Component Skin
CSS properties
BehaviorLogicData
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
First-class interfaces
Flex on mobile ?
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Technologic partners
Open Screen Project
Content providers
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flash Player 10.1
Flash Player 10.1
Google TV
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobe AIR 2.5 = native applications = multiple screens
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Native Applications
iOS
NativeApp
NativeApp
NativeApp
NativeApp
NativeApp
NativeApp
?
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Adobe runtimes (Flash & AIR)
Abstraction Layer
iOS
Flex Application
?READY READY2011 soon soon
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Flex “Hero”
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Mobile Applications in "Hero"
15
s:TabbedMobileApplication s:MobileApplications:Application
© 2010 Adobe Systems Incorporated. All Rights Reserved.
<s:MobileApplication> life cycle
16
views.ListEmployees views.DetailsEmployee views.ListEmployees
DATA DATA
persisted in memory
subset
view destroyed view created
view destroyed view created
“BACK” bu�on
© 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>
17 3
navigationContent titleContent actionContent
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Components that have Mobile Skins
§ Button
§ CheckBox
§ DataGroup
§ Group/HGroup/VGroup/TileGroup
§ Image/BitmapImage
§ Label List
§ RadioButton/RadioButtonGroup
§ Scroller
§ TextArea
§ TextInput
18
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Mobile APIs
19
© 2010 Adobe Systems Incorporated. All Rights Reserved.
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.
Accelerometer APIs
§ Accelerometer.isSupported
§ a.addEventListener(AccelerometerEvent.UPDATE, callbackFunction);
§ AccelerometerEvent:
§ accelerationX
§ accelerationY
§ accelerationZ
§ timestamp
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Multi-Touch APIs
§ Android manifest change:
<uses-feature android:required="true" android:name="android.hardware.touchscreen.multitouch"/>
§ Gesture OR Multitouch --- Multitouch.inputMode
§ MultitouchInputMode.GESTURE
§ TransformGestureEvent
§ GESTURE_PAN
§ GESTURE_ROTATE
§ GESTURE_SWIPE
§ GESTURE_ZOOM
§ GestureEvent.GESTURE_TWO_FINGER_TAP
§ PressAndTapGestureEvent.GESTURE_PRESS_AND_TAP
§ MultitouchInputMode.TOUCH_POINT
§ TouchEvent
§ TOUCH_BEGIN
§ TOUCH_END
§ TOUCH_MOVE
§ TOUCH_OUT
§ TOUCH_OVER
§ TOUCH_ROLL_OUT
§ TOUCH_ROLL_OVER
§ TOUCH_TAP
© 2010 Adobe Systems Incorporated. All Rights Reserved.
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.
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.
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);
25
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Native App Integration
§ Open Email, Browser, Maps, Phone, or SMS
§ navigateToURL(new URLRequest('mailto:[email protected]'));
§ navigateToURL(new URLRequest('http://www.jamesward.com'));
§ navigateToURL(new URLRequest('http://maps.google.com/'));
§ navigateToURL(new URLRequest('tel:1234567890'));
§ navigateToURL(new URLRequest('sms:1234567890'));
26
© 2010 Adobe Systems Incorporated. All Rights Reserved.
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.
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");
28
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Mobile applications + JAVA = REAL-TIME
29
LiveCycle Collaboration Service
IN-CONTEXT COLLABORATION
Webcam Chat
SharedForm
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
All external content and images pending approvals.
Multi-user collaboration in real time
LiveCycle Collaboration Service
Major 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 exist ting websites
31
§ 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),
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
LiveCycle Data Services today
32
Flex Client Flex Client Flex Client
LCDS
Java Classes
Thing1.classThing2.classThing3.class
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
LiveCycle Data Services tomorrow (2011)
33
LCDS
NET
??.?????.?????.???
Java Classes
Thing1.classThing2.classThing3.class
.NET C# Classes
Thing1.dllThing2.dllThing3.dll
IIS Plugin.NET RemotingMessagingMSMQ Messaging
.NET AdapterRemotingMessagingData Mgmt
.NET
Ada
pter
Flex Client Flex Client Flex ClientJava Client Android ClientHTML5/JS Client ObjC Client
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Publish/Subscribe Messaging
Message
Service
LiveCycle DS / Blaze DS
Endpoint
PublisherSubscriber
§RTMP
§AMF
§HTTP
§Client A
§Client B
§Client C
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Data Push - Messaging
Message
Services
LiveCycle DS / Blaze DS
Adapter Y
Adapter X
Messaging
System Y
Messaging
System X
EndpointJMS
ProviderJMS Adapter
PublisherSubscriber
§RTMP
§AMF
§HTTP
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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) { }
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Michaël Chaize & resources
37
@mchaize
RIAgora.com Flex.org
labs.adobe.com
developer.adobe.com
Tour de Mobile Flex
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Bar Chart
0
1.3
2.5
3.8
5.0
Category 1 Category 2 Category 3 Category 4
Series 1Series 2Series 3
Try to use neutral colors for most chart elements, and highlight elements of interest with bright colors
39
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Pie Chart
Sales
1st Qtr2nd Qtr3rd Qtr4th Qtr
Try to use neutral colors for most chart elements, and highlight elements of interest with bright colors
40
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Gray Content Area Layout
For use with full-screen images or diagrams that look good on gray
41
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Black Content Area Layout
For use with full-screen images or diagrams that look good on black
42
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Color Palette
Dynamic
R - 136G - 120B - 104
R - 131G - 72B - 181
R – 251G - 176B - 52
R - 172G - 179B - 185
R - 0G - 164B - 228
R - 192G - 181B - 169
R - 255G - 221B - 0
R - 107G - 115B - 123
R - 255G - 0B - 0
R - 218G - 221B – 224
R - 193G - 216B - 47
R - 228G - 223B - 217
Neutral
Note
The Adobe corporate color palette has been incorporated into this presentation template.
Refer to the Corporate Brand Guidelines, found on Brand Center for more guidance on using this color palette
www.adobe.com/brandecenter