ria2010 workshop dev mobile
DESCRIPTION
Slides du workshop sur le développement d'applications mobiles lors de RIA2010 par Michael ChaizeTRANSCRIPT
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Nouveautés Flex, Flash Builder et AIRMichaël Chaize | Adobe Platform Evangelist
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Michaël Chaize
2
@mchaize
RIAgora.com
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Les limites de Google translate
3
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Menu du jour
4
Flash Builder “Burrito”
Flex “Hero”
Adobe AIR
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Flash Builder “Burrito”
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Productivity features
Code template for AS3 Generate event handler
Override/Implement methodsRename variable / file
Generate a class / file Metadata code completion
Quick Assists
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Flex “Hero”
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Flex “Hero” > les objectifs
Continuer de faire évoluer les composants Spark
Application performantes sur smartphones
Améliorer le framework pour les applications d’envergure
© 2010 Adobe Systems Incorporated. All Rights Reserved.
<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
© 2010 Adobe Systems Incorporated. All Rights Reserved.
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
© 2010 Adobe Systems Incorporated. All Rights Reserved.
§ 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>
© 2010 Adobe Systems Incorporated. All Rights Reserved.
<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
© 2010 Adobe Systems Incorporated. All Rights Reserved.
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
© 2010 Adobe Systems Incorporated. All Rights Reserved.
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>
© 2010 Adobe Systems Incorporated. All Rights Reserved.
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 ?
© 2010 Adobe Systems Incorporated. All Rights Reserved.
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
© 2010 Adobe Systems Incorporated. All Rights Reserved.
AIR for BlackBerry PlayBook
http://us.blackberry.com/developers/tablet/devresources.jsp
WIN A PLAYBOOK !!!
© 2010 Adobe Systems Incorporated. All Rights Reserved.
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
© 2010 Adobe Systems Incorporated. All Rights Reserved.
ViewNavigator API
§ navigator.pushView();
§ navigator.popView();
§ navigator.popToFirstView()
§ navigator.activeView;
22 2
© 2010 Adobe Systems Incorporated. All Rights Reserved.
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
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Components that have Mobile Skins
§ Button
§ CheckBox
§ DataGroup
§ Group/HGroup/VGroup/TileGroup
§ Image/BitmapImage
§ Label List
§ RadioButton/RadioButtonGroup
§ Scroller
§ TextArea
§ TextInput
24
© 2010 Adobe Systems Incorporated. All Rights Reserved.
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
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Mobile ItemRenderers
§ MobileItemRenderer
§ MobileIconItemRenderer
<s:MobileIconItemRenderer
labelField="lastName"
messageField="title"
iconField="picture"
decoratorClass=”phoneIcon">
26 4
© 2010 Adobe Systems Incorporated. All Rights Reserved.
APIs pour le mobile
27
© 2010 Adobe Systems Incorporated. All Rights Reserved.
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
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Accelerometer APIs
§ Accelerometer.isSupported
§ a.addEventListener(AccelerometerEvent.UPDATE, callbackFunction);
§ AccelerometerEvent:
§ accelerationX
§ accelerationY
§ accelerationZ
§ timestamp
© 2010 Adobe Systems Incorporated. All Rights Reserved.
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
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Remote Data
§ Android Permission Required:
<uses-permission android:name="android.permission.INTERNET"/>
§ Standard Flex Networking Libraries:
§ HTTPService
§ WebService
§ RemoteObject
© 2010 Adobe Systems Incorporated. All Rights Reserved.
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>
© 2010 Adobe Systems Incorporated. All Rights Reserved.
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
© 2010 Adobe Systems Incorporated. All Rights Reserved.
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
© 2010 Adobe Systems Incorporated. All Rights Reserved.
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();
© 2010 Adobe Systems Incorporated. All Rights Reserved.
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
© 2010 Adobe Systems Incorporated. All Rights Reserved.
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
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Debugging
§ adb logcat
§ trace() and errors - only with apk-debug target
38
© 2010 Adobe Systems Incorporated. All Rights Reserved.
Deploying to the Android Market
39
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
LET’S CODE A FLEX MOBILE APP
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
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Si vous souhaitez me contacter
42
@mchaize
RIAgora.com