Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Flash Builder and Flex Future - Multiscreen Development

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 51 Publicité

Flash Builder and Flex Future - Multiscreen Development

Télécharger pour lire hors ligne

Mobile development on the Flash Platform. Flex and Flash Builder have some mobile-specific technology and paradigms that make it easy to create cross-vendor, cross-os mobile applications.

Mobile development on the Flash Platform. Flex and Flash Builder have some mobile-specific technology and paradigms that make it easy to create cross-vendor, cross-os mobile applications.

Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à Flash Builder and Flex Future - Multiscreen Development (20)

Publicité

Plus récents (20)

Publicité

Flash Builder and Flex Future - Multiscreen Development

  1. 1. Flash Builder and Flex Future: Multiscreen Apps with “Burrito” and “Hero”
  2. 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. 3. Mobile Flash Development
  4. 4. Flash Player 10.1 In-browser content Games, video Deploy as a SWF, put on the web
  5. 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. 6. Device Landscape Desktop Netbooks Android RIM PlayBook Apple iOS Google TV Televisions WebOS
  7. 7. AIR for Device Applications are “Native” That means they can be put on app stores NOT that the UI components are native
  8. 8. Building Multiscreen Applications with Flash Builder
  9. 9. Issues with Flex on Mobile Devices Complex Components: DataGrids, Charts, Tree Memory Footprint Desktop UI Screen Patterns
  10. 10. Solving Mobile UI Paradigms with Flex “Hero”
  11. 11. Mobile-Optimized Components
  12. 12. Mobile/Touch Friendly Components Bigger labels Controls fit for fingers 40 px Auto-show Scrollbars to save screen real estate
  13. 13. Pixel-Density Flex creates components that will resize based on how many pixels per inch the device supports
  14. 14. The Mobile Theme Used automatically with mobile projects Includes larger, touch-friendly controls Adds inputMode CSS style for touch
  15. 15. interactionMode Style mouse touch Fires hover events Creates wider hit area Use scrollbar Hides scrollbar
  16. 16. interactionMode can in theory be used to swap between devices while keeping the same codebase.
  17. 17. Mobile UI Patterns in Flex “Hero”
  18. 18. Dealing with Screens
  19. 19. Dealing with Screens
  20. 20. Dealing with Screens
  21. 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. 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. 23. Tabbed UI Used for navigation when sequence doesn’t matter
  24. 24. TabNavigator Tab through views Just set up multiple ViewNavigators with the firstView property Can’t use push/pop
  25. 25. Global Navigation and “Breadcrumbs”
  26. 26. ActionBar navigationContent actionContent titleContent Provides easy access to important features Won’t scroll Can be defined globally or for each view
  27. 27. Demo: Flex Mobile in Action
  28. 28. Deploying Mobile Applications With Flash Builder “Burrito”
  29. 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. 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. 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. 32. Optimization Techniques
  33. 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. 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. 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. 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. 37. Developing Apps for the
  38. 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. 39. Getting Setup with the PlayBook SDK
  40. 40. Download the PlayBook AIR SDK Download the PlayBook Simulator Install the Flash Builder Plug-in
  41. 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. 42. PlayBook provides the QNX framework and APIs
  43. 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. 44. Demo: Deploying an application to the PlayBook
  45. 45. Native PlayBook APIs
  46. 46. qnx.system.* qnx.system.Device Device information (hardwareID, vendorID) Battery information (state, level,etc) qnx.system.QNXApplication Swipe events for OS
  47. 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. 48. Bringing it all together
  49. 49. Conclusion Mobile development means new design tricks Critical to be able to deploy to multiple platforms Leverage device specific features Think mobile first
  50. 50. Q&A Ryan Stewart Developer Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewart

Notes de l'éditeur

  • \n
  • http://www.smashingmagazine.com/2009/01/23/friday-freebies-flavours-icon-set-and-cute-tweeters-icon-set/\n\n
  • http://www.smashingmagazine.com/2009/01/23/friday-freebies-flavours-icon-set-and-cute-tweeters-icon-set/\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • http://www.smashingmagazine.com/2009/01/23/friday-freebies-flavours-icon-set-and-cute-tweeters-icon-set/\n\n

×