Flex 4.5 and mobile development

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

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

Adobe Flex

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

How Flex Works in the Browser

Browser
Flex SDK
MXML ActionScript Flash Player

Flex Class Library

Debuggers SOAP HTTP/S AMF/S RTMP/S

Flash Builder IDE
Web Server
Compile
XML/HTTP
Adobe Data Services
REST
SOAP Web Services J2EE Application Server

Existing Applications & Infrastructure


Customer care @ Adobe

© 2010 Adobe Systems Incorporated. All Rights Reserved.
4

Adobe Hendrix

15% 1 +10%
solve a case day training customer
satisfaction

5

System-centric applications

All external content and images pending approvals.

System-centric applications


Rich Internet Application

®

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

Flex & Java

&

Richness / Fast / Open-source / Industrialization
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

e explosion of devices introduces new
challenges for application development


Open Screen Project: Adobe et plus de 70 partenaires

Technology Partners Content Partners


Native Mobile Application Development Model

A costly, ineﬃcient development model

Native Native Native Native
App App App App

Additional
OS’s


Introducing a new mobile development paradigm

One Tool, One Language, One Codebase

Flex Application Common codebase

AIR

Additional
OS’s

Any Platform


Platforms, browsers, and devices

In-browser

Outside the browser

Mobile Platforms

Set-top boxes (Future)


Adobe Flex 4.5

4.5


FLEX FRAMEWORK 4

SPARK COMPONENT MODEL

ActionScript MXML

Component Skin

Graphics
Behavior Layout
Animation
Logic Parts
Data CSS properties States

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

Mobile Applications in Flex 4.5

s:Application s:ViewNavigatorApplication s:TabbedViewNavigatorApplication

© 2010 Adobe Systems Incorporated. All Rights Reserved. 17

<s:ViewNavigatorApplication> 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. 19 3

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

150 x 40 pixel bu on

Desktop monitor Galaxy Tab Droid 2 iPhone 4
@100 dpi @160 dpi @240 dpi @320 dpi
= 1.5” x 0.4” = 0.9” x 0.25” = 0.6” x 0.17” = 0.46” x 0.13”

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


Can I use dynamic layout to solve this?

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

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

sizes, e.g. in constraint-
based layouts or padding
values, will be wrong.)
100%


Flex 4.5 et la mise à l’échelle automatique

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

160 dpi 240 dpi 320dpi

Scaled 1.5x Scaled 2x


Scaling diﬀerent types of objects

Lorem

Ipsum

Dolor
Vectors Text Bitmaps
scale up well scales up well do not scale up well
(scaling down can be bad) (Flash scales font size)
Outlines may blur slightly


Flex density concepts: Multi-DPI bitmaps

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

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


ViewMenu

...
<s:viewMenuItems>

<s:ViewMenuItem
label="Add"
click="itemClickInfo(event)"
icon="{addIcon}"

iconPlacement="left"
/>

<s:ViewMenuItem
label="Remove"
icon="{delIcon}"
iconPlacement="left"
/>

<s:ViewMenuItem
label="Find"
icon="{findIcon}"
iconPlacement="left"/>

<s:ViewMenuItem
label="Next"
icon="{nextIcon}"

<s:ViewMenuItem
label="Prev"
icon="{prevIcon}"
</s:viewMenuItems>
...

© 2010 Adobe Systems Incorporated. All Rights Reserved. 25 3

Flex 4.5 and smartphones/tablets

Android tablets BlackBerry PlayBook Apple tablets


Demo


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


Native App Integration

§ Open Email, Browser, Maps, Phone, or SMS
§ navigateToURL(new URLRequest('mailto:foo@bar.com'));
§ 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'));


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("h p://www.riagora.com");


Tablet and Enterprise applications

Camera GPS

3G

Mobility

Bright screen Microphone

© 2011 Adobe Systems Incorporated.

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 existing websites


Michaël Chaize & resources : mchaize@adobe.com

RIAgora.com Flex.org
developer.adobe.com
Tour de Mobile Flex
@mchaize


Flex 4.5 and mobile development

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (19)

Similar a Flex 4.5 and mobile development

Similar a Flex 4.5 and mobile development (20)

Más de Michael Chaize

Más de Michael Chaize (15)

Último

Último (20)

Flex 4.5 and mobile development