This document discusses Flex 4.5 and mobile applications. It introduces new features in Flex 4.5 like automatic scaling, multi-DPI bitmaps, and view menus that improve the development of mobile applications. It also covers mobile APIs in Flex 4.5 for geolocation, accelerometer, multi-touch, remote data, full screen mode, the camera, and local databases. The document demonstrates these features and APIs. It concludes by mentioning resources for learning more about developing mobile applications with Flex.

1. Flex 4.5 et les applications mobiles
Michaël Chaize | Flash Platform Evangelist | www.RIAgora.com | @mchaize
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

2. Adobe Flex
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 2

3. How Flex Works in the Browser
Browser
Flex SDK
MXML ActionScript Flash Player
Flex Class Library
Debuggers SOAP HTTP/S AMF/S RTMP/S
Flash Builder IDE
Web Server
Compile
XML/HTTP
Adobe Data Services
REST
SOAP Web Services J2EE Application Server
Existing Applications & Infrastructure
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

4. Customer care @ Adobe
© 2010 Adobe Systems Incorporated. All Rights Reserved.
4

5. Adobe Hendrix
15% 1 +10%
solve a case day training customer
satisfaction
© 2010 Adobe Systems Incorporated. All Rights Reserved.
5

6. System-centric applications
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 6
All external content and images pending approvals.

7. System-centric applications
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 7
All external content and images pending approvals.

8. Rich Internet Application
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 8

9. Flex & Java
&
Richness / Fast / Open-source / Industrialization
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

10. e explosion of devices introduces new
challenges for application development
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

11. Open Screen Project: Adobe et plus de 70 partenaires
Technology Partners Content Partners
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 11

12. Native Mobile Application Development Model
A costly, inefficient development model
Native Native Native Native
App App App App
Additional
OS’s
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

13. Introducing a new mobile development paradigm
One Tool, One Language, One Codebase
Flex Application Common codebase
AIR
Additional
OS’s
Any Platform
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

14. Platforms, browsers, and devices
In-browser
Outside the browser
Mobile Platforms
Set-top boxes (Future)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

15. Adobe Flex 4.5
4.5
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 15

16. FLEX FRAMEWORK 4
SPARK COMPONENT MODEL
ActionScript MXML
Component Skin
Graphics
Behavior Layout
Animation
Logic Parts
Data CSS properties States
http://www.lafabrick.com/labz/skins/jellySkin/

17. Mobile Applications in Flex 4.5
s:Application s:ViewNavigatorApplication s:TabbedViewNavigatorApplication
© 2010 Adobe Systems Incorporated. All Rights Reserved. 17

18. <s:ViewNavigatorApplication> life cycle
views.ListEmployees views.DetailsEmployee views.ListEmployees
view destroyed view created
view destroyed view created
“BACK” bu on
DATA subset DATA
persisted in memory
© 2010 Adobe Systems Incorporated. All Rights Reserved. 18

19. 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. 19 3

20. Un problème technique: la densité des écrans
150 x 40 pixel bu on
Desktop monitor Galaxy Tab Droid 2 iPhone 4
@100 dpi @160 dpi @240 dpi @320 dpi
= 1.5” x 0.4” = 0.9” x 0.25” = 0.6” x 0.17” = 0.46” x 0.13”
Un même nombre de pixels pour différentes tailles physiques
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 20

21. Can I use dynamic layout to solve this?
320x480 @160dpi 640x960 (at same density) 640x960 @320dpi
100% 100%
(Not easily. You can make (Not easily. You can make stuff ll the screen
stuff ll the screen using using percent sizing, but your fonts and icons
percent sizing, but your will still be tiny. And any xed pixel sizes, e.g. in
fonts and icons will still be constraint-based layouts or padding values, will
tiny. And any xed pixel be wrong.)
100%
sizes, e.g. in constraint-
based layouts or padding
values, will be wrong.)
100%
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21

22. Flex 4.5 et la mise à l’échelle automatique
<Application applicationDPI=“160”>
<Button width=“160” height=“40”/>
</Application>
160 dpi 240 dpi 320dpi
Scaled 1.5x Scaled 2x
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 22

23. Scaling different types of objects
Lorem
Ipsum
Dolor
Vectors Text Bitmaps
scale up well scales up well do not scale up well
(scaling down can be bad) (Flash scales font size)
Outlines may blur slightly
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 23

24. Flex density concepts: Multi-DPI bitmaps
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication
applicationDPI="160">
...
</s:ViewNavigatorApplication>
<Button click="dealSummaryList.refresh()">
<icon>
<MultiDPIBitmapSource
source160dpi="@Embed('assets/refresh160.png')"
source240dpi="@Embed('assets/refresh240.png')"
source320dpi="@Embed('assets/refresh320.png')"/>
</icon>
</Button>
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24

25. ViewMenu
...
<s:viewMenuItems>
<s:ViewMenuItem
label="Add"
click="itemClickInfo(event)"
icon="{addIcon}"
iconPlacement="left"
/>
<s:ViewMenuItem
label="Remove"
click="itemClickInfo(event)"
icon="{delIcon}"
iconPlacement="left"
/>
<s:ViewMenuItem
label="Find"
click="itemClickInfo(event)"
icon="{findIcon}"
iconPlacement="left"/>
<s:ViewMenuItem
label="Next"
click="itemClickInfo(event)"
icon="{nextIcon}"
iconPlacement="left"/>
<s:ViewMenuItem
label="Prev"
click="itemClickInfo(event)"
icon="{prevIcon}"
iconPlacement="left"/>
</s:viewMenuItems>
...
© 2010 Adobe Systems Incorporated. All Rights Reserved. 25 3

26. Flex 4.5 and smartphones/tablets
Android tablets BlackBerry PlayBook Apple tablets
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 26

27. Demo
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 27

28. Mobile APIs
© 2010 Adobe Systems Incorporated. All Rights Reserved. 28

29. 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.

30. Accelerometer APIs
§ Accelerometer.isSupported
§ a.addEventListener(AccelerometerEvent.UPDATE, callbackFunction);
§ AccelerometerEvent:
§ accelerationX
§ accelerationY
§ accelerationZ
§ timestamp
© 2010 Adobe Systems Incorporated. All Rights Reserved.

31. 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.

32. 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.

33. 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.

34. 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. ash" 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. 34

35. Native App Integration
§ Open Email, Browser, Maps, Phone, or SMS
§ navigateToURL(new URLRequest('mailto:foo@bar.com'));
§ navigateToURL(new URLRequest('h p://www.jamesward.com'));
§ navigateToURL(new URLRequest('h p://maps.google.com/'));
§ navigateToURL(new URLRequest('tel:1234567890'));
§ navigateToURL(new URLRequest('sms:1234567890'));
© 2010 Adobe Systems Incorporated. All Rights Reserved. 35

36. 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.

37. 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("h p://www.riagora.com");
© 2010 Adobe Systems Incorporated. All Rights Reserved. 37

38. Tablet and Enterprise applications
Camera GPS
3G
Mobility
Bright screen Microphone
© 2011 Adobe Systems Incorporated.

39. IN-CONTEXT COLLABORATION
LiveCycle Collaboration Service
Webcam Chat
Shared
Form

40. LiveCycle Collaboration Service
Multi-user collaboration in real time
§ Engage more effectively through a web presence enhanced
with real-time collaboration tools.
§ Integrate text chat, whiteboard functionality, webcam video,
and audio into any rich Internet application (RIA),
Major Capabilities
Peer-to-peer (P2P) streaming of data, audio and video HTTP server-to-server APIs
Private audio/video streaming Server-side provisioning of services
Large Rooms – via on-demand loading of user Audio/video application multicast
presence
Record and Playback Screen sharing
JavaScript APIs – integration with a customer’s existing websites
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 40
All external content and images pending approvals.

41. Michaël Chaize & resources : mchaize@adobe.com
RIAgora.com Flex.org
developer.adobe.com
Tour de Mobile Flex
@mchaize
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 41

42. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.