1Feb 24, 2011
Adobe AIR Development for the BlackBerry PlayBook
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
4
Characteristics of the BlackBerry PlayBook
• Seven inch screen size
• Multi touch interface
• Landscape or portrait display
• Virtual keyboard
5
Make a touch centric appUser Action Result Type Color
Drag or swipe from the top of the screen
This action displays the menu
application-specific Red
Drag or swipe from the bottom of the screen
This action displays the navigator
system-wide Purple
Drag or swipe from the left or right side of the
screen
This action switches applications
system-wide Blue
6
On screen interactionsUser Action Result
Tap the screen Initiates an action in the app
Drag or swipe across the screen
This action moves the content on the screen in the direction of the drag
or swipe and at the corresponding rate of speed
Touch and hold a finger on an item.This action highlights a sequence of characters, a word, a link, or an itemsuch as an email message or picture.
Pinch open or pinch close.These actions zoom in to and out from an
item
7
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
ActionScript SWFBlackBerry PlayBook
Application (.bar)
AIR SDK Tablet OS SDK
Adobe Runtimes – Flash Player & AIR
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
PlayBook AIR SDK Capabilities
• Extend Adobe AIR applications to use native C++ extensions
• Porting existing Adobe AIR and Flash applications quickly and easily
10
Bring existing AIR apps to the BlackBerry PlayBook
ActionScript SWFBlackBerry PlayBook
Application (.bar)
• 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!
12
APIs to build great apps
13
Adding a swipe gesture
14
Adding a swipe gesture
15
Device Information
16
Device Information• Battery level
• Battery state
• Hardware ID
• Device OS
• Device PIN
• Platform Version
• Vendor ID
• Capture battery events for app lifecycle
• Identify your users based on PIN
• Identify the Device OS for functionality
17
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
18
Battery Level and Events
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
FilePlayBook AIR Application
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
Shared Object
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
23
Activity Indicator
• Provide visual progress
feedback to the user
during time-consuming operations
Event Listeners
25
Skinning QNX UI Components
26
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
27
PlayBook Themes• PlayBook comes with 2 Themes: White (default) & Black
28
PlayBook Themes Example 2
29
ThemesGlobal
30
Skin States
• SkinStates.DISABLED
• SkinStates.DISABLED_SELECTED
• SkinStates.DOWN
• SkinStates.DOWN_SELECTED
• SkinStates.FOCUS
• SkinStates.SELECTED
• SkinStates.UP
• SkinStates.UP_ODD
31
Component Skin Parts
• ToggleSwitch
• setFillSkin()
• setThumbSkin()
• setTrackSkin()
• Button
• setSkin()
• DropDown
• setBackgroundSkin()
• setButtonSkin()
• setListSkin()
• TextInput
• setSkin()
32
Setting a Skin
• Set skin method typically takes these types:
• Class reference
• String of qualified class name
• DisplayObject instance
33
Bitmaps with Slice 9 Scaling
• Use Case: Custom TextInput image that scales
Up/Down skin image Focus skin image
34
Skin Code:
OddShapeSkin.png
OddShapeSkinFocus.png
35
Drawing API
• Use Case: Custom TextInput with drawing API
• Need to update any time the width/height changes
36
Skin Code:
37
Skin Code:
38
Resources & Support
• BlackBerry Developer website
• http://us.blackberry.com/developers/tablet/devresources.jsp
• Webcast Series
• Docs
• BlackBerry Developer Forum
• http://supportforums.blackberry.com/t5/Tablet-OS-SDK-for-Adobe-AIR/bd-p/tablet
• BlackBerry Developer Blog
• http://devblog.blackberry.com/
• Adobe Labs
• http://labs.adobe.com/technologies/flash/blackberrytabos/
39
Resources & Support
40Feb 24, 2011
Q&A
Thank You!