oop2012 mobile workshops

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

One codebase, multiple screensMichaël Chaize | Developer EvangelistRIAgora.com | @mchaize


Agenda

2

FLEX DESKTO

P

FLEX MO

BILE

LIVE CO

DE

D.D

.D


Adobe & Xplatform mobile development

3



4



5

h!ps://github.com/cordova

https://github.com/cordova

https://github.com/cordova

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

PhoneGap Platforms

Native App - .apk, .ipa, etc

Native APIs

Native Web View

Your Code


You can use ANY framework you want, but try to design for an app.

PhoneGap is not a framework

8


Out of the box, PhoneGap provides support for a number of basic device APIs

- Accelerometer- Camera- Capture- Compass- Connection- Contacts- Device- Events- File- Geolocation- Media- Network- Notification- Storage

Mobile APIs

9


Camera

10


For added functionality PhoneGap provides a plug-in mechanism.Includes OS-speci!c code/libraries and the JS to use it in PhoneGapSome of the helpful ones: PayPal, Facebook, Push Noti!cation

Extend PhoneGap

11

Available at

https://github.com/phonegap/phonegap-plugins




This app can just use the plugins.barcodeScanner.scan method to call out to some native code that reads and parses a barcode.

Barcode Scanner

12


PhoneGap - demo

13


Adobe Flex

14


"e basics

15

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

16


In other words

17

Framework to build professional and

maintainable user experiences

connected to your existing back-end


Why Flex ?

18

Focus on the user-experience ?


Hotline at Adobe

19

BEFORE FLEX


Hotline at Adobe

20

AFTER FLEX

15%faster

15%cust. sat.

10>1training.


NATO

21

BEFORE FLEX


NATO

22

AFTER FLEX


Car industry

23

BEFORE FLEX

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

Car industry

AFTER FLEX


Flex for desktop users is a success

&

Richness / Fast / Open-source / Industrialization

© 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

29

One code base, Lots of screens

80%

8%

5%

7%

Sharedcode

© 2010 Adobe Systems Incorporated. All Rights Reserved. 30

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

31

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?

32

(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

33

<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

34

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>

35

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

36

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


Adobe AIR 3 and Flex

37

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

38

Control the distribution with AIR 3

AIR 3 - Captive runtime

ANDROID QNX IOS


Flash Builder 4.6

39

DEMO


Some Flex mobile apps

40

Politifacts Radio X-track Narcissus


Flash Builder 4.6

41

TIPS


"e traditional way for Enterprise apps development

42

v

What do you need ?

Express the needs in a doc

Technical speci!cations

Back-end + UI developments Delivery

LOB IT


v

What problems are you facing ?

Observe, Observe, Observe

Find solutions designing the UI

Technical solutions to serve

the UIDelivery

D.D.D - Design Driven Development

Whatto build ?

Howto build ?to scale ? Analytics


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 ?

54

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 - [email protected]

mailto:[email protected]

mailto:[email protected]

oop2012 mobile workshops

Technology