Ria2010 workshop dev mobile

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

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

Michaël Chaize

@mchaize

RIAgora.com

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

Les limites de Google translate


Menu du jour

Flash Builder “Burrito”

Flex “Hero”

Adobe AIR


Flash Builder “Burrito”

© 2010 Adobe Systems Incorporated. All Rights Reserved.

Productivity features

for AS3 Gener
ate ev
e ent h a
m plat s ndler
d e te e t hod
Co m Renam
e m ent e varia
I mpl ble / fi
le
ide/
O verr Metad
s / file ata cod
e a cl as e com
pletio
en erat n
G

Quick Assists


Flex “Hero”


Flex “Hero” > les objectifs

Application performantes sur smartphones

Continuer de faire évoluer les composants Spark
Améliorer le framework pour les applications d’envergure


<s:DataGrid>

<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

© 2010 Adobe Systems Incorporated. All Rights Reserved. 9

Anatomie de la Datagrid

Caret Indicator Selection Indicator Hover Indicator

Row
Separator

Column Separator Item Renderer


Anatomie de la Datagrid

Sort Indicator

Column Header Group Header Renderer Column Separator


<s:Form>

§ 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


<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 ContentCache
§ maxCacheEntries
§ enableQueuing
§ enableCaching
§ maxActiveRequests


Meilleure gestion des RSLs

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 DayTrader.mxml
startup time)
AccountingModule.mx
§ Allow usage of RSLs when modifying core framework classes (ie: ml
monkey-patching).

framework.swc osmf.swc

spark.swc sparkskins.swc


Advanced Capabilities

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

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>


AIR extends the benefits of Flash Player

‣ Richer and more engaging
user experiences out of
the browser Geo-Location
SQLite
Application Update Framework
‣ Empower Flash developers Application Lifecycle
to deploy applications in .AIR File format for multi-screen applications
Enhanced Application Security model
app catalogs Marketplace Distribution
Mobile Hardware Softkey Support
‣ Leverage desktop AIR app File-System Access (if allowed)
MediaLibrary API
ecosystem Native Extensibility

‣ Shared codebase and
porting with Flash Player
ActionScript3 Support
Memory, battery & CPU optimizations
Audio/Video hardware decoding
Optimized SWF management
Multi-touch and Gestures
Hardware Acceleration
Mobile Text input

AIR for BlackBerry PlayBook

WIN A PLAYBOOK !!!

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


Mobile Applications in "Hero"

s:Application s:MobileApplication s:TabbedMobileApplication


MobileApplication and TabbedMobileApplication

§ View stack metaphor
§ View
§ ViewNavigator / TabbedViewNavigator

§ Built-in mobile navigation experience
§ Action bar
§ Back button
§ Transitions
§ APIs

© 2010 Adobe Systems Incorporated. All Rights Reserved. 21 1

ViewNavigator API

§ navigator.pushView();
§ navigator.popView();
§ navigator.popToFirstView()

§ navigator.activeView;


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>

Components that have Mobile Skins

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


View Lifecycle

View Destroyed
View becomes User navigates
active back to view
Another view
becomes active
View
Created View Recreated

data

§ Alternative option: destructionPolicy=“none”

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

Mobile ItemRenderers

§ MobileItemRenderer
§ MobileIconItemRenderer

<s:MobileIconItemRenderer
labelField="lastName"
messageField="title"
iconField="picture"
decoratorClass=”phoneIcon">


APIs pour le mobile


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.jamesward.com");


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


Debugging

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


Deploying to the Android Market


labs.adobe.com
Download Flash Builder “Burrito” and Flex “Hero”

Get the source code of
Tour de Mobile Flex

Check the Flex “Hero” tutorials on
developer.adobe.com

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

Si vous souhaitez me contacter

@mchaize

RIAgora.com


Ria2010 workshop dev mobile

More Related Content

What's hot

Viewers also liked

Similar to Ria2010 workshop dev mobile

More from Michael Chaize

Recently uploaded

Ria2010 workshop dev mobile