ria2010 workshop dev mobile

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

Nouveautés Flex, Flash Builder et AIRMichaël Chaize | Adobe Platform Evangelist


Michaël Chaize

2

@mchaize

RIAgora.com


Les limites de Google translate

3


Menu du jour

4

Flash Builder “Burrito”

Flex “Hero”

Adobe AIR

© 2010 Adobe Systems Incorporated. All Rights Reserved.

Flash Builder “Burrito”


Productivity features

Code template for AS3 Generate event handler

Override/Implement methodsRename variable / file

Generate a class / file Metadata code completion

Quick Assists


Flex “Hero”


Flex “Hero” > les objectifs

Continuer de faire évoluer les composants Spark

Application performantes sur smartphones

Améliorer le framework pour les applications d’envergure


<s:DataGrid>

9

<s:DataGrid>

§ Basic skinning contract

§ Selection, hover, row/column separator, caret and row background graphics are skinnable

§ Support for native and custom item renderers

§ Single, multiple, cell & row-based selection

§ Supports dynamic data provider

§ Horizontal and vertical scrolling, integration with layout

§ User interaction via the mouse and keyboard


Anatomie de la Datagrid

10

Caret Indicator Selection Indicator Hover Indicator

Item RendererColumn Separator

Row Separator

© 2010 Adobe Systems Incorporated. All Rights Reserved. 11

Column Header Group Header Renderer Column Separator

Sort Indicator

Anatomie de la Datagrid


§ Spark Form

§ Advanced custom layout to support dynamic form columns that can appear “on the fly” (help content, required content indicators)

§ Horizontal and stacked layout support

§ Sequenced form items

§ Baseline alignment for form item content

§ Declarative skinning for normal, error, disabled and required states

12

<s:Form>


<s:Image>

§ Spark Image

§ Skinning contract allows for custom image presentation

§ Provide an extensible caching and queueing mechanism for loading content

§ Enhancements to the BitmapImage primitive

§ Load remote or untrusted sources

§ Support high-quality scaling

13

ContentCache

§ maxCacheEntries

§ enableQueuing

§ enableCaching

§ maxActiveRequests


Meilleure gestion des RSLs

14

Hero RSL Enhancements

§ Compiler will smartly remove unnecessary RSLs

(-remove-unused-rsls=true)

§ Compiler will recognize when RSLs have been loaded by the parent application reloading by child apps

§ Framework refactoring into more RSLs (improves SWF size and startup time)

§ Allow usage of RSLs when modifying core framework classes (ie: monkey-patching).

DayTrader.mxml

osmf.swc

spark.swc sparkskins.swc

framework.swc

AccountingModule.mxml


Advanced Capabilities

15

Spark Module & ModuleLoader

Module extends SkinnableContainer

<s:Module>

<mx:TabNavigator width="500" height="300">

<s:ModuleLoader label="Tab One" url="SparkModule1.swf"/>

<s:ModuleLoader label="Tab Two" url="SparkModule2.swf"/>

</mx:TabNavigator>


Advanced Capabilities

16

Size Report

<?xml version="1.0" encoding="UTF-8"?>

<report>

<swf size="74624" compressedSize="38485">

<headerData totalSize="533">

<data type="metaData" size="465"/>

<data type="productInfo" size="28"/>

</headerData>

<frames totalSize="74091">

<frame name="_RTest_mx_managers_SystemManager" size="56409" frame="1"/>

<frame name="RTest" size="17682" frame="2"/>

</frames>

Flex on mobile ?


AIR extends the benefits of Flash Player

Geo-LocationSQLite

Application Update FrameworkApplication Lifecycle

.AIR File format for multi-screen applicationsEnhanced Application Security model

Marketplace DistributionMobile Hardware Softkey Support

File-System Access (if allowed)MediaLibrary API

Native Extensibility

‣Richer and more engaging user experiences out of the browser

‣Empower Flash developers to deploy applications in app catalogs

‣Leverage desktop AIR app ecosystem

‣Shared codebase and porting with Flash Player

ActionScript3 SupportMemory, battery & CPU optimizations

Audio/Video hardware decodingOptimized SWF management

Multi-touch and GesturesHardware Acceleration

Mobile Text input


AIR for BlackBerry PlayBook

http://us.blackberry.com/developers/tablet/devresources.jsp

WIN A PLAYBOOK !!!


Mobile Applications in "Hero"

20

s:TabbedMobileApplication s:MobileApplications:Application

© 2010 Adobe Systems Incorporated. All Rights Reserved. 1

MobileApplication and TabbedMobileApplication

§ View stack metaphor

§ View

§ ViewNavigator / TabbedViewNavigator

§ Built-in mobile navigation experience

§ Action bar

§ Back button

§ Transitions

§ APIs

21


ViewNavigator API

§ navigator.pushView();

§ navigator.popView();

§ navigator.popToFirstView()

§ navigator.activeView;

22 2


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>

23 3

navigationContent titleContent actionContent


Components that have Mobile Skins

§ Button

§ CheckBox

§ DataGroup

§ Group/HGroup/VGroup/TileGroup

§ Image/BitmapImage

§ Label List

§ RadioButton/RadioButtonGroup

§ Scroller

§ TextArea

§ TextInput

24


View Lifecycle

§ Alternative option: destructionPolicy=“none”

25

View becomes active

ViewCreated

Another view becomes active

View DestroyedUser navigates back to view

View Recreated

data

3B


Mobile ItemRenderers

§ MobileItemRenderer

§ MobileIconItemRenderer

<s:MobileIconItemRenderer

labelField="lastName"

messageField="title"

iconField="picture"

decoratorClass=”phoneIcon">

26 4


APIs pour le mobile

27


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

33


Native App Integration

§ Open Email, Browser, Maps, Phone, or SMS

§ navigateToURL(new URLRequest('mailto:[email protected]'));

§ navigateToURL(new URLRequest('http://www.jamesward.com'));

§ navigateToURL(new URLRequest('http://maps.google.com/'));

§ navigateToURL(new URLRequest('tel:1234567890'));

§ navigateToURL(new URLRequest('sms:1234567890'));

34


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("http://www.jamesward.com");

36


Deployment

§ ADT is the AIR packager (apk target only available in AIR 2.5):

adt -package -target apk -storetype pkcs12 -keystore a.p12 a.apk a-app.xml a.swf

§ ADB is the Android SDK deployer

adb install -r a.apk

37


Debugging

§ adb logcat

§ trace() and errors - only with apk-debug target

38


Deploying to the Android Market

39

labs.adobe.comDownload Flash Builder “Burrito” and Flex “Hero”

Get the source code ofTour de Mobile Flex

Check the Flex “Hero” tutorials ondeveloper.adobe.com

Free Flex 4 trainings in Belgium and seminarshttp://bit.ly/ria_update


Si vous souhaitez me contacter

42

@mchaize

RIAgora.com

ria2010 workshop dev mobile

Technology