Devoxx 2010: Develop mobile applications with Flex

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

Develop mobile applications with AIR 2.5James Ward & Michaël Chaize | Platform Evangelists


James Ward & Michaël Chaize

2

@mchaize

RIAgora.comjamesward.com

@riacowboy

Flex on mobile ?

© 2010 Adobe Systems Incorporated. All Rights Reserved.

Native Applications

iOS

NativeApp

NativeApp

NativeApp

NativeApp

NativeApp

NativeApp


AIR Flash Player

Abstraction Layer

iOS

Flex Application

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

Technologic partners

Open Screen Project

Content providers


Flash Player 10.1

Flash Player 10.1

Google TV


Adobe AIR 2.5 = native applications = multiple screens


AIR extends the bene�ts of Flash Player

Geo-LocationSQLite

Application Update FrameworkApplication Lifecycle

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

Marketplace DistributionMobile Hardware So�key 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, ba�ery & CPU optimizations

Audio/Video hardware decodingOptimized SWF management

Multi-touch and GesturesHardware Acceleration

Mobile Text input


Deploying AIR Android Applications

Chroma Circuit.apkChroma Circuit.air

! AIR Applications are packaged up as .APK �les! Will be distributed through Android Market and other catalogs! AIR Application upgrade mechanism through Android Market

! AIR Runtime will be distributed in Android Market as Shared Library! Users will have to download the Runtime once for all AIR applications! Upgrade through the Android Market

Android Market Android Device


AIR for iOS

! Export SWF to IPK

! Cross-Compiles AIR Runtime and App to native Objective-C Bytecode

! Uses LLVM

! Many AIR APIs are implemented

! Some APIs not possible (Loader.loadBytes)


AIR for BlackBerry PlayBook

h�p://us.blackberry.com/developers/tablet/devresources.jsp

WIN A PLAYBOOK !!!


TOUR DE MOBILE FLEX


Mobile Applications in "Hero"

14

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 bu�on

! Transitions

! APIs

15


ViewNavigator API

! navigator.pushView();

! navigator.popView();

! navigator.popToFirstView()

! navigator.activeView;

16 2


ActionBar

<s:View xmlns:fx=h�p://ns.adobe.com/mxml/2009 … title=”Expenses"> <s:navigationContent> <s:Bu�on icon="@Embed('assets/home.png')"/> </s:navigationContent> <s:actionContent> <s:Bu�on label=”+"/> </s:actionContent> </s:View>

17 3

navigationContent titleContent actionContent


Components that have Mobile Skins

! Bu�on

! CheckBox

! DataGroup

! Group/HGroup/VGroup/TileGroup

! Image/BitmapImage

! Label List

! RadioBu�on/RadioBu�onGroup

! Scroller

! TextArea

! TextInput

18


View Lifecycle

! Alternative option: destructionPolicy=“none”

19

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">

20 4


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


Feel free to contact us

23

@mchaize

RIAgora.comjamesward.com

@riacowboy

Technology

Devoxx 2010: Develop mobile applications with Flex