Flash Builder and Flex provide tools for building multi-screen applications with "Burrito" and "Hero". "Burrito" allows debugging applications on mobile devices from Flash Builder. "Hero" includes mobile-optimized UI components and patterns for touch interfaces. The document also discusses developing for platforms like Android, Blackberry Playbook, and deploying applications to devices and app stores from Flash Builder.

1. Flash Builder and Flex Future:
Multiscreen Apps with “Burrito” and “Hero”

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

3. Mobile Flash Development

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

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

6. Device Landscape
Desktop
Netbooks
Android
RIM PlayBook
Apple iOS
Google TV
Televisions
WebOS

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

8. Building Multiscreen Applications
with Flash Builder

9. Issues with Flex on Mobile
Devices
Complex Components: DataGrids,
Charts, Tree
Memory Footprint
Desktop UI Screen Patterns

10. Solving Mobile UI Paradigms
with Flex “Hero”

11. Mobile-Optimized Components

12. Mobile/Touch Friendly Components
Bigger labels
Controls fit for fingers 40 px
Auto-show Scrollbars
to save screen real
estate

13. Pixel-Density
Flex creates components
that will resize based on
how many pixels per inch
the device supports

14. The Mobile Theme
Used automatically with mobile projects
Includes larger, touch-friendly controls
Adds inputMode CSS style for touch

15. interactionMode Style
mouse touch
Fires hover events Creates wider hit area
Use scrollbar Hides scrollbar

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

17. Mobile UI Patterns in Flex “Hero”

18. Dealing with Screens

19. Dealing with Screens

20. Dealing with Screens

21. ViewNavigator
The pattern for screens
on devices for sequential
navigation
Can define transitions
between views
Uses push/pop stack to
move between views

22. ViewNavigator
The pattern for screens
on devices for sequential
navigation
Can define transitions
between views
Uses push/pop stack to
move between views

23. Tabbed UI
Used for navigation
when sequence doesn’t matter

24. TabNavigator
Tab through views
Just set up multiple
ViewNavigators with
the firstView property
Can’t use push/pop

25. Global Navigation and “Breadcrumbs”

26. ActionBar
navigationContent actionContent
titleContent
Provides easy access to important features
Won’t scroll
Can be defined globally or for each view

27. Demo:
Flex Mobile in Action

28. Deploying Mobile Applications
With Flash Builder “Burrito”

29. Mobile Debug Panel
Allows you to set up debugging
via the desktop or debugging via
the device
Has built-in device profiles for
screen resolutions
Developers can build their own
device profiles for resolutions
that aren’t supported

30. Debugging
Debug over USB or Wifi (USB is
better - with Wifi you have to be
on the same network)
Use trace statements, set
breakpoints, it all works
Flash Builder compiles and
deploys a debug version of the
app to the phone for you

31. Deployment
Flash Builder walks you through
the deployment steps including
creating a certificate (for
Android) and builds a native file
(.apk, .bar, etc)
Uses the same “Export release
build” that Flex developers use
today

32. Optimization Techniques

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

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

35. Use a SplashScreen
Flex takes a bit of time to load
splashScreenImage is set to be fast and first
Provides near-instant user feedback

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

37. Developing Apps for the

38. Three Ways to Develop in Flash on the PlayBook
ActionScript Projects
Tooling support in Builder and Flash Pro
Flex Projects
Best support for mobile patterns
Most robust components
Native Projects
QNX components used to build core
applications

39. Getting Setup with
the PlayBook SDK

40. Download the PlayBook AIR SDK
Download the PlayBook Simulator
Install the Flash Builder Plug-in

41. Available as a VMWare Image
Has a Developer mode so you can debug
on the device
Test fonts/features/etc on the device

42. PlayBook provides the QNX framework and APIs

43. Components
The native components for the PlayBook
Include base components like buttons, lists, etc
Also include higher level components like
LoginDialogue, MediaPlayer, etc

44. Demo:
Deploying an application
to the PlayBook

45. Native PlayBook APIs

46. qnx.system.*
qnx.system.Device
Device information (hardwareID, vendorID)
Battery information (state, level,etc)
qnx.system.QNXApplication
Swipe events for OS

47. qnx.media.*
qnx.media.StageWebView
Webkit component for PlayBook
Display HTML in Flash-based PlayBook apps
qnx.media.MediaPlayer
Supports hardware accelerated media
Includes support for extra codecs

48. Bringing it all together

50. Conclusion
Mobile development means new design tricks
Critical to be able to deploy to multiple platforms
Leverage device specific features
Think mobile first

51. Q&A
Ryan Stewart
Developer Evangelist, Adobe
ryan@adobe.com
blog.digitalbackcountry.com
@ryanstewart
github.com/ryanstewart