montpellier - flex ug
DESCRIPTION
Slides présentés au UG de Montpellier sur le futur d'Adobe FlexTRANSCRIPT
![Page 1: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/1.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe Flex 4.6Michaël Chaize | Developer EvangelistRIAgora.com | @mchaize
![Page 2: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/2.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Agenda
2
ROA
DM
AP FLEX
FLEX 4.6
LIVE CO
DE
LINKS
![Page 3: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/3.jpg)
©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
![Page 4: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/4.jpg)
©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
![Page 5: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/5.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flex/Flash on desktop
![Page 6: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/6.jpg)
©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
???
![Page 7: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/7.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flex, an apache project
Adobe
Community
Customers
![Page 8: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/8.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Why Apache ?
Day PhoneGapFelix
SlingJackRabbit
![Page 9: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/9.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe contributions
SDK
BlazeDS
Falcon
Flex 5 FalconJS
![Page 10: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/10.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Xmas gi"s
![Page 11: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/11.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flex, HTML5 & Adobe
![Page 12: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/12.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe Flex 4.6
12
4.6
![Page 13: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/13.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Hotline at Adobe
13
BEFORE FLEX
![Page 14: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/14.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Hotline at Adobe
14
AFTER FLEX
15%faster
15%cust. sat.
10>1training.
![Page 15: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/15.jpg)
© 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
![Page 16: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/16.jpg)
© 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
![Page 17: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/17.jpg)
© 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
![Page 18: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/18.jpg)
©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
![Page 19: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/19.jpg)
© 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
![Page 20: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/20.jpg)
© 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”)
![Page 21: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/21.jpg)
© 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%
![Page 22: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/22.jpg)
© 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
![Page 23: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/23.jpg)
© 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
![Page 24: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/24.jpg)
© 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)
![Page 25: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/25.jpg)
©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
![Page 26: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/26.jpg)
©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
![Page 27: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/27.jpg)
© 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
![Page 28: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/28.jpg)
©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
![Page 29: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/29.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flash Builder 4.6
29
DEMO
![Page 30: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/30.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Some Flex mobile apps
30
Politifacts Radio X-track Narcissus
![Page 31: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/31.jpg)
©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
![Page 32: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/32.jpg)
©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
![Page 33: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/33.jpg)
©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
![Page 34: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/34.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
How to start coding Flex mobile app ?
34
h"p://www.Flex.org
![Page 35: Montpellier - Flex UG](https://reader034.vdocument.in/reader034/viewer/2022052410/554bba15b4c90530298b4b05/html5/thumbnails/35.jpg)
©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