Introduction to Flex Hero for Mobile Devices

Building Mobile Applications with Flex “Hero”

Ryan Stewart Developer Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewartBased in SeattleThings I Like: Beer Mountaineering/Hiking/Backpacking Geolocation/Mapping stuff

People here smarter than I am

Agenda Flash on Mobile Devices Introduction to Flex Mobile UI Paradigms with Flex Mobile Optimizing for Flex MobileBonus! - Features of Flash Player 10.2

Mobile Flash Development

Flash Player 10.1In-browser content Games, video Deploy as a SWF, put on the web

Flash Player 10.1 Adobe AIRIn-browser content Mobile applications Games, video Native APIs, extra functionality Deploy as a SWF, put on the web Package to target individual devices

AIR for Devices.ipa .bar .apk

AIR for Device Applications are “Native”That means they can be put on app stores NOT that the UI components are native

So we can use Flex to build native apps

Issues with Flex on Mobile DevicesComplex Components: DataGrids, Charts, Tree Memory Footprint Desktop UI Screen Patterns

http://designingwebinterfaces.com/ designing-web-interfaces-12- screen-patterns

Addressing those issues with Flex “Hero”

Mobile-Optimized Components

What does Mobile Optimized Mean? Rewrote and optimized UIComponentCreated a mobile theme which supports: Bigger components CSS Style for enabling touch (Scrollers)

The Mobile ThemeUsed automatically when MobileApplication tag is used Includes larger, touch-friendly controls Adds inputMode CSS style for touch

interactionMode Style mouse touchFires hover events Creates wider hit area Use scrollbar Hides scrollbar

interactionMode can in theory be used to swap between devices while keeping the same codebase.

Mobile UI Patterns in Flex “Hero”

ViewNavigator The pattern for screens on devices Can deﬁne transitions between views Uses push/pop stack to move between views

TabNavigator Tab through views Just set up multiple ViewNavigators with the ﬁrstView property Can’t use push/pop

ActionBarnavigationContent actionContent titleContentProvides easy access to important features Won’t scroll Can be deﬁned globally or for each view

Optimization Techniques

Use as Much ActionScript as Possible ItemRenders Skins* Custom Components*In general, a few MXML skins won’t hurt, especially if you use FXG assets

Graphical Assets In general, the fastest typewill be ActionScript and Bitmaps MXML is pretty slow: Don’t use MXML GraphicsDon’t use MXML skins with FXG Pre-compiled FXG with AS3 is a pretty good solution

Use a SplashScreen Flex takes a bit of time to loadsplashScreenImage is set to be fast and ﬁrst Provides near-instant user feedback

View Events Perform data actions AFTER the Transition The View dispatches a CREATION_COMPLETEevent before the transition happens Listen for the VIEW_ACTIVATE event, then perform data operations

View B Added to Display ListView A View B Dispatches FlexEvent.ADD View B View B Dispatches FlexEvent.CREATION_COMPLETE View A Dispatches FlexEvent.VIEW_DEACTIVATE Do Transition View A Dispatches FlexEvent.REMOVE View B Dispatches FlexEvent.VIEW_ACTIVATE

Flash Player 10.2!

http://labs.adobe.com/downloads/ ﬂashplayer10.html

New Stuff StageVideo NativeCursorFull Screen Mode for Multiple Monitors Hardware Acceleration for IE9

StageVideo

What’s Happening?StageVideo is being hardware accelerated Plus, normally Flash content all runs through the same rendering pipeline StageVideo puts the video on its own layer, so it can’t be transformed, but it performs very well

Native Cursorshttp://corlan.org/2010/12/02/working-with- native-custom-cursors-in-ﬂash/

ﬂash.display.MouseCursorData Lets you deﬁne bitmap sources as native cursors Vastly improved performance over current methods

Full Screen Mode for Multiple Monitors When something is full screen on one monitor, you can still work on the other without taking it out of fullscreen mode...... The Hulu feature :)

Hardware acceleration on IE9 We’ve been working with Microsoftto make the Flash/IE9 experience top notch Flash Player 10.2 uses IE9 APIs for hardware acceleration Should see great performance with IE9

Q&ARyan StewartDeveloper Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewart

http://blog.digitalbackcountry.com	660
http://eclipseplugincentral.blogspot.com	205
http://www.flexden.net	23
http://flexpourmobiles.posterous.com	13
http://blogs.adobe.com	9
http://eclipseplugincentral.blogspot.in	6
http://roundup.flepstudio.org	4
http://blog.mistercreosoto.com	3
http://www.hanrss.com	2
http://twitter.com	2
http://eclipseplugincentral.blogspot.fr	2
http://webcache.googleusercontent.com	2
http://eclipseplugincentral.blogspot.de	1
http://paper.li	1
http://translate.googleusercontent.com	1
http://www.eclipseplugincentral.blogspot.com	1
http://www.zihnibabuz.com	1
http://us-w1.rockmelt.com	1
http://static.slidesharecdn.com	1
http://eclipseplugincentral.blogspot.com.es	1

Introduction to Flex Hero for Mobile Devices

by Ryan Stewart on Dec 14, 2010

Accessibility

Tags

Upload Details

Usage Rights

20 Embeds 939

Statistics

Introduction to Flex Hero for Mobile Devices — Presentation Transcript