Xplatform mobile development

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

Xplatform mobile developmentMichaël Chaize | Developer EvangelistRIAgora.com | @mchaize


Adobe & Xplatform mobile development

2


Adobe & Xplatform mobile development

3

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

PhoneGap Platforms


Adobe Flex

5


"e basics

6

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


Flex is open-source

7


In other words

8

Framework to build professional and

maintainable user experiences

connected to your existing back-end


Hotline at Adobe

9

BEFORE FLEX


Hotline at Adobe

10

AFTER FLEX

15%faster

15%cust. sat.

10>1training.

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

!e explosion of devices introduces new challenges for application development

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

Native Mobile Application Development Model

NativeApp

NativeApp

NativeApp

NativeApp

Additional OS’s

A costly, inefficient development model

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

Introducing a new mobile development paradigm

Additional OS’s

AIR

Flex Application

One Tool, One Language, One Codebase

Any Platform

Common codebase


Industrialize user-experiences

14

One code base, Lots of screens

80%

8%

5%

7%

Sharedcode

© 2010 Adobe Systems Incorporated. All Rights Reserved. 15

views.ListEmployees views.DetailsEmployee views.ListEmployees

DATA DATA

persisted in memory

subset

view destroyed view created

view destroyed view created

“BACK” bu!on

Flex 4.5 - architected for mobile apps


Multiple densities: "e problem

16

150 x 40 pixel bu$on

Desktop monitor@100 dpi

= 1.5” x 0.4”

Galaxy Tab@160 dpi

= 0.9” x 0.25”

Droid 2@240 dpi

= 0.6” x 0.17”

iPhone 4@320 dpi

= 0.46” x 0.13”

Same pixel count, different physical sizes(Minimum recommended size: 0.25” x 0.25”)


Can I use dynamic layout to solve this?

17

(Not easily. You can make stuff "ll the screen using percent sizing, but your fonts and icons will still be tiny. And any "xed pixel sizes, e.g. in constraint-based layouts or padding values, will be wrong.)

(Not easily. You can make stuff "ll the screen using percent sizing, but your fonts and icons will still be tiny. And any "xed pixel sizes, e.g. in constraint-based layouts or padding values, will be wrong.)

320x480 @160dpi 640x960 (at same density) 640x960 @320dpi

100%

100%

100%

100%


Solution: Automatic scaling for different DPIs

18

<Application applicationDPI=“160”> <Button width=“160” height=“40”/></Application>

REMEMBER: To your code, the screen is always 160 dpi, and this bu$on is always160 x 40, regardless of how the application is being scaled.

160 dpi 240 dpi 320dpi

Scaled 1.5x Scaled 2x


Scaling different types of objects

19

Vectorsscale up well

(scaling down can be bad)Outlines may blur slightly

Textscales up well

(Flash scales font size)

Lorem

Ipsum

Dolor

Bitmapsdo not scale up well


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>

20

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)


Mobile APIs available by default

21

- Multitouch- Geolocation- Cameras- Microphone- Accelerometer- Display a web page- SQLite local database- Native extensions- GPU acceleration


Adobe AIR 3 and Flex

22

ANE: No more limitation

ActionScript Native Extension

AS3 bridge

C, JAVA

Flex Mobileproject

ANE SWF

.AIR, .APK, .IPA, .BAR


Deploy your applications in the market places

23

Control the distribution with AIR 3

AIR 3 - Captive runtime

ANDROID QNX IOS


Flash Builder 4.6

24

DEMO


Advanced Enterprise mobile applications

25

Build engaging and innovation

native-like applications

using Flex on mobile and tablet devices

©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential. 26

Design tips - Navigation


Design tips - Visual Feedback

visualfeedback


Design tips - Visual Feedback

Demo

www.lafabrick.com

http://www.lafabrick.com

http://www.lafabrick.com


Flex tips - don’t stress the Display list

Reduce your surface of rendering

Use dynamic layouts


Flex tips - <DEMO> Radio X-Track </DEMO>


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

State groups

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");}

Resize handler

Flex tips - Dynamic layouts demo


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

Layout Properties

Flex tips - Dynamic layouts demo


Flex tips - Back to the <s:Application> tag


Flex tips - Persistence Manager

FlexGlobals.topLevelApplication.persistenceManager.setProperty("lastSearch",arrayCollectResults);//...FlexGlobals.topLevelApplication.persistenceManager.getProperty("lastSearch");

Persist some properties

var file:File = File.documentsDirectory.resolvePath('settings.inf');if (file.exists) file.deleteFile();var fileStream:FileStream = new FileStream(); //create a file streamfileStream.open(file, FileMode.WRITE); // and open the file for writefileStream.writeObject(object); //write the object to the filefileStream.close();

Write !les on tablet devices


Flex tips - Optimized SQLite Insert or Update queries

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();

10xfaster


How to start coding Flex mobile app ?

36

h"p://www.Flex.org

http://www.Flex.org

http://www.Flex.org

©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Michaël Chaize | Developer EvangelistRIAgora.com | @mchaize

Technology

Xplatform mobile development