Flash camp portugal - Let's talk about Flex baby

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

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

“Let's talk about ex, baby
Let's talk about you and me
Let's talk about all the good things
And the bad things that may be
Let's talk about ex”

SALT 'N' PEPA
Philosophers - 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

free open
AS2 Spark Mobile
sdk source

really?


Flex, an apache project

Adobe Customers

Community


Why Apache ?

Day Felix PhoneGap

JackRabbit
Sling


Adobe contributions

Flex 5 FalconJS

SDK Falcon

BlazeDS


Christmas is coming...


Xmas gi s


Flex, HTML5 & Adobe


Adobe Flex 4.6

4.6

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

Hotline at Adobe

FL EX
FO RE
BE


Hotline at Adobe

FL EX
ER
AFT

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


We are the RIA community, we’ll always be

Client
MVC

User XP

Software

C.I, Agile


e explosion of devices introduces new challenges
for application development

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

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.6 - 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. 23

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

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 4.6

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

NEW FEATURES

SplitViewNavigator
CallOut, CallOutButton
SpinnerList, DateSpinner
ToggleSwitch
Snapped List
SoftKeyBoard


Flash Builder 4.6

DEMO


Some Flex mobile apps

Politifacts Radio X-track Narcissus

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 ?


Advanced Enterprise mobile applications

Build engaging and innovation
native-like applications
using Flex on mobile and tablet devices


Resources for Flex 4.6 ?

h p://www.Flex.org

Flash camp portugal - Let's talk about Flex baby

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Flash camp portugal - Let's talk about Flex baby

Similar a Flash camp portugal - Let's talk about Flex baby (20)

Más de Michael Chaize

Más de Michael Chaize (11)

Último

Último (20)

Flash camp portugal - Let's talk about Flex baby