Montpellier - Flex UG

Native Mobile Application Development Model A costly, ineﬃcient development model Native Native Native Native App App App App Additional OS’s© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

Introducing a new mobile development paradigm One Tool, One Language, One Codebase Flex Application Common codebase AIR Additional OS’s Any Platform© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

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

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

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. in100% constraint-based layouts or padding values, will be wrong.) 100%© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21

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.© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 22

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© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 23

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)© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24

Mobile APIs available by default - 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. 25

Adobe AIR 3 and Flex 4.6ANE: No more limitationActionScript Native Extension AS3 bridge Flex Mobile project C, JAVA ANE SWF .AIR, .APK, .IPA, .BAR©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 26

Flash Builder 4.6 NEW FEATURES SplitViewNavigator CallOut, CallOutButton SpinnerList, DateSpinner ToggleSwitch Snapped List SoftKeyBoard©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 28

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©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 31

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 ?©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 32

Advanced Enterprise mobile applications Build engaging and innovation native-like applicationsusing Flex on mobile and tablet devices©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 33

http://www.ria-experts.com	1593
http://abtasty.com	18
http://ranksit.com	1
http://webcache-exp-test.googleusercontent.com	1
http://translate.googleusercontent.com	1
http://webcache.googleusercontent.com	1

Montpellier - Flex UG

by Michael Chaize

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 1,615

Statistics

Montpellier - Flex UG Presentation Transcript