Contenu connexe Similaire à Ria2010 workshop dev mobile (20) Plus de Michael Chaize (12) Ria2010 workshop dev mobile1. Nouveautés Flex, Flash Builder et AIR
Michaël Chaize | Adobe Platform Evangelist
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
2. Michaël Chaize
@mchaize
RIAgora.com
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2
3. Les limites de Google translate
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
4. Menu du jour
Flash Builder “Burrito”
Flex “Hero”
Adobe AIR
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
6. 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
© 2010 Adobe Systems Incorporated. All Rights Reserved.
8. Flex “Hero” > les objectifs
Application performantes sur smartphones
Continuer de faire évoluer les composants Spark
Améliorer le framework pour les applications d’envergure
© 2010 Adobe Systems Incorporated. All Rights Reserved.
9. <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
10. Anatomie de la Datagrid
Caret Indicator Selection Indicator Hover Indicator
Row
Separator
Column Separator Item Renderer
© 2010 Adobe Systems Incorporated. All Rights Reserved. 10
11. Anatomie de la Datagrid
Sort Indicator
Column Header Group Header Renderer Column Separator
© 2010 Adobe Systems Incorporated. All Rights Reserved. 11
12. <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
© 2010 Adobe Systems Incorporated. All Rights Reserved. 12
13. <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
© 2010 Adobe Systems Incorporated. All Rights Reserved. 13
14. 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
© 2010 Adobe Systems Incorporated. All Rights Reserved. 14
15. 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>
© 2010 Adobe Systems Incorporated. All Rights Reserved. 15
16. 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>
© 2010 Adobe Systems Incorporated. All Rights Reserved. 16
18. 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
© 2010 Adobe Systems Incorporated. All Rights Reserved.
19. AIR for BlackBerry PlayBook
WIN A PLAYBOOK !!!
http://us.blackberry.com/developers/tablet/devresources.jsp
© 2010 Adobe Systems Incorporated. All Rights Reserved.
20. Mobile Applications in "Hero"
s:Application s:MobileApplication s:TabbedMobileApplication
© 2010 Adobe Systems Incorporated. All Rights Reserved. 20
21. 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
22. ViewNavigator API
§ navigator.pushView();
§ navigator.popView();
§ navigator.popToFirstView()
§ navigator.activeView;
© 2010 Adobe Systems Incorporated. All Rights Reserved. 22 2
23. 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. 23 3
24. Components that have Mobile Skins
§ Button
§ CheckBox
§ DataGroup
§ Group/HGroup/VGroup/TileGroup
§ Image/BitmapImage
§ Label List
§ RadioButton/RadioButtonGroup
§ Scroller
§ TextArea
§ TextInput
© 2010 Adobe Systems Incorporated. All Rights Reserved. 24
25. 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
26. Mobile ItemRenderers
§ MobileItemRenderer
§ MobileIconItemRenderer
<s:MobileIconItemRenderer
labelField="lastName"
messageField="title"
iconField="picture"
decoratorClass=”phoneIcon">
© 2010 Adobe Systems Incorporated. All Rights Reserved. 26 4
27. APIs pour le mobile
© 2010 Adobe Systems Incorporated. All Rights Reserved. 27
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
© 2010 Adobe Systems Incorporated. All Rights Reserved.
29. Accelerometer APIs
§ Accelerometer.isSupported
§ a.addEventListener(AccelerometerEvent.UPDATE, callbackFunction);
§ AccelerometerEvent:
§ accelerationX
§ accelerationY
§ accelerationZ
§ timestamp
© 2010 Adobe Systems Incorporated. All Rights Reserved.
30. 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
© 2010 Adobe Systems Incorporated. All Rights Reserved.
31. 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.
32. 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.
33. 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);
© 2010 Adobe Systems Incorporated. All Rights Reserved. 33
34. 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'));
© 2010 Adobe Systems Incorporated. All Rights Reserved. 34
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();
© 2010 Adobe Systems Incorporated. All Rights Reserved.
36. 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");
© 2010 Adobe Systems Incorporated. All Rights Reserved. 36
37. 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
© 2010 Adobe Systems Incorporated. All Rights Reserved. 37
38. Debugging
§ adb logcat
§ trace() and errors - only with apk-debug target
© 2010 Adobe Systems Incorporated. All Rights Reserved. 38
39. Deploying to the Android Market
© 2010 Adobe Systems Incorporated. All Rights Reserved. 39
40. LET’S CODE A FLEX MOBILE APP
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
41. 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
42. Si vous souhaitez me contacter
@mchaize
RIAgora.com
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 42