Building mobile applications with Flex - jfokus.se · Building mobile applications with Flex...
Transcript of Building mobile applications with Flex - jfokus.se · Building mobile applications with Flex...
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Michaël Chaize | Flash Platform EvangelistBuilding mobile applications with Flex
Tuesday, February 15, 2011
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Menu du jour
2
Flex & Flash on mobileLive coding for AndroidFlex, Java and Real-timeResources
Tuesday, February 15, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Two superheros to save mobile applications developers
3
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe Flex
4
Tuesday, February 15, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flash Builder IDE
Flex SDK
Flex Class Library
MXML ActionScript
5
Adobe Flex basics
Tuesday, February 15, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flash Builder IDE
Flex SDK
Flex Class Library
MXML ActionScript
Compile
Web Server
Browser
Flash Player
5
Adobe Flex basics
Tuesday, February 15, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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
RESTSOAP Web Services
Browser
Flash Player
5
Adobe Flex basics
Tuesday, February 15, 2011
OLD COMPONENT MODEL
FLEX FRAMEWORK 3
GraphicsLayoutAnimationPartsStatesBehaviorLogicData
Component / Skin
Tuesday, February 15, 2011
SPARK COMPONENT MODEL
FLEX FRAMEWORK 4
ActionScript MXML
GraphicsLayout
AnimationParts
States
Component Skin
CSS properties
BehaviorLogicData
Tuesday, February 15, 2011
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
First-class interfaces
Tuesday, February 15, 2011
Flex on mobile ?
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Technologic partners
Open Screen Project
Content providers
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Technologic partners
Open Screen Project
Content providers
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Native Applications
iOS
NativeApp
NativeApp
NativeApp
NativeApp
NativeApp
NativeApp
?
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Adobe runtimes (Flash & AIR)
Abstraction Layer
iOS
Flex Application
?READY READY2011 soon soon
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Flex “Hero”
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Mobile Applications in "Hero"
14
s:Application
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Mobile Applications in "Hero"
14
s:MobileApplications:Application
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Mobile Applications in "Hero"
14
s:TabbedMobileApplication s:MobileApplications:Application
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved.
<s:MobileApplication> life cycle
15
views.ListEmployees views.DetailsEmployee views.ListEmployees
DATA DATA
persisted in memory
subset
view destroyed view created
view destroyed view created
“BACK” bu!on
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved.
<s:MobileApplication> life cycle
15
views.ListEmployees views.DetailsEmployee views.ListEmployees
DATA DATA
persisted in memory
subset
view destroyed view created
view destroyed view created
“BACK” bu!on
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved.
<s:MobileApplication> life cycle
15
views.ListEmployees views.DetailsEmployee views.ListEmployees
DATA DATA
persisted in memory
subset
view destroyed view created
view destroyed view created
“BACK” bu!on
Tuesday, February 15, 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>
16 3
navigationContent titleContent actionContent
Tuesday, February 15, 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
17
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Mobile applications + JAVA = REAL-TIME
18
Tuesday, February 15, 2011
LiveCycle Collaboration Service
IN-CONTEXT COLLABORATION
Webcam Chat
SharedForm
Tuesday, February 15, 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
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
20
§ 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),
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
LiveCycle Data Services today
21
Flex Client Flex Client Flex Client
LCDS
Java Classes
• Thing1.class• Thing2.class• Thing3.class
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
LiveCycle Data Services in 2011
22
LCDS
NET
• ??.???• ??.???• ??.???
Java Classes
• Thing1.class• Thing2.class• Thing3.class
.NET C# Classes
• Thing1.dll• Thing2.dll• Thing3.dll
IIS Plugin• .NET Remoting• Messaging• MSMQ Messaging
.NET Adapter• Remoting• Messaging• Data Mgmt
.NET
Ada
pter
Flex Client Flex Client Flex ClientJava Client Android ClientHTML5/JS Client ObjC Client
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Publish/Subscribe Messaging
Message
Service
LiveCycle DS / Blaze DS
Endpoint
PublisherSubscriber
§RTMP
§AMF
§HTTP
§Client A
§Client B
§Client C
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Publish/Subscribe Messaging
Message
Service
LiveCycle DS / Blaze DS
Endpoint
PublisherSubscriber
§RTMP
§AMF
§HTTP
§Client A
§Client B
§Client C
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Publish/Subscribe Messaging
Message
Service
LiveCycle DS / Blaze DS
Endpoint
PublisherSubscriber
§RTMP
§AMF
§HTTP
§Client A
§Client B
§Client C
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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) { }
Tuesday, February 15, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Two superheros to save mobile applications developers
26
Tuesday, February 15, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Two superheros to save mobile applications developers
26
Rich interfaces for yourweb, desktop and mobile apps.Real-time collaboration.
Expose your data using HTTP,SOAP, Remote AMF.Real-time data push.
ADOBE FLASH PLATFORM JAVA SUPER POWER
Tuesday, February 15, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Michaël Chaize & resources
27
@mchaize
RIAgora.com Flex.org
labs.adobe.com
developer.adobe.com
Tour de Mobile Flex
Tuesday, February 15, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Tuesday, February 15, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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
29
Tuesday, February 15, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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
30
Tuesday, February 15, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Gray Content Area Layout
For use with full-screen images or diagrams that look good on gray
31
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Mobile APIs
32
Tuesday, February 15, 2011
© 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
Tuesday, February 15, 2011
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Accelerometer APIs
§ Accelerometer.isSupported
§ a.addEventListener(AccelerometerEvent.UPDATE, callbackFunction);
§ AccelerometerEvent:
§ accelerationX
§ accelerationY
§ accelerationZ
§ timestamp
Tuesday, February 15, 2011
© 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
Tuesday, February 15, 2011
© 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
Tuesday, February 15, 2011
© 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>
Tuesday, February 15, 2011
© 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.#ash" 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);
38
Tuesday, February 15, 2011
© 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('h"p://www.jamesward.com'));
§ navigateToURL(new URLRequest('h"p://maps.google.com/'));
§ navigateToURL(new URLRequest('tel:1234567890'));
§ navigateToURL(new URLRequest('sms:1234567890'));
39
Tuesday, February 15, 2011
© 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();
Tuesday, February 15, 2011
© 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("h"p://www.riagora.com");
41
Tuesday, February 15, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Black Content Area Layout
For use with full-screen images or diagrams that look good on black
42
Tuesday, February 15, 2011
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Color Pale"e
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
%e Adobe corporate color pale"e has been incorporated into this presentation template.
Refer to the Corporate Brand Guidelines, found on Brand Center for more guidance on using this color pale"e
www.adobe.com/brandecenter
Tuesday, February 15, 2011