The document discusses xplatform mobile development using Adobe Flex and Flash Builder. It describes how Flex allows developing applications that can run on multiple mobile platforms like Android, iOS, and BlackBerry from a single codebase. It addresses challenges like supporting different screen densities and provides solutions like automatic scaling and multi-DPI bitmaps. It also lists mobile device APIs that are available for built-in features like multitouch, geolocation, cameras, and more.

1. Xplatform mobile development
Michaël Chaize | Developer Evangelist
RIAgora.com | @mchaize
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

2. Adobe & Xplatform mobile development
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 2

3. Adobe & Xplatform mobile development
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 3

4. PhoneGap Platforms
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

5. Adobe Flex
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 5

6. e basics
Flex is a free and open-source SDK to build RIA
Set of components, Data binding, RIA/UI framework, MVC, Continuous integration
Easy to learn, Fun, Mature, Professional tooling (Eclipse), DEBUG
Designed for JAVA, PHP and .NET developers
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 6

7. Flex is open-source
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 7

8. In other words
Framework to build professional and
maintainable user experiences
connected to your existing back-end
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 8

9. Hotline at Adobe
FL EX
FO RE
BE
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 9

10. Hotline at Adobe
FL EX
ER
AFT
15% 15% 10>1
faster cust. sat. training.
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 10

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

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. Industrialize user-experiences
One code base, Lots of screens
7%
80%
5%
Shared
code
8%
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 14

15. Flex 4.5 - architected for mobile apps
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. 15

16. Multiple densities: e problem
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”
Same pixel count, different physical sizes
(Minimum recommended size: 0.25” x 0.25”)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 16

17. 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 using
stuff ll the screen using percent sizing, but your fonts and icons will still be
percent sizing, but your fonts tiny. And any xed pixel sizes, e.g. in constraint-
and icons will still be tiny. And based layouts or padding values, will be wrong.)
any xed pixel sizes, e.g. in
100%
constraint-based layouts or
padding values, will be
wrong.)
100%
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17

18. Solution: Automatic scaling for different DPIs
<Application applicationDPI=“160”>
<Button width=“160” height=“40”/>
</Application>
160 dpi 240 dpi 320dpi
Scaled 1.5x Scaled 2x
REMEMBER: To your code, the screen is always 160 dpi, and this bu on is always
160 x 40, regardless of how the application is being scaled.
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18

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

20. Flex density concepts: Multi-DPI bitmaps
<Button click="dealSummaryList.refresh()">
<icon>
<MultiDPIBitmapSource
source160dpi="@Embed('assets/refresh160.png')"
source240dpi="@Embed('assets/refresh240.png')"
source320dpi="@Embed('assets/refresh320.png')"/>
</icon>
</Button>
Design icon for 160 dpi
Make a 1.5x bigger version for 240 dpi
Make a 2x bigger version for 320 dpi
(e.g. 32x32, 48x48, 64x64)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 20

21. Mobile APIs available by default
- Multitouch
- Geolocation
- Cameras
- Microphone
- Accelerometer
- Display a web page
- SQLite local database
- Native extensions
- GPU acceleration
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21

22. Adobe AIR 3 and Flex
ANE: No more limitation
ActionScript Native Extension
AS3 bridge
Flex Mobile
project
C, JAVA
ANE SWF
.AIR, .APK, .IPA, .BAR
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 22

23. Deploy your applications in the market places
Control the distribution with AIR 3
AIR 3 - Captive runtime
ANDROID QNX IOS
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 23

24. Flash Builder 4.6
DEMO
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24

25. Advanced Enterprise mobile applications
Build engaging and innovation
native-like applications
using Flex on mobile and tablet devices
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 25

26. Design tips - Navigation
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 26

27. Design tips - Visual Feedback
visual
feedback
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 27

28. Design tips - Visual Feedback
Demo
www.lafabrick.com
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 28

29. Flex tips - don’t stress the Display list
Reduce your surface of rendering
Use dynamic layouts
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 29

30. Flex tips - <DEMO> Radio X-Track </DEMO>
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 30

31. Flex tips - Dynamic layouts demo
State groups
<s:states>
<s:State name="portraitPhone" stateGroups="phone,portrait"/>
<s:State name="landscapePhone" stateGroups="landscape,phone"/>
<s:State name="portraitTablet" stateGroups="portrait,tablet"/>
<s:State name="landscapeTablet" stateGroups="landscape,tablet"/>
</s:states>
Resize handler
protected function application1_resizeHandler(event:ResizeEvent):void{
// TODO Auto-generated method stub
var isPortrait:Boolean = height > width;
isTablet = height > 960 || width > 960;
currentState = (isPortrait ? "portrait" : "landscape") + (isTablet ? "Tablet" :
"Phone");
}
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 31

32. Flex tips - Dynamic layouts demo
Layout Properties
<s:ViewNavigator
includeIn="tablet"
id="tabletPlayView"
width.landscapeTablet="{this.width - phoneViewNavigator.width}"
height.landscapeTablet="{this.height}"
x.landscapeTablet="270"
y.landscapeTablet="0"
height="100%"
width.portraitTablet="100%"
x.portraitTablet="0"
y.portraitTablet="0"
height.portraitTablet="{this.height - phoneViewNavigator.height}"
/>
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 32

33. Flex tips - Back to the <s:Application> tag
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 33

34. Flex tips - Persistence Manager
Persist some properties
FlexGlobals.topLevelApplication.persistenceManager
.setProperty("lastSearch",arrayCollectResults);
//...
FlexGlobals.topLevelApplication.persistenceManager
.getProperty("lastSearch");
Write les on tablet devices
var file:File = File.documentsDirectory.resolvePath('settings.inf');
if (file.exists) file.deleteFile();
var fileStream:FileStream = new FileStream(); //create a file stream
fileStream.open(file, FileMode.WRITE); // and open the file for write
fileStream.writeObject(object); //write the object to the file
fileStream.close();
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 34

35. Flex tips - Optimized SQLite Insert or Update queries
10x
faster
SQLite on tablet devices
_sqlStatement.sqlConnection = sqlc;
_sqlStatement.text = "INSERT INTO "+tableName+"Followers(idFollower,name)
VALUES (@ID,@SNAME)";
sqlc.begin();
for (var i:int = 0; i < arrayIdFollowers.length; i++)
{
var idFollower:int = int(arrayIdFollowers.getItemAt(i));
//query("INSERT INTO "+ tableName+"Followers(idFollower) VALUES
('"+idFollower+"')");
_sqlStatement.parameters['@ID'] = idFollower.toString();
_sqlStatement.parameters['@SNAME'] = screenName;
_sqlStatement.execute();
}
sqlc.commit();
closeDb();
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 35

36. How to start coding Flex mobile app ?
h p://www.Flex.org
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 36

37. Michaël Chaize | Developer Evangelist
RIAgora.com | @mchaize
©2011
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.