Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Adobe AIR Development for the BlackBerry PlayBook


Published on

The BlackBerry PlayBook is expected to be a killer tablet. It features a wide range of features and the ability to make native apps in a variety of languages including Adobe AIR.

Published in: Technology
  • Login to see the comments

Adobe AIR Development for the BlackBerry PlayBook

  1. 1. Adobe AIR Development for the BlackBerry PlayBook Feb 24, 20111
  2. 2. Agenda• Screen interactions• Device APIs to make great apps • Device integration • Offline storage • Event listeners• Skinning UI components • Themes • Skinstates • Methods of skinning• Resources and support 2
  3. 3. Characteristics of the BlackBerry PlayBook• Seven inch screen size• Multi touch interface• Landscape or portrait display• Virtual keyboard 4
  4. 4. Make a touch centric app User Action Result Type ColorDrag or swipe from the top This action displays the application-specific Red of the screen menu Drag or swipe from the This action displays the system-wide Purple bottom of the screen navigatorDrag or swipe from the left This action switches system-wide Blue or right side of the applications screen 5
  5. 5. On screen interactions User Action Result Tap the screen Initiates an action in the app This action moves the content on the screen in the direction of the drag Drag or swipe across the screen or swipe and at the corresponding rate of speed This action highlights a sequence ofTouch and hold a finger on an item. characters, a word, a link, or an item such as an email message or picture. These actions zoom in to and out from an Pinch open or pinch close. item 6
  6. 6. Notifications and Indicators• Application notifies appear in the top left corner of the screen • Inform users about app-specific events such as new mail messages• Status indicators appear in the top right corner of the screen • Display system status information such as battery power and wireless connection 7
  7. 7. Adobe Runtimes – Flash Player & AIR AIR SDK Tablet OS SDKActionScript BlackBerry PlayBook SWF Application (.bar)
  8. 8. PlayBook AIR SDK Capabilities• Hardware acceleration• Web View to display HTML and Flash content• UI components built specifically for the touch screen• APIs for front and rear facing cameras, accelerometer, in-app payments and more• Application notifications 9
  9. 9. PlayBook AIR SDK Capabilities• Extend Adobe AIR applications to use native C++ extensions• Porting existing Adobe AIR and Flash applications quickly and easily 10
  10. 10. Bring existing AIR apps to theBlackBerry PlayBook• Create the proper directory structure• Create the app.xml file• Package the SWF and app.xml file through the command line tool• Deploy to your BlackBerry PlayBook!ActionScript BlackBerry PlayBook SWF Application (.bar)
  11. 11. APIs to build greatapps 12
  12. 12. Adding a swipe gesture 13
  13. 13. Adding a swipe gesture 14
  14. 14. Device Information 15
  15. 15. Device Information• Battery level • Capture battery• Battery state events for app• Hardware ID lifecycle• Device OS • Identify your users based on PIN• Device PIN • Identify the Device• Platform Version OS for functionality• Vendor ID 16
  16. 16. Battery Level and Events• Monitor battery levels for power consumption in your app• Customize your app to provide the user experience• Display battery and charging information from your app 17
  17. 17. Battery Level and Events 18
  18. 18. Database• SQLite is a in-process library that implements a self-contained, serverless, zero-configuration, transactional SQL database engine.• Data is stored in a file on the system, typical the developer stores it in File.applicationStorageDirectory. DB PlayBook AIR Application File
  19. 19. AIR SQLite APIs• SQLConnection • open() – Synchronous • openAsync() – Asynchronous • loadSchema() – Database schema • Can Encrypt data on disk.• SQLStatement • text – SQL commands • execute()• SQLError • details/detailsID – SQL error message • operation – SQL command causing error
  20. 20. Shared Object
  21. 21. AIR File APIs• File • File.applicationStorageDirectory - a storage directory unique to each installed AIR application • File.applicationDirectory - the read-only directory where the application is installed (along with any installed assets) • File.desktopDirectory, File.documentsDirectory, File.userDirectory • Properties: exists, isDirectory, nativePath, extension, name, … • Methods: browseForOpen, browseForSave, getDirectoryListing(), …• FileStream • writeObject() – Uses AMF to write binary serialization of object. • open() – Synchronous • openAsync() – Asynchronous
  22. 22. Activity Indicator• Provide visual progress feedback to the user during time-consuming operations 23
  23. 23. Event Listeners
  24. 24. Skinning QNX UIComponents 25
  25. 25. Skinning Basics• Skin options • Global themes • Set specific component skins parts• Skin states• Methods of creating Skins • Bitmaps with or without scale grid • Display objects using graphics API• QNX skin assets available for reuse 26
  26. 26. PlayBook Themes• PlayBook comes with 2 Themes: White (default) & Black 27
  27. 27. PlayBook Themes Example 2 28
  28. 28. ThemesGlobal 29
  29. 29. Skin States• SkinStates.DISABLED• SkinStates.DISABLED_SELECTED• SkinStates.DOWN• SkinStates.DOWN_SELECTED• SkinStates.FOCUS• SkinStates.SELECTED• SkinStates.UP• SkinStates.UP_ODD 30
  30. 30. Component Skin Parts• ToggleSwitch • DropDown • setFillSkin() • setBackgroundSkin() • setThumbSkin() • setButtonSkin() • setTrackSkin() • setListSkin() • Button • TextInput • setSkin() • setSkin() 31
  31. 31. Setting a Skin• Set skin method typically takes these types: • Class reference • String of qualified class name • DisplayObject instance 32
  32. 32. Bitmaps with Slice 9 Scaling• Use Case: Custom TextInput image that scales Up/Down skin image Focus skin image 33
  33. 33. Skin Code: OddShapeSkin.pngOddShapeSkinFocus.png 34
  34. 34. Drawing API• Use Case: Custom TextInput with drawing API • Need to update any time the width/height changes 35
  35. 35. Skin Code: 36
  36. 36. Skin Code: 37
  37. 37. Resources & Support 38
  38. 38. Resources & Support• BlackBerry Developer website • • Webcast Series • Docs• BlackBerry Developer Forum • Adobe-AIR/bd-p/tablet• BlackBerry Developer Blog •• Adobe Labs • 39
  39. 39. Q&AThank You! Feb 24, 2011 40