oop2012 mobile workshops

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

Agenda

FLEX DESKTO

FLEX MO

LIVE CO

Adobe & Xplatform mobile development

h!ps://github.com/cordova

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

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

Camera

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

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

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

BEFORE FLEX

Hotline at Adobe

AFTER FLEX

15%faster

15%cust. sat.

10>1training.

BEFORE FLEX

AFTER FLEX

Car industry

BEFORE FLEX

Car industry

AFTER FLEX

Flex for desktop users is a success

Richness / Fast / Open-source / Industrialization

!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

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

Flex Application

One Tool, One Language, One Codebase

Any Platform

Common codebase

Industrialize user-experiences

One code base, Lots of screens

Sharedcode

views.ListEmployees views.DetailsEmployee views.ListEmployees

DATA DATA

persisted in memory

subset

view destroyed view created

“BACK” bu!on

Flex 4.5 - architected for mobile apps

Multiple densities: "e problem

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?

(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

Solution: Automatic scaling for different DPIs

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

Vectorsscale up well

(scaling down can be bad)Outlines may blur slightly

Textscales up well

(Flash scales font size)

Bitmapsdo not scale up well

Flex density concepts: Multi-DPI bitmaps

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

C, JAVA

Flex Mobileproject

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

Some Flex mobile apps

Politifacts Radio X-track Narcissus

Flash Builder 4.6

"e traditional way for Enterprise apps development

What do you need ?

Express the needs in a doc

Technical speci!cations

Back-end + UI developments Delivery

LOB IT

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

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 ?

h"p://www.Flex.org

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

oop2012 mobile workshops

Technology

mobile strategy framework - a game for client workshops

appseceu 2015 mobile app reverse engineering / hacking...

mobile learning in security and defence...

cbi academy, ghaziabad,...

mobile traffic forecasts 2010 -2020 -...

february 2020 special events | courses | workshops| guest...

separation of concerns. model-view-controller design...

valve repair and testing equipment and more ·...

mobile workshops

parenting and professional workshops counseling services...

designing mobile health technology for bipolar disorder: a...

150 planners attend rpc mobile workshops at apa's npc18!

webcongress panama 2014 - workshops mobile strategy - cesar...

portait/drawing workshops powertex art workshops

oop2012 keynote design driven development

java gui. part...

heading/ description unit of rate of import duty by % under...

environmentally relevant activities (eras) guidelines for...

azure ad connect - azure workshops · the following...

connected women | 2015 · to deliver mobile literacy...