Montpellier - Flex UG

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

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

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

Agenda

2

ROA

DM

AP FLEX

FLEX 4.6

LIVE CO

DE

LINKS

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

Flex/Flash on mobile devices and tablets

Flash Player: plug-in in mobile browsers

AIR: Run your app as a native app

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

AIR on mobiles and tablets

AIR: Run your app as a native app

MACHINARIUM POLITIFACT NARCISSUS

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

Flex/Flash on desktop

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

Future of Flex

1 2 3 4 4.5

2004 2006 2007 2010 2011

open source

free sdk

AS2 Spark Mobile

???

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

Flex, an apache project

Adobe

Community

Customers

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

Why Apache ?

Day PhoneGapFelix

SlingJackRabbit

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

Adobe contributions

SDK

BlazeDS

Falcon

Flex 5 FalconJS

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

Xmas gi"s

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

Flex, HTML5 & Adobe

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

Adobe Flex 4.6

12

4.6

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

Hotline at Adobe

13

BEFORE FLEX

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

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

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

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

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

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%

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

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

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

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

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

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)

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

Mobile APIs available by default

25

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

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

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

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

Deploy your applications in the market places

27

Control the distribution with AIR 3

AIR 3 - Captive runtime

ANDROID QNX IOS

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

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

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

Flash Builder 4.6

29

DEMO

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

Some Flex mobile apps

30

Politifacts Radio X-track Narcissus

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

$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

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

Advanced Enterprise mobile applications

33

Build engaging and innovation

native-like applications

using Flex on mobile and tablet devices

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

How to start coding Flex mobile app ?

34

h"p://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