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



Two superheros to save mobile applications developers

3



Adobe Flex

4



Flash Builder IDE

Flex SDK

Flex Class Library

MXML ActionScript

5

Adobe Flex basics



Flash Builder IDE

Flex SDK

Flex Class Library

MXML ActionScript

Compile

Web Server

Browser

Flash Player

5

Adobe Flex basics



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


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 Con!dential.

First-class interfaces


Flex on mobile ?



Technologic partners

Open Screen Project

Content providers


© 2010 Adobe Systems Incorporated. All Rights Reserved.

Native Applications

iOS

NativeApp

NativeApp

NativeApp

NativeApp

NativeApp

NativeApp

?



Adobe runtimes (Flash & AIR)

Abstraction Layer

iOS

Flex Application

?READY READY2011 soon soon



Flex “Hero”



Mobile Applications in "Hero"

14

s:Application




14

s:MobileApplications:Application




14

s:TabbedMobileApplication s:MobileApplications:Application



<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



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



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



Mobile applications + JAVA = REAL-TIME

18


LiveCycle Collaboration Service

IN-CONTEXT COLLABORATION

Webcam Chat

SharedForm



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



LiveCycle Data Services today

21

Flex Client Flex Client Flex Client

LCDS

Java Classes

• Thing1.class• Thing2.class• Thing3.class



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



Publish/Subscribe Messaging

Message

Service

LiveCycle DS / Blaze DS

Endpoint

PublisherSubscriber

§RTMP

§AMF

§HTTP

§Client A

§Client B

§Client C


http://cloud.macromedia.com/strategy/2005/roadmap.html





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



















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




26




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



Michaël Chaize & resources

27

@mchaize

RIAgora.com Flex.org

labs.adobe.com

developer.adobe.com

Tour de Mobile Flex



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



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



Gray Content Area Layout

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

31



Mobile APIs

32



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

§ 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



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



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



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



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


http://www.riagora.com

http://www.riagora.com


Black Content Area Layout

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

42



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


http://www.adobe.com/brandecenter

http://www.adobe.com/brandecenter

Building mobile applications with Flex - jfokus.se · Building mobile applications with Flex...

Documents

Transcript of Building mobile applications with Flex - jfokus.se · Building mobile applications with Flex...