Develop multi-screen applications with Flex

Building mobile applications with Flex
Michaël Chaize | Flash Platform Evangelist

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

Menu du jour

Flex & Flash on mobile
Live coding for Android
Flex, Java and Real-time
Resources

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

Two superheros to save mobile applications developers

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

Adobe Flex


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


FLEX FRAMEWORK 3

OLD COMPONENT MODEL

Component / Skin

Graphics
Layout
Animation
Parts
States
Behavior
Logic
Data

FLEX FRAMEWORK 4

SPARK COMPONENT MODEL

ActionScript MXML

Component Skin

Graphics
Behavior Layout
Animation
Logic
CSS properties Parts
Data States

First-class interfaces

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

Open Screen Project

Technologic partners Content providers


Native Applications

Native Native Native Native Native Native
App App App App App App

iOS ?

© 2010 Adobe Systems Incorporated. All Rights Reserved.

Abstraction Layer

Flex Application

Adobe runtimes (Flash & AIR)

iOS ?
2011 READY READY soon soon


Flex “Hero”


Mobile Applications in "Hero"

s:Application s:MobileApplication s:TabbedMobileApplication

© 2010 Adobe Systems Incorporated. All Rights Reserved. 14

<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

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

Components that have Mobile Skins

§ Button
§ CheckBox
§ DataGroup
§ Group/HGroup/VGroup/TileGroup
§ Image/BitmapImage
§ Label List
§ RadioButton/RadioButtonGroup
§ Scroller
§ TextArea
§ TextInput


Mobile applications + JAVA = REAL-TIME


IN-CONTEXT COLLABORATION

LiveCycle Collaboration Service

Webcam Chat

Shared
Form

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

All external content and images pending approvals.

LiveCycle Data Services today

Flex Client Flex Client Flex Client

LCDS

Java Classes

Thing1.class
Thing2.class
Thing3.class


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


Publish/Subscribe Messaging

LiveCycle DS / Blaze DS

§Client A

Message
Endpoint
Service

§Client B

§RTMP
§Client C
§AMF Publisher
§HTTP Subscriber


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


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) {
}


Two superheros to save mobile applications developers

ADOBE FLASH PLATFORM JAVA SUPER POWER

Rich interfaces for your Expose your data using HTTP,
web, desktop and mobile apps. SOAP, Remote AMF.
Real-time collaboration. Real-time data push.


Michaël Chaize & resources

RIAgora.com Flex.org
labs.adobe.com
developer.adobe.com

@mchaize Tour de Mobile Flex


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


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


Gray Content Area Layout

For use with full-screen images or diagrams that look good on gray


Mobile APIs


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


Accelerometer APIs

§ Accelerometer.isSupported
§ a.addEventListener(AccelerometerEvent.UPDATE, callbackFunction);
§ AccelerometerEvent:
§ accelerationX
§ accelerationY
§ accelerationZ
§ timestamp


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


Remote Data

§ Android Permission Required:
<uses-permission android:name="android.permission.INTERNET"/>
§ Standard Flex Networking Libraries:
§ HTTPService
§ WebService
§ RemoteObject


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>


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);


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'));


Local DB APIs

§ SQLite - Nothing diﬀerent 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();


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");


Black Content Area Layout

For use with full-screen images or diagrams that look good on black


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


Develop multi-screen applications with Flex

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to Develop multi-screen applications with Flex (20)

More from Codemotion (20)

Recently uploaded (20)

Develop multi-screen applications with Flex