Flash camp portugal - Let's talk about Flex baby
-
Upload
michael-chaize -
Category
Technology
-
view
783 -
download
2
description
Transcript of 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
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
“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
©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.
PANIC MODE
WTF!!!
NOOOO!!!
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
“In the long-term, we believe HTML5 will be the best technology for...”
©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
really?
©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.
Christmas is coming...
©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
15
4.6
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Hotline at Adobe
16
BEFORE FLEX
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Hotline at Adobe
17
AFTER FLEX
15%faster
15%cust. sat.
10>1training.
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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”)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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%
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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
© 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>
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)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Mobile APIs available by default
29
- 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
30
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
31
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
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
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flash Builder 4.6
33
DEMO
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Some Flex mobile apps
34
Politifacts Radio X-track Narcissus
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
$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
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Advanced Enterprise mobile applications
37
Build engaging and innovation
native-like applications
using Flex on mobile and tablet devices
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Resources for Flex 4.6 ?
38
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