Oop2012 mobile workshops

One codebase, multiple screens
Michaël Chaize | Developer Evangelist
RIAgora.com | @mchaize

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

Agenda

FLEX DESKTOP

D.D.D
LIVE CODE
FLEX MOBILE

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

Adobe & Xplatform mobile development



h ps://github.com/cordova

PhoneGap Platforms

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

Your Code
Native Web View
Native APIs

Native App - .apk, .ipa, etc

PhoneGap is not a framework

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


Mobile APIs

- Accelerometer
- Camera
- Capture
- Compass
Out of the box, - Connection
PhoneGap - Contacts
- Device
provides support for a - Events
number of basic - File
device APIs - Geolocation
- Media
- Network
- Notiﬁcation
- Storage


Camera


Extend PhoneGap

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

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


Barcode Scanner

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

PhoneGap - demo


Adobe Flex


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


Flex is open-source


In other words

Framework to build professional and
maintainable user experiences
connected to your existing back-end


Why Flex ?

Focus on the
user-experience ?


Hotline at Adobe

FL EX
FO RE
BE


Hotline at Adobe

FL EX
ER
AFT

15% 15% 10>1
faster cust. sat. training.


NATO

FL EX
FO RE
BE


NATO

FL EX
ER
AFT


Car industry

FL EX
FO RE
BE


Car industry

FL EX
ER
AFT


Flex for desktop users is a success

&

Richness / Fast / Open-source / Industrialization

e explosion of devices introduces new challenges
for application development


Native Mobile Application Development Model

A costly, ineﬃcient development model

Native Native Native Native
App App App App

Additional
OS’s


Introducing a new mobile development paradigm

One Tool, One Language, One Codebase

Flex Application Common codebase

AIR

Additional
OS’s

Any Platform


Industrialize user-experiences

One code base, Lots of screens

7%

80%
5%

Shared
code
8%


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

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, diﬀerent physical sizes
(Minimum recommended size: 0.25” x 0.25”)

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

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 stuﬀ ll the screen using
stuﬀ 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%


Solution: Automatic scaling for diﬀerent 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.


Scaling diﬀerent 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


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)


Mobile APIs available by default

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


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

Deploy your applications in the market places

Control the distribution with AIR 3
AIR 3 - Captive runtime

ANDROID QNX IOS


Flash Builder 4.6

DEMO


Some Flex mobile apps

Politifacts Radio X-track Narcissus

Flash Builder 4.6

TIPS


e traditional way for Enterprise apps development
v

What do Express the needs Technical Back-end + UI
Delivery
you need ? in a doc speci cations developments

LOB IT


D.D.D - Design Driven Development
v

Observe, Technical
What problems Find solutions
Observe, solutions to serve Delivery
are you facing ? designing the UI
Observe the UI

What How
to build ?
to build ? Analytics
to scale ?


Design tips - Navigation


Design tips - Visual Feedback

visual
feedback


Design tips - Visual Feedback

Demo

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>


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


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

/>


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


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


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


How to start coding Flex mobile app ?

h p://www.Flex.org

Oop2012 mobile workshops

More Related Content

What's hot

Viewers also liked

Similar to Oop2012 mobile workshops

More from Michael Chaize

Recently uploaded

Oop2012 mobile workshops