© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Narciso (nj) Jaramillo Building Multi-Density and Multi-Platform UIs with
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. UI paerns: Phones 10
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. UI paerns: Tablets 11
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Example: Floupon – a Groupon browser 12
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Example: Floupon – a Groupon browser Information Deals for current
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Floupon: Phone version 14
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Floupon: Tablet version (landscape) 15
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Floupon: Tablet version (portrait) 16
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Floupon: Tablet version (portrait) 17
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Floupon: Tablet version (portrait) 18
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Building adaptive UI with Flex: Phone vs. tablet
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Calibrating… Have a touchscreen smartphone (Android, iOS, other)? H
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Floupon: Separate phone and tablet apps 20 ViewNavigatorApplication List
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Floupon: Unied phone and tablet app 21 ViewNavigator List ActionBar View
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Handling the Back key private function initializeHandler(event:Event):voi
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Using states to handle layout variations private function resizeHandler(e
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Using state groups <states>!!<State name="portraitPhone&quo
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Managing states in views private function handleViewActivate(): void !{!!
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. 26 DEMO: Floupon running on Droid Pro, iPad (portrait/landscape).
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Building adaptive UI with Flex: Density management
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. 28 DEMO: App designed for 160 dpi running on Droid 2, iPhone 4 with no a
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. CHEAT SHEET: How to deal with density Set applicationDPI=“160” on your ap
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Overview Challenges in multiscreen development Designing adaptive U
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Multiple densities: e problem 30 150 x 40 pixel buon Desktop monitor @1
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Another perspective 31 3.5” diagonal screen Same physical size, different
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Can I use dynamic layout to solve this? 32 (Not easily. You can make stuff
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Solution: Automatic scaling for different DPIs 33 <Application applicat
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Resolution and density 34 Droid Pro 320 x 480 @160dpi Droid 2 480 x 854 @
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. 35 DEMO: App running on device with proper autoscaling (Droid 2, iPhone 4
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Scaling different types of objects 36 Vectors scale up well (scaling down
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. 37 DEMO: Refresh buon icon without MultiDPIBitmapSource (on desktop).
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Flex density concepts: Multi-DPI bitmaps <Button click="dealSumma
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. 39 DEMO: Refresh buon icon with MultiDPIBitmapSource.
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. What I won’t be covering in depth New mobile app components (ViewNavig
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Default mapping for DPI classications 40 Classication 160 DPI Devices M
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. CHEAT SHEET revisited Set applicationDPI=“160” on your application tag La
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Manual DPI management Leave applicationDPI unset (will default to same
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Building adaptive UI with Flex: Multiple platforms
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. UI differences across platforms 44 Android phone iPhone Title le-aligned
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Per-platform style rules @media (os-platform: "ios") {!! !Actio
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Using states for platform differences <states>!!<State name="
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. 47 DEMO: App running on iPhone/iPad compared to Droid 2/Galaxy Tab.
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Other common platform differences 48 Android Menu buon (use ViewMenu) Lon
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. 49 Know your platforms!
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Challenges in multiscreen development
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Conclusion
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Key takeaways Design for multiple screens Resolution | Orientation | Dens
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. What next? Watch my blog: rictus.com/muchado for slides and code Fo
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. What does multiscreen mean? 6 Pixel densities Form factors UI and hardwar
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Leveraging Flex 4.5 for multiscreen mobile UI development 7 Classic Flex
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Designing adaptive UI for multiple mobile screens
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Before you design… Know your platforms Platform UI guidelines | Great app
Comments to this Manuals