montpellier - flex ug

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

Adobe Flex 4.6Michaël Chaize | Developer EvangelistRIAgora.com | @mchaize


Agenda

2

ROA

DM

AP FLEX

FLEX 4.6

LIVE CO

DE

LINKS


Flex/Flash on mobile devices and tablets

Flash Player: plug-in in mobile browsers

AIR: Run your app as a native app


AIR on mobiles and tablets

AIR: Run your app as a native app

MACHINARIUM POLITIFACT NARCISSUS


Flex/Flash on desktop


Future of Flex

1 2 3 4 4.5

2004 2006 2007 2010 2011

open source

free sdk

AS2 Spark Mobile

???


Flex, an apache project

Adobe

Community

Customers


Why Apache ?

Day PhoneGapFelix

SlingJackRabbit


Adobe contributions

SDK

BlazeDS

Falcon

Flex 5 FalconJS


Xmas gi"s


Flex, HTML5 & Adobe


Adobe Flex 4.6

12

4.6


Hotline at Adobe

13

BEFORE FLEX


Hotline at Adobe

14

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

18

One code base, Lots of screens

80%

8%

5%

7%

Sharedcode

© 2010 Adobe Systems Incorporated. All Rights Reserved. 19

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.6 - architected for mobile apps

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

Multiple densities: $e problem

20

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?

21

(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

22

<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

23

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>

24

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

25

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


Adobe AIR 3 and Flex 4.6

26

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

27

Control the distribution with AIR 3

AIR 3 - Captive runtime

ANDROID QNX IOS


Flash Builder 4.6

28

NEW FEATURES

S p l i t V i e w N a v i g a t o rC a l l O u t , C a l l O u t B u t t o nS p i n n e r L i s t , D a t e S p i n n e rT o g g l e S w i t c hS n a p p e d L i s tS o f t K e y B o a r d


Flash Builder 4.6

29

DEMO


Some Flex mobile apps

30

Politifacts Radio X-track Narcissus


$e traditional way for Enterprise apps development

31

v

What do you need ?

Express the needs in a doc

Technical speci!cations

Back-end + UI developments Delivery

LOB IT

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

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


Advanced Enterprise mobile applications

33

Build engaging and innovation

native-like applications

using Flex on mobile and tablet devices


How to start coding Flex mobile app ?

34

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

montpellier - flex ug

Technology