Flash camp portugal - Let's talk about Flex baby

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

Let’s talk about Flex baby !Michaël Chaize | Developer EvangelistRIAgora.com | @mchaize


“Let's talk about !ex, babyLet's talk about you and meLet's talk about all the good thingsAnd the bad things that may beLet's talk about !ex”

SALT 'N' PEPAPhilosophers - XXth century


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


PANIC MODE

WTF!!!

NOOOO!!!


“In the long-term, we believe HTML5 will be the best technology for...”


Future of Flex

1 2 3 4 4.5

2004 2006 2007 2010 2011

open source

free sdk

AS2 Spark Mobile

really?


Flex, an apache project

Adobe

Community

Customers


Why Apache ?

Day PhoneGapFelix

SlingJackRabbit


Adobe contributions

SDK

BlazeDS

Falcon

Flex 5 FalconJS


Christmas is coming...


Xmas gi"s


Flex, HTML5 & Adobe


Adobe Flex 4.6

15

4.6


Hotline at Adobe

16

BEFORE FLEX


Hotline at Adobe

17

AFTER FLEX

15%faster

15%cust. sat.

10>1training.


We are the RIA community, we’ll always be

Client MVC

User XP

C.I, Agile

Software

© 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

22

One code base, Lots of screens

80%

8%

5%

7%

Sharedcode

© 2010 Adobe Systems Incorporated. All Rights Reserved. 23

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

24

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?

25

(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

26

<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

27

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>

28

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

29

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


Adobe AIR 3 and Flex 4.6

30

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

31

Control the distribution with AIR 3

AIR 3 - Captive runtime

ANDROID QNX IOS


Flash Builder 4.6

32

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

33

DEMO


Some Flex mobile apps

34

Politifacts Radio X-track Narcissus


$e traditional way for Enterprise apps development

35

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

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

37

Build engaging and innovation

native-like applications

using Flex on mobile and tablet devices


Resources for Flex 4.6 ?

38

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

Date post:	18-Dec-2014
Category:	Technology
Upload:	michael-chaize
View:	783 times
Download:	2 times

Flash camp portugal - Let's talk about Flex baby

Technology