building multi-density and multi-platform uis with flex
DESCRIPTION
Building Multi-Density and Multi-Platform UIs with Flex. Narciso (nj) Jaramillo. Calibrating…. Have a touchscreen smartphone (Android, iOS , other)? Have a touchscreen tablet (Android, iOS , other)? Know what a ViewNavigator is? Used Flash Builder “Burrito”/Flex “Hero” prerelease? - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/1.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Narciso (nj) JaramilloBuilding Multi-Density and Multi-Platform UIs with Flex
![Page 2: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/2.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Calibrating…
Have a touchscreen smartphone (Android, iOS, other)? Have a touchscreen tablet (Android, iOS, other)? Know what a ViewNavigator is? Used Flash Builder “Burrito”/Flex “Hero” prerelease? Built a mobile Flex app?
2
![Page 3: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/3.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Overview
Challenges in multiscreen development Designing adaptive UI for multiple mobile screens Building adaptive UI using Flex
3
![Page 4: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/4.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
What I won’t be covering in depth
New mobile app components (ViewNavigator, ActionBar, ViewMenu)
Overall app architecture Code sharing between mobile and desktop apps Packaging workflows for multiple platforms
4
![Page 5: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/5.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Challenges in multiscreen development
![Page 6: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/6.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
What does multiscreen mean?
6
Pixel densitiesForm factors UI and hardwareconventions
240 dpi
160/320 dpi
![Page 7: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/7.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Leveraging Flex 4.5 for multiscreen mobile UI development
7
Classic Flex features
Core Spark componentsDynamic layoutStates and state groups
Mobile components and skins
App components (ViewNavigator / ActionBar / ViewMenu)Cross-platform component skinsAlternative skins for certain platform conventionsPer-platform CSS rulesDPI management Automatic DPI-based application scalingDPI-aware skinsMulti-DPI bitmapsPer-DPI CSS rules
![Page 8: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/8.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Designing adaptive UI for multiple mobile screens
![Page 9: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/9.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9
Before you design…
Know your platformsPlatform UI guidelines | Great apps | UI patterns
Know your devicesScreen resolutions | Pixel densities | Hardware affordances
Know your appCore information | Key user tasks | Appropriateness for mobile
![Page 10: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/10.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
UI patterns: Phones
10
![Page 11: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/11.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
UI patterns: Tablets
11
![Page 12: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/12.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Example: Floupon – a Groupon browser
12
![Page 13: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/13.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Example: Floupon – a Groupon browser
Information Deals for current location Info on a specific deal Discussions for a given deal
User tasks Refresh the deal list Buy a deal Post to a deal discussion
13
![Page 14: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/14.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Floupon: Phone version
14
![Page 15: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/15.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Floupon: Tablet version (landscape)
15
![Page 16: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/16.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Floupon: Tablet version (portrait)
16
![Page 17: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/17.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Floupon: Tablet version (portrait)
17
![Page 18: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/18.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Floupon: Tablet version (portrait)
18
![Page 19: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/19.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Building adaptive UI with Flex: Phone vs. tablet
![Page 20: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/20.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Floupon: Separate phone and tablet apps
20
ViewNavigatorApplication
List
ActionBar
ViewNavigator
List
ActionBar
ViewNavigator
![Page 21: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/21.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Floupon: Unified phone and tablet app
21
ViewNavigator
List
ActionBar
ViewNavigator
List
ActionBar
ViewNavigator
![Page 22: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/22.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Handling the Back key
private function initializeHandler(event:Event):void{
systemManager.stage.addEventListener(KeyboardEvent.KEY_DOWN,deviceKeyDownHandler);
systemManager.stage.addEventListener(KeyboardEvent.KEY_UP,deviceKeyUpHandler);
} private function deviceKeyDownHandler(event:KeyboardEvent):void{
if (event.keyCode == Keyboard.BACK && mainNavigator.length > 1)
event.preventDefault();} private function deviceKeyUpHandler(event:KeyboardEvent):void{
if (event.keyCode == Keyboard.BACK && mainNavigator.length > 1)
mainNavigator.popView();}
22
![Page 23: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/23.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Using states to handle layout variations
private function resizeHandler(event:ResizeEvent):void{
var isPortrait:Boolean = height > width;var isTablet:Boolean = height > 960 || width > 960;
currentState = (isPortrait ? "portrait" : "landscape") +(isTablet ? "Tablet" : "Phone");
}
23
<ViewNavigator id="mainNavigator" left="0" left.landscapeTablet="{LIST_WIDTH}" top="0" top.portraitTablet="{ACTIONBAR_HEIGHT +
LIST_HEIGHT}" right="0" bottom="0"firstView="views.SummaryView"
firstView.landscapeTablet="views.DetailView”firstView.portraitTablet=“views.DetailView”
/>
![Page 24: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/24.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Using state groups
<states><State name="portraitPhone" stateGroups="portrait,phone"/><State name="landscapePhone" stateGroups="landscape,phone"/><State name="portraitTablet" stateGroups="portrait,tablet"/><State name="landscapeTablet" stateGroups="landscape,tablet"/>
</states>
24
<ViewNavigator id="mainNavigator" left="0" left.landscapeTablet="{LIST_WIDTH}" top="0" top.portraitTablet="{ACTIONBAR_HEIGHT + LIST_HEIGHT}" right="0" bottom="0"firstView="views.SummaryView"
firstView.tablet="views.DetailView”/>
![Page 25: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/25.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Managing states in views
private function handleViewActivate(): void {
setCurrentState(getCurrentViewState());}
override public function getCurrentViewState(): String{
var newState: String = getPlatform() + (isTablet() ? "Tablet" : "Phone");
if (hasState(newState))return newState;
elsereturn currentState;
}
25
![Page 26: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/26.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26
DEMO: Floupon running on Droid Pro,iPad (portrait/landscape).
![Page 27: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/27.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Building adaptive UI with Flex: Density management
![Page 28: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/28.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28
DEMO: App designed for 160 dpi running on Droid 2, iPhone 4
with no autoscaling.
![Page 29: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/29.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CHEAT SHEET: How to deal with density
Set applicationDPI=“160” on your application tag
Lay out your application for a 160 dpi device
Use MultiDPIBitmapSource for all bitmaps
29
![Page 30: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/30.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Multiple densities: The problem
30
150 x 40 pixel button
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 31: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/31.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Another perspective
31
3.5” diagonal screen
Same physical size, different pixel counts
![Page 32: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/32.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Can I use dynamic layout to solve this?
32
(Not easily. You can make stuff fill the screen using percent sizing, but your fonts and icons will still be tiny. And any fixed pixel sizes, e.g. in constraint-based layouts or padding values, will be wrong.)
(Not easily. You can make stuff fill the screen using percent sizing, but your fonts and icons will still be tiny. And any fixed pixel sizes, e.g. in constraint-based layouts or padding values, will be wrong.)
320x480 @160dpi 640x960 (at same density) 640x960 @320dpi100%
100%
100%
100%
![Page 33: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/33.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Solution: Automatic scaling for different DPIs
33
<Application applicationDPI=“160”><Button width=“160” height=“40”/>
</Application>
REMEMBER: To your code, the screen is always 160 dpi, and this button is always
160 x 40, regardless of how the application is being scaled.
160 dpi 240 dpi 320dpi
Scaled 1.5x Scaled 2x
![Page 34: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/34.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Resolution and density
34
Droid Pro320 x 480 @160dpi
Droid 2480 x 854 @240dpi
iPhone 4640 x 960 @320dpi
= 320 x 570 @160dpi= 320 x 480 @160dpi
Use scaling (applicationDPI) to deal with density differencesUse resizing (dynamic layout) to deal with physical size/aspect
ratio differences
100%
100%
100%
![Page 35: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/35.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 35
DEMO: App running on devicewith proper autoscaling
(Droid 2, iPhone 4).
![Page 36: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/36.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Scaling different types of objects
36
Vectorsscale up well
(scaling down can be bad)Outlines may blur slightly
Textscales up well
(Flash scales font size)
Lorem
Ipsum
DolorBitmaps
do not scale up well
![Page 37: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/37.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37
DEMO: Refresh button iconwithout MultiDPIBitmapSource
(on desktop).
![Page 38: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/38.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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>
38
Design icon for 160 dpiMake a 1.5x bigger version for 240 dpiMake a 2x bigger version for 320 dpi
(e.g. 32x32, 48x48, 64x64)
![Page 39: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/39.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 39
DEMO: Refresh button iconwith MultiDPIBitmapSource.
![Page 40: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/40.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Default mapping for DPI classifications
40
Classification
160 DPI
Devices Most tabletsiPhone 3GS
Motorola Droid Pro
Mapped range
< 200 DPI
Typical range
132 DPI (iPad)to
181 DPI (HTC Hero)
Source: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
Can override default mappings using runtimeDPIProvider
240 DPIMost Android
phones
>= 200 DPI<= 280 DPI
217 DPI (HTC Evo)to
254 DPI (NexusOne)
320 DPIiPhone 4
> 280 DPI
326 DPI (iPhone 4)
Flex groups devices into DPI classifications based on actual device density
![Page 41: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/41.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CHEAT SHEET revisited
Set applicationDPI=“160” on your application tag
Lay out your application for a 160 dpi device
Use MultiDPIBitmapSource for all bitmaps
41
![Page 42: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/42.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Manual DPI management
Leave applicationDPI unset (will default to same as runtimeDPI) Built-in component skins in mobile theme will adapt to different
DPIs Your own layouts and skins will need to adapt (pixel and font
sizes) Can use @media to set CSS rules for different DPIs Use data binding or code to adapt layout properties per DPI Multi-DPI bitmaps still work
42
![Page 43: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/43.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Building adaptive UI with Flex: Multiple platforms
![Page 44: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/44.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
UI differences across platforms
44
Android phone iPhone
Title left-aligned Title centered
No back button On-screen back button
Flat-look buttons Beveled buttons
Multiple actions Single action
![Page 45: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/45.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Per-platform style rules
@media (os-platform: "ios") {ActionBar {
defaultButtonAppearance: "beveled”;titleAlign: "center”;
}}
45
![Page 46: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/46.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Using states for platform differences
<states><State name="androidPhone" stateGroups="phone"/><State name="androidTablet" stateGroups="tablet"/><State name="iosPhone” stateGroups="phone,needsBackButton"/><State name="iosTablet" stateGroups="tablet,needsBackButton"/><State name=“playbook” stateGroups=“tablet,needsBackButton”/>
</states>
46
<navigationContent> <Button includeIn="needsBackButton" label="Back"
click="handleBackClick()"/></navigationContent>
![Page 47: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/47.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47
DEMO: App running on iPhone/iPadcompared to Droid 2/Galaxy Tab.
![Page 48: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/48.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Other common platform differences
48
Android
Menu button(use ViewMenu)
Longpress menu(use List,
SkinnablePopupContainer)
iOS
Bottom toolbar(can use HGroup orSkinnableContainer)
![Page 49: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/49.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49
Know your platforms!
![Page 50: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/50.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Conclusion
![Page 51: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/51.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Key takeaways
Design for multiple screensResolution | Orientation | Density | Platform
Use states to handle layout and platform variations
Use applicationDPI to handle density
Test on desktop or on device51
![Page 52: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/52.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
What next?
Watch my blog: rictus.com/muchado for slides and code Follow me on Twitter: @rictus Look forward to Android support in the May release... … and iOS and PlayBook support in the June release!
52
![Page 53: Building Multi-Density and Multi-Platform UIs with Flex](https://reader036.vdocuments.mx/reader036/viewer/2022062310/56816915550346895de03267/html5/thumbnails/53.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.