flex 4.5 and mobile development

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Michaël Chaize | Flash Platform Evangelist | www.RIAgora.com | @mchaizeFlex 4.5 et les applications mobiles

http://www.RIAgora.com

http://www.RIAgora.com


Adobe Flex

2

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Flex SDK

Flex Class Library

MXML ActionScript

Debuggers

How Flex Works in the Browser

Compile

SOAP HTTP/S AMF/S RTMP/S

Web Server

Existing Applications & Infrastructure

J2EE Application Server

Adobe Data ServicesXML/HTTPREST

SOAP Web Services

Browser

Flash Player

Flash Builder IDE

© 2010 Adobe Systems Incorporated. All Rights Reserved. 4

Customer care @ Adobe

© 2010 Adobe Systems Incorporated. All Rights Reserved. 5

Adobe Hendrix

15%solve a case

+10%customer

satisfaction

1day training


All external content and images pending approvals.

6

System-centric applications



7

System-centric applications

®

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe con!dential. 8

Rich Internet Application

©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Flex & Java

&

Richness / Fast / Open-source / Industrialization


"e explosion of devices introduces new challenges for application development

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential. 11

Technology Partners

Open Screen Project: Adobe et plus de 70 partenaires

Content Partners

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Native Mobile Application Development Model

NativeApp

NativeApp

NativeApp

NativeApp

Additional OS’s

A costly, inefficient development model


Introducing a new mobile development paradigm

Additional OS’s

AIR

Flex Application

One Tool, One Language, One Codebase

Any Platform

Common codebase


Platforms, browsers, and devices

In-browser

Outside the browser

Set-top boxes (Future)

Mobile Platforms


Adobe Flex 4.5

15

4.5

SPARK COMPONENT MODEL

FLEX FRAMEWORK 4

ActionScript MXML

GraphicsLayout

AnimationParts

States

Component Skin

CSS properties

BehaviorLogicData

http://www.lafabrick.com/labz/skins/jellySkin/



© 2010 Adobe Systems Incorporated. All Rights Reserved.

Mobile Applications in Flex 4.5

17

s:TabbedViewNavigatorApplications:ViewNavigatorApplications:Application


<s:ViewNavigatorApplication> life cycle

18

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>

19 3

navigationContent titleContent actionContent


Un problème technique: la densité des écrans

20

150 x 40 pixel bu$on

Desktop monitor@100 dpi

= 1.5” x 0.4”

Galaxy Tab@160 dpi

= 0.9” x 0.25”

Droid 2@240 dpi

= 0.6” x 0.17”

iPhone 4@320 dpi

= 0.46” x 0.13”

Un même nombre de pixels pour différentes tailles physiques


Can I use dynamic layout to solve this?

21

(Not easily. You can make stuff "ll the screen using percent sizing, but your fonts and icons will still be tiny. And any "xed pixel sizes, e.g. in constraint-based layouts or padding values, will be wrong.)

(Not easily. You can make stuff "ll the screen using percent sizing, but your fonts and icons will still be tiny. And any "xed pixel sizes, e.g. in constraint-based layouts or padding values, will be wrong.)

320x480 @160dpi 640x960 (at same density) 640x960 @320dpi

100%

100%

100%

100%


Flex 4.5 et la mise à l’échelle automatique

22

<Application applicationDPI=“160”> <Button width=“160” height=“40”/></Application>

160 dpi 240 dpi 320dpi

Scaled 1.5x Scaled 2x


Scaling different types of objects

23

Vectorsscale up well

(scaling down can be bad)Outlines may blur slightly

Textscales up well

(Flash scales font size)

Lorem

Ipsum

Dolor

Bitmapsdo not scale up well


Flex density concepts: Multi-DPI bitmaps

<Button click="dealSummaryList.refresh()"> <icon> <MultiDPIBitmapSource source160dpi="@Embed('assets/refresh160.png')" source240dpi="@Embed('assets/refresh240.png')" source320dpi="@Embed('assets/refresh320.png')"/> </icon></Button>

24

<?xml version="1.0" encoding="utf-8"?><s:ViewNavigatorApplication applicationDPI="160"> ...</s:ViewNavigatorApplication>


ViewMenu

25 3

...<s:viewMenuItems> <s:ViewMenuItem label="Add" click="itemClickInfo(event)" icon="{addIcon}" iconPlacement="left" /> <s:ViewMenuItem label="Remove" click="itemClickInfo(event)" icon="{delIcon}" iconPlacement="left" /> <s:ViewMenuItem label="Find" click="itemClickInfo(event)" icon="{findIcon}" iconPlacement="left"/> <s:ViewMenuItem label="Next" click="itemClickInfo(event)" icon="{nextIcon}" iconPlacement="left"/> <s:ViewMenuItem label="Prev" click="itemClickInfo(event)" icon="{prevIcon}" iconPlacement="left"/></s:viewMenuItems>...


Flex 4.5 and smartphones/tablets

26

BlackBerry PlayBookAndroid tablets Apple tablets


Demo

27


Mobile APIs

28


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

34


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

35


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

37

http://www.riagora.com

http://www.riagora.com

© 2011 Adobe Systems Incorporated.

Tablet and Enterprise applications

Camera

Microphone

GPS

3G

Mobility

Bright screen

LiveCycle Collaboration Service

IN-CONTEXT COLLABORATION

Webcam Chat

SharedForm



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

40

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


Michaël Chaize & resources : [email protected]

41

@mchaize

RIAgora.com Flex.orgdeveloper.adobe.com

Tour de Mobile Flex

mailto:[email protected]

mailto:[email protected]

flex 4.5 and mobile development

Technology

adobe flex

adobe et

adobe hendrix15

flex framework

flex works

flex density concepts

flex java richness

mobile applications