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!