Blackberry Tablet OS SDK for Adobe AIR-Development Guide--1449712-0112050519-001-0.9.2 Beta-US

8/3/2019 Blackberry Tablet OS SDK for Adobe AIR-Development Guide--1449712-0112050519-001-0.9.2 Beta-US

1/184

BlackBerry Tablet OS SDK forAdobe AIRVersion: 1.1.1

Development Guide


2/184

Published: 2011-09-04SWD-1840131-1005031135-001


3/184

Contents1 Overview of the BlackBerry Tablet OS SDK for Adobe AIR............................................................................... 7

Developing Adobe AIR applications for BlackBerry Tablet OS.......................................................................... 7BlackBerry Tablet OS security architecture...................................................................................................... 7

Accessing restricted functionality.............................................................................................................. 8

Folders accessible by an application................................................................................................................. 9

2 Managing your application through the application life cycle......................................................................... 12

Understanding the application life cycle.......................................................................................................... 12

Saving the application state.............................................................................................................................. 13Responding to application deactivation and activation.................................................................................... 13

Respond to deactivation and activation.................................................................................................... 14

Responding to application window state......................................................................................................... 14

Listen for a change in application window state....................................................................................... 15

Responding to low memory conditions............................................................................................................ 15

Respond to low memory conditions.......................................................................................................... 16

Respond to low battery notifications............................................................................................................... 16Respond to low battery notifications........................................................................................................ 17

3 ActionScript APIs............................................................................................................................................... 19

4 Updating Flash Builder...................................................................................................................................... 20

Configure updates for Flash Builder in a Mac environment............................................................................. 20

Configure updates for Flash Builder in a Windows environment..................................................................... 20Check for updates to the BlackBerry Tablet OS plug-in.................................................................................... 20

5 Organizing your UI with containers.................................................................................................................. 22

Placing a child component within a container flow.......................................................................................... 22

Aligning a child component within a container flow........................................................................................ 23

Adjusting the size of a child parallel to the container flow............................................................................... 24

Adjusting the size of a child perpendicular to the container flow.................................................................... 24Docking a child component.............................................................................................................................. 25

Using containers to design a simple layout...................................................................................................... 25

Create a container..................................................................................................................................... 26

Create the orientation handler function................................................................................................... 27

Create and add subcontainers................................................................................................................... 28

Add UI controls.......................................................................................................................................... 30

Adjust the opposite size of UI components............................................................................................... 31Use spacers to define child layout............................................................................................................. 32


4/184


5/184

Create a picker.................................................................................................................................................. 76

Update data in a picker..................................................................................................................................... 78

Code sample: Creating a picker calendar.......................................................................................................... 79

Code sample: Creating a picker clock............................................................................................................... 81

9 Providing feedback and activity status to the user........................................................................................... 85

Create a progress bar........................................................................................................................................ 85

Code sample: Creating a progress bar.............................................................................................................. 86

Create an activity indicator............................................................................................................................... 87

Code Sample: Creating an activity indicator..................................................................................................... 88

Code sample: Creating a percentage bar.......................................................................................................... 89

10 Capturing variable input with a slider............................................................................................................... 91

Create a volume slider...................................................................................................................................... 91

Code sample: Creating a volume slider............................................................................................................ 92

11 Skinning your UI components........................................................................................................................... 94

Change the default skin of a UI component..................................................................................................... 94Create a custom button skin class.................................................................................................................... 96

Apply a custom button skin.............................................................................................................................. 97

Code sample: Creating a custom button skin................................................................................................... 98

12 Capturing text input.......................................................................................................................................... 102

Create a text input field.................................................................................................................................... 102

13 Creating dialog boxes........................................................................................................................................ 104

Customizing buttons in a dialog box................................................................................................................. 104

Create a dialog box........................................................................................................................................... 105

Code sample: Creating a dialog box.................................................................................................................. 107

14 Responding to events and gestures.................................................................................................................. 108

Respond to an event......................................................................................................................................... 109

Code sample: Detecting a swipe gesture event................................................................................................ 110

Code sample: Detecting a multitouch gesture event....................................................................................... 112

Code sample: Detecting a rotation gesture event............................................................................................ 113

15 Localizing your application and using resource bundles................................................................................... 115

Creating a resource bundle............................................................................................................................... 115

Localize an application...................................................................................................................................... 117

Code sample: Localizing an application............................................................................................................ 119

Load a resource bundle.................................................................................................................................... 120


6/184

Code sample: Loading a resource bundle......................................................................................................... 122

16 In App Payments............................................................................................................................................... 124

License models.................................................................................................................................................. 124Registering digital goods with BlackBerry App World...................................................................................... 125

Creating an application that sells digital goods................................................................................................ 125

Set up the UI.............................................................................................................................................. 126

Create a class to store the properties for your digital goods.................................................................... 127

Retrieve and display a list of digital goods................................................................................................ 128

Initiate a purchase..................................................................................................................................... 130

Check for existing purchases..................................................................................................................... 133

Code sample: Creating an application that sells digital goods.................................................................. 135

Distributing digital goods.................................................................................................................................. 140

Distributing digital goods from a content server....................................................................................... 140

Testing your application................................................................................................................................... 140

Live testing................................................................................................................................................. 141

Creating a sandbox account...................................................................................................................... 141

Download an application before you make it available for distribution................................................... 141

17 The blackberry-tablet.xml file........................................................................................................................... 143

18 Signing your application.................................................................................................................................... 146

Assigning a version number to your application............................................................................................... 146

Configure application signing and create debug tokens using the setup wizard in Flash Builder.................... 147

Configure application signing manually in Flash Builder........................................................................... 147Configure application signing through a proxy server in Flash Builder..................................................... 149

Sign your application in Flash Builder............................................................................................................... 150

Configure application signing from the command line..................................................................................... 153

Using a proxy server from the command line........................................................................................... 154

Sign your application from the command line.................................................................................................. 155

Package your application from the command line........................................................................................... 155

Application Signing Errors................................................................................................................................. 156

Attempt to rename [value1] to [value2] failed.......................................................................................... 156

Code signing request failed because Application-Development-Mode in Manifest is present and is not

set to false................................................................................................................................................. 156

Code signing request failed because Common Name in developer certificate is not [value]................... 156

Code signing request failed because this file has been previously signed................................................ 157

Code signing request failed because Package-Author in Manifest is not set to [value]............................ 157

Code signing request failed because value of Package-Name in Manifest is not allowed........................ 157


7/184

-cskpass and -csjpin must be specified if -register is specified.................................................................. 157

cskpass required........................................................................................................................................ 158

Developer certificate and private key not found in keystore or store password not supplied................. 158

Incomplete certificate chain...................................................................................................................... 158

Key associated with [value] not a private key........................................................................................... 159

Keystore load: store password incorrect................................................................................................... 159

keytool error: java.io.FileNotFoundException: certificate.p12 ................................... 159

keytool error: java.io.IOException: Incorrect AVA Format........................................................................ 160

keytool error: java.lang.Exception: Key pair not generated, alias already exists....................... 160

Missing parameter for [option_name] option........................................................................................... 160

No BAR file or CSJ file specified................................................................................................................. 161

No key name specified............................................................................................................................... 161

No manifest............................................................................................................................................... 161

Only one of -setup, -register, or -verify can be specified.......................................................................... 161

Server is not responding............................................................................................................................ 162

Unable to open BAR file............................................................................................................................. 162

19 Using debug tokens.......................................................................................................................................... 163

Create a debug token manually using Flash Builder......................................................................................... 163

Import a debug token using Flash Builder........................................................................................................ 168

Install a debug token using Flash Builder.......................................................................................................... 168

Create a debug token from the command line................................................................................................. 169

Install a debug token from the command line.................................................................................................. 170

Configure your application for use with a debug token from the command line............................................ 171

20 Backup and restore your code signing keys...................................................................................................... 172

Back up code signing keys using Flash Builder.................................................................................................. 172

Restore code signing keys using Flash Builder.................................................................................................. 172

Back up code signing keys manually................................................................................................................. 173

Restore code signing keys manually................................................................................................................. 173

Default location for code signing keys.............................................................................................................. 173

21 Retrieve the PIN of a BlackBerry tablet............................................................................................................ 174

22 Retrieving the IP address of the BlackBerry PlayBook tablet............................................................................ 175

23 Enable development mode............................................................................................................................... 176

24 Provide feedback.............................................................................................................................................. 177

25 Document revision history................................................................................................................................ 178


8/184

26 Legal notice....................................................................................................................................................... 180


9/184

Overview of the BlackBerry Tablet OS SDK for

Adobe AIR

1

The BlackBerry Tablet OS SDK for Adobe AIR lets you to create applications for the BlackBerry PlayBook tablet,

which runs the BlackBerry Tablet OS. This SDK allows you to create Adobe AIR applications that leverage the Adobe

AIR 2.5 runtime environment that is built in to the BlackBerry Tablet OS.

The BlackBerry Tablet OS is a multitasking operating system built upon the reliability and power of QNX Neutrino

RTOS. Designed specifically to run applications developed using Adobe Flash and Adobe ActionScript, the

BlackBerry Tablet OS offers developers the opportunity to create new and compelling applications and games, or to

simply adapt existing ones to a tablet platform.Adobe AIR applications are built upon Flash and ActionScript technologies commonly associated with web content.

However, because they run in the Adobe AIR runtime environment rather than in a plug-in to a web browser, they

function as standalone applications. Additional ActionScript APIs, for use only within the Adobe AIR runtime

environment, allow your application to access to a richer set of functionality than browser-based applications. For

more information about Adobe AIR application development, visit http://www.adobe.com/products/air/.

Developing Adobe AIR applications for BlackBerry TabletOSThe BlackBerry Tablet OS SDK for Adobe AIR allows you to optimize your Adobe AIR applications for the

BlackBerry Tablet OS. This SDK provides APIs that extend Adobe ActionScript 3.0 and allow you to develop

applications that have the look and feel of native BlackBerry PlayBook tablet applications and take advantage of

some of the unique features of the OS. These APIs provide some unique UI components and predefined skins and

enable you to listen for events specific to the BlackBerry Tablet OS, such as a swipe down event from the top bezel

(the touch-sensitive frame around the display area of the screen).

The BlackBerry Tablet OS supports the Adobe AIR 2.5 mobile device profile. The Adobe AIR 2.5 mobile profile was

developed to provide the critical improvements in performance and reduction in processor usage that were necessary

to bring Adobe Flash based applications to mobile devices such as smartphones and tablets. APIs have been added

to ActionScript 3.0 to allow Flash applications to access some of the functionality that is unique to mobile devices,

such as access to accelerometer and geolocation information and support for touch and gesture events.

The BlackBerry PlayBook tablet includes the Adobe AIR 2.5 runtime environment. Applications developed for this

runtime should be fully functional on the BlackBerry PlayBook tablet with no additional development required, savefor adjusting the application for the unique screen size of the tablet.

BlackBerry Tablet OS security architecture

RIM Confidential and Proprietary Information - Beta Customers Only. Content and software are subject to change.

7


10/184

The BlackBerry Tablet OS is a microkernel operating system. Microkernel operating systems implement the

minimum amount of software in the kernel space to manage access to basic computing functions such as CPU access,

memory management, and so on. Higher-level system services, such as socket communication and device drivers,

run in the user space. By running higher-level services in the user space, the BlackBerry Tablet OS can manageprocesses in isolation from each other. This helps prevent damage to the kernel and other applications.

The microkernel architecture of the BlackBerry Tablet OS enables the following features:

The BlackBerry Tablet OS is designed to be tamper resistant. The kernel performs an integrity test when the OS

starts. If the integrity test reveals damage to the kernel, the BlackBerry Tablet OS does not start.

The BlackBerry Tablet OS is designed to be resilient. The kernel can restart a process without negatively affecting

other processes. All applications run in the user space.

The BlackBerry Tablet OS is designed to be secure. The kernel validates requests for system resources. Anauthorization manager evaluates requests from applications to access the capabilities of the BlackBerry tablet.

For example, when an application requests access to the camera, the authorization manager displays a dialog

box that specifies the capability requested, and gives the user the opportunity to grant or refuse access to that

capability.

The BlackBerry Tablet OS is designed to verify the authenticity of an application. All applications that run on a

BlackBerry tablet must be signed by the RIM Signing Authority and a Developer Certificate. For more information

about accessing the RIM Signing Authority, see Signing your application.

Accessing restricted functionality

The BlackBerry tablet has functionality that can capture rich information from its environment, like the GPS receiver,

a microphone, and so on. To help protect against potentially malicious code, users must grant your application access

to the functionality. If an application uses APIs that access restricted functionality, and the application does not

request access to a device capability, the application fails. You should make sure you test your application's behavior

for cases when a user denies the application access to a particular capability.You must specify the device capabilities required for your application by adding one action element per device

capability to your blackberry-tablet.xml file. For more information about creating a blackberry-tablet.xml file, see

The blackberry-tablet.xml file.

The following table lists values for the action element. You can use these values to specify the capabilities and APIs

that are that are required by your application:

Value Capability API

access_internet Access remote resource by using a network

connection

Any API that accesses the Internet.

access_shared Access the shared file system The following APIs might require this

permission if they try to access the

shared directory:

flash.filesystem.FileStream

flash.filesystem.File


8


11/184

Value Capability API

flash.media.CameraRoll

flash.media.CameraUI

play_audio Access the audio controls qnx.media.MediaControl

flash.media.Sound

read_device_identif

ying_information

Access the PIN and serial number of the tablet. qnx.system.Device.pin

qnx.system.Device.serialNum

ber

read_geolocation Access the current location of the tablet flash.sensors.Geolocation

record_audio Access the audio stream from the microphone flash.media.Microphone

set_audio_volume Access the volume control qnx.media.MediaControl

use_camera Access data from one or more cameras flash.media.Camera

flash.media.CameraUI

Sample blackberry-tablet.xml file

my_icon.pngMy CompanygYAAgIqK0RLL5u4I9NanyxBUuCIcore.gamesimg/spalsh_landscape.jpg:img/splash_portrait.jpguse_cameraread_geolocationplay_audio3491.0.0.0

Folders accessible by an application

The following table contains descriptions of the folders that an application can accesss. Each application has accessto its own working directory in the file system, and might be able to access the shared folder. All path references in

your application are relative to the root of the working folder.

The Adobe AIR API property File.userDirectory maps to the root of the working folder.


9


12/184

Folder Description

app This folder contains the files that were installed with your application.

These files were packaged with you BAR file. Your application has read-

only access to this folder.

The Adobe AIR API property File.applicationDirectorymaps

to the folder app/air.

data This folder contains the application's private data. The application has

full access to read and write files in this folder.

The Adobe AIR API propertyFile.applicationStorageDirectory maps to this folder.

tmp This folder contains the application's temporary working files. The

application should remove these files regularly. The BlackBerry Tablet

OS might remove these files any time the application is not running.

logs This folder contains system logs for an application. Stdin and stdout

are redirected to this directory.

shared This folder contains subfolders that contain shared data by type. An

application cannot write to this directory.

shared/bookmarks This folder contains web browser bookmarks that can be shared among

applications.

shared/books This folder contains eBook files that can be shared among applications.

shared/clipboard This folder contains data copied or cut from another application.

shared/documents This folder contains documents that can be shared among applications.

The Adobe AIR API propertiesFile.documentsDirectory

and

File.desktopDirectory map to this folder.

shared/downloads This folder contains web browser downloads.

shared/misc This folder contains miscellaneous data that can be shared among

applications.

shared/music This folder contains music files that can be shared among applications.

shared/photos This folder contains photos that can be shared among applications.

shared/videos This folder contains videos that can be shared among applications.

shared/voice This folder contains audio recordings that can be shared amongapplications.


10


13/184


11


14/184

Managing your application through theapplication life cycle

2

The life cycle of an application refers to the stages that an application can move through, from the time it is invoked

until it is terminated. It is important to understand the implications of the various states and transitions of the life

cycle on your application so that you can respond to them appropriately in your code.

The life cycle of your application normally has three stages: it starts, runs for a period of time, and then ends. The

BlackBerry Tablet OS is a multithreaded, multitasking platform so it can run multiple applications at the same time.

While your application is running in the foreground, it is active. However, it can be interrupted when another

application opens and replaces yours as the active application. When your application loses focus it is not terminated,but it may be deactivated and pushed to the background. A background application can reactivatedreturned to

the foregroundat any time, or may be closed by the user. The application may terminated by the system, without

ever becoming active again.

When an application needs to move from one stage of the lifecycle to another, the BlackBerry Tablet OS notifies the

application using the Adobe AIR event system. The events that an application receives can vary if a user changes

the Application behavior setting on the tablet. The following table lists the default events that the OS sends to an

application to indicate a change in the application lifecycle.

Lifecycle stage Event

Application startup Event.ACTIVATE

Foreground Event.ACTIVATE

Background Event.DEACTIVATE when another application receives the foreground

Exit Event.EXITING

During the application life cycle, other events might cause your application to terminate prematurely (that is, beforethe user has closed it). For example, when the battery drains, the tablet shuts down and closes all open applications.

Alternatively, if a user has too many applications open, it could create a low memory situation. The BlackBerry Tablet

OS handles low memory conditions by closing idle background applications so it can reclaim memory resources.

Understanding the application life cycle

The life cycle of an application refers to the stages that an application can move through, from the time it is invokeduntil it is terminated. It is important to understand the implications of the various states and transitions of the life

cycle on your application so that you can respond to them appropriately in your code.

In its simplest form, the life cycle of your application has three stages: it starts, runs for a period of time, and then

ends. While the application is running in the foreground, it is active. While your application is running and active, it

can be interrupted at any time, when another application opens and replaces yours as the active application. The

BlackBerry Tablet OS is a multithreaded, multitasking platform. When your application loses focus it is not

terminated, but is instead deactivated and pushed to the background; the application is still running, but it is no


12


15/184

longer the top application on the stack. A background application can be reactivatedthat is, returned to the

foregroundat any time, or may be closed by the user, or occasionally terminated by the system, without ever

becoming active again.

During the application life cycle, other events might cause your application to terminate prematurely (that is, before

the user has closed it). For example, when the battery drains, the tablet shuts down and closes all open applications.

In addition, there are memory considerations that your application should account for. If, for example, a user has

too many applications open, it could create a low memory situation. The BlackBerry Tablet OS handles low memory

conditions by closing idle background applications so it can reclaim the necessary memory resources.

Saving the application stateSaving the application state ensures that when the user returns to the application, the application returns to the

same condition it was in when it lost focus. A mobile application can experience a number of interruptions during

its life cyclelosing application focus, change in application window state, low memory events, and low battery

eventsthat must be managed. It is important that your application listen for these events and respond by saving

the application state; any pertinent information about the current conditions of the applicationfor example, the

screen element currently in focus, or any user-entered datacan be saved. When the user returns to the application,

the saved state can be reloaded and the user can then continue on as before.

The type of information you should save about the application state depends upon the application, and upon the

likely expectations of your user. For example, for an e-reader application, the user might simply expect to return to

the same page of the same book they were reading. In a text editor application or on a settings page, the user might

expect that any text entered would still be available, even if those changes were not saved manually. In an interactive

game, such as a driving game, you might save much more data about the state of the application. In each case, to

decide what data to save and when to save it, you must first determine what data is necessary for the user to continue

when the application is reloaded.

It is also wise to save the application state after other significant events; for example, in a game application, youmight save the state each time the user completes a level.

Responding to application deactivation and activationThe BlackBerry Tablet OS can deactivate your application and move it to the background at any time. For example,

a user may leave your application to open another application. You should not assume that the user appropriately

saved their activity in your application before the application moves to the background.

When the OS deactivates your application, you should first save the application state. In addition, your application

should stop any unnecessary processes (such as updating the UI in real-time) to preserve system resources. When

the OS activates your application again, you can reload the saved state, and restart any suspended processes.

By default, the NativeApplication object dispatches one of the following events when your application changes

its stage in the lifecycle:


13


16/184

Property Description

Event.DEACTIVATE Dispatched when another application becomes the active application.

Event.ACTIVATE Dispatched when the application becomes the active application.

Respond to deactivation and activation

1. Import the required classes and interfaces.

import flash.events.*;

2. Set up event listeners to listen for the Event.DEACTIVATE and Event.ACTIVATE events.

NativeApplication.nativeApplication.addEventListener(Event.DEACTIVATE,onDeactivate);NativeApplication.nativeApplication.addEventListener(Event.ACTIVATE, onActivate);

3. Define the callback function called when the application loses focus. This function should save the state of the

application and stop any unnecessary processes.

public function onDeactivate(event:Event):void

{ // Save state// Suspend processes

}

4. Define the callback function called when the application regains focus. This function should save the reload the

state of the application and restarted any processes that were stopped.

public function onActivate(event:Event):void{

// Reload state// Restart processes}

Responding to application window stateThe BlackBerry Tablet OS application window has three states that can be changed at any time. For example, a user

may minimize an application to toggle to a new application or close it from the thumbnail view. Your application

should listen for these changes in application window state and respond accordingly by, for example, saving theapplication state. In addition, your application should stop any unnecessary processes (such as updating the UI in

real-time) to preserve system resources. When the OS activates your application again, you can reload the saved

state, and restart any suspended processes.

The IowWindowEvent class defines events that are associated with the change in application window state.


NORMAL The application window is full screen on the device and is active.


14


17/184


THUMBNAIL The application window is a thumbnail on the device and is not active. This happens

when a user minimizes the application or is toggling between applications.

HIDDEN The application window is not visible on the device. This happens when another

application is currently full screen.

Listen for a change in application window state

1. Import the required classes and interfaces.

import flash.events.*;

2. Set up an event listener to listen for a change in application window state.

var win:IowWindow = IowWindow.getAirWindow();win.addEventListener(IowWindowEvent.WINDOW_STATE_CHANGED, stateChanged );

3. Define a callback function called when the application window state has changed.

function stateChanged(event:IowWindowEvent):void

{switch( win.state ){case IowWindowState.NORMAL:trace( "Application is full screen" );break;case IowWindowState.THUMBNAIL:trace( "App is minimized" );break;case IowWindowState.HIDDEN:

trace( "App is hidden" );break;}}

Responding to low memory conditionsLow memory conditions occur most often when the user has many, memory intensive applications open and running

in the background. Alternatively, applications might hold memory unnecessarily if they do not suspend processeswhen moved to the background.

When the system runs low on memory, the BlackBerry Tablet OS attempts to reclaim resources by closing

background applications. The OS attempts to close the application that been in the background the longest, and

continues to close applications until it reclaims enough memory for normal system operation.


15


18/184

When the OS tries to terminate an application due to low memory, it terminates the application's processes and

destroys the associated NativeApplication instance. However, the application window remains in the list of

background applications. From the user's perspective, the application appears to be running in the background.

When the user returns the application to the foreground, the OS restarts the application and creates a new instanceofNativeApplication.

When the system runs low on memory, the QNXApplication class dispatches the

QNXApplicationEvent.LOW_MEMORY event. You should create a listener to process this event. When you receive

a LOW_MEMORY event, your application should immediately save state, release resources, destroy its objects. This

way the user's application data should be preserved if your application is terminated.

If your application receives focus again, the user expects to return to the application in the state it was in when it

was pushed to the background. Your application should detect whether it was terminated due to low memory, thenload the saved state if appropriate.

Respond to low memory conditions

1. Import the required packages.

import qnx.system;

import qnx.events;

2. Set up an event listener to listen for the QNXApplicationEvent.LOW_MEMORY event.

QNXApplication.qnxApplication.addEventListener(QNXApplicationEvent.LOW_MEMORY, onLowMemory);

3. Define the callback function called when a low memory event occurs.

public function onLowMemory(event:Event):void{

// Save state// Release resources

}

Respond to low battery notifications


import qnx.system.Device;import qnx.events.DeviceBatteryEvent;

2. Define variables for the battery level and battery state.

public static var bLevel:int;public static var bState:int;

3. Set the deviceBatteryMonitoring property to true to access the values for the battery level and state and

then initialize the values of the bLevel and bState variables.


16


19/184

Device.device.batteryMonitoringEnabled = true;bLevel = Device.device.batteryLevel;bState = Device.device.batteryState;

4. Set up event listeners to listen for the DeviceBatteryEvent.LEVEL_CHANGE andDeviceBatteryEvent.STATE_CHANGE events.

Device.device.addEventListener(DeviceBatteryEvent.LEVEL_CHANGE, onLevelChange);Device.device.addEventListener(DeviceBatteryEvent.STATE_CHANGE, onStateChange);

5. Define the callback methods for the event listeners. In the following code sample, the appropriate variable is

updated to reflect the new level or state of the battery.

public function onLevelChange(evt:DeviceBatteryEvent):void {bLevel = evt.batteryLevel;evaluate();

}public function onStateChange(evt:DeviceBatteryEvent):void {

bState = evt.batteryState;evaluate();

}

6. Evaluate the new battery properties and respond as appropriate.

public function evaluate(){

if( bState == DeviceBatteryState.UNPLUGGED|| bLevel < 10)

{// Save state

displayWarning();}

}

Respond to low battery notifications


import qnx.system.Device;import qnx.events.DeviceBatteryEvent;

2. Define variables for the battery level and battery state.public static var bLevel:int;public static var bState:int;

3. Set the deviceBatteryMonitoring property to true to access the values for the battery level and state and

then initialize the values of the bLevel and bState variables.

Device.device.batteryMonitoringEnabled = true;bLevel = Device.device.batteryLevel;

bState = Device.device.batteryState;


17


20/184

4. Set up event listeners to listen for the DeviceBatteryEvent.LEVEL_CHANGE and

DeviceBatteryEvent.STATE_CHANGE events.

Device.device.addEventListener(DeviceBatteryEvent.LEVEL_CHANGE, onLevelChange);Device.device.addEventListener(DeviceBatteryEvent.STATE_CHANGE, onStateChange);

5. Define the callback methods for the event listeners. In the following code sample, the appropriate variable is

updated to reflect the new level or state of the battery.

public function onLevelChange(evt:DeviceBatteryEvent):void {bLevel = evt.batteryLevel;evaluate();

}

public function onStateChange(evt:DeviceBatteryEvent):void {bState = evt.batteryState;evaluate();

}

6. Evaluate the new battery properties and respond as appropriate.

public function evaluate(){

if( bState == DeviceBatteryState.UNPLUGGED|| bLevel < 10)

{// Save state

displayWarning();}

}


18


21/184

ActionScript APIs 3While the BlackBerry Tablet OS SDK for Adobe AIR extends the Adobe ActionScript API in many important

areas, you must use the ActionScript 3.0 APIs for data storage, networking, and device sensor functions. The followingtable lists some resources that you can use to learn more about ActionScript APIs.

You must explicitly request permission from your user to use device sensors. For more information, see Accessing

restricted functionality.

Component Description

Data storage The BlackBerry Tablet OS supports the following approaches to data storage

Local shared object (in theflash.net.SharedObject package)

Encrypted local store (in the flash.data.EncryptedLocalStore

package)

File system (in the flash.filesystem package)

SQLite (in the flash.data package)

Network communication You can use the flash.net package to send and receive data over a

network connection.

Accelerometer You can use the flash.sensors.Accelerometer class to register an

event listener for accelerometer events. The BlackBerry Tablet OS reports

movement in three perpendicular planes relative to the device.

Geolocation You can use the flash.sensors.Geolocation class to register an event

listener that processes changes in the geoposition of the device. For more

information, see Detecting geolocation changes in the ActionScript 3.0

Developer's Guide.

For more information, see the ActionScript 3.0 Reference for the Adobe Flash Platform.


19
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/index.html?filter_flex=4.1&filter_flashplayer=10.1&filter_air=2


22/184

Updating Flash Builder 4

Configure updates for Flash Builder in a Mac environmentBefore you can upgrade the BlackBerry Tablet OS SDK plug-in on Mac OS, you need to change an Adobe Flash

Builder configuration file. The upgrade process reverts the file to its original state when the update is complete.

You only need to change the configuration file the first time you upgrade the plug-in. Subsequent upgrades work

normally without this task.

Before you begin: Close Adobe Flash Builder before you edit the config.ini file described in the steps below.

1. In a text editor, open the config.ini file in /eclipse/configuration folder. The

default location of this file is /Applications/Adobe Flash Builder 4.5/eclipse/configuration/config.ini

2. Put a number sign (#) before the osgi.configuration.area parameter.

#[email protected]/Documents/Adobe Flash Builder 4.5/cascaded/308971/configuration

3. Save the file and exit the text editor.

4. In Adobe Flash Builder, on the Flash Builder menu, click Preferences.5. In the list of preference categories, expand Install/Update > Available Software Sites.

6. In the list of available software sites, select the BlackBerry Tablet OS update site check box.

7. Click OK.

Configure updates for Flash Builder in a Windows

environment1. In Adobe Flash Builder, on the Window menu, click Preferences.

2. In the list of preference categories, expand Install/Update > Available Software Sites.

3. In the list of available software sites, select the BlackBerry Tablet OS update site check box.

4. Click OK.

Check for updates to the BlackBerry Tablet OS plug-inAfter you enable the update site in Adobe Flash Builder, you should see it in the list of available software update

sites. If it does not appear in the list of update sites, you should add it manually. The update site is located at http://

www.blackberry.com/go/eclipseupdate/flashbuilder4.5

Before you begin:Register for access to the BlackBerry Developer Zone.

1. In Adobe Flash Builder, on the Help menu, click Install New Software.

2. On the Available Software screen, in the Work with drop-down list, click BlackBerry Tablet OS update site.


20
https://bdsc.webapps.blackberry.com/bdsc/index.jsp#registerhttps://bdsc.webapps.blackberry.com/bdsc/index.jsp#registerhttp://www.blackberry.com/go/eclipseupdate/flashbuilder4.5,http://www.blackberry.com/go/eclipseupdate/flashbuilder4.5,


23/184

3. If the list of available software is populated, expand the BlackBerry Tablet OS Support item.

4. Select the BlackBerry Tablet OS Plugin for Adobe Flash Builder item. Click Next.

5. On the Install Details screen, click Next.6. On the Review Licenses screen, accept or decline the license agreements. Click Next.

7. On the Login required window, enter your BlackBerry Developer Zone login information. Click OK.

8. On the Security Warning window, click OK or Cancel.

9. On the Software Updates window, click Restart Now.


21


24/184


25/184

RIM Confidential and Proprietary Information Beta Customers Only Content and software are subject to change


26/184

Adjusting the size of a child parallel to the container flowFlow size refers to the size of a child component in the direction of the flow of the parent container. For example,

the height of a button in a container with a vertical flow, or the width of a button in a container with a horizontalflow.

The container sets the flow size for a child only if the child implements IContainable and the child's

IContainable.size property is not 0. Otherwise, the child component's flow size is not changed during layout

operations.

Adjusting the size of a child perpendicular to the containerflowOpposite size refers to the size of a child in the direction opposite to the flow of the parent container. For example,

the height of a button in the container with a horizontal flow, or the width of a button in a parent container with a

vertical flow.


24



27/184

The parent container will only resize a child component in the opposite direction if the child implements

IContainable and IContainable.sizeMod is set to SizeMode.BOTH. When SizeMode.BOTH is set, any

container alignment settings are ignored, and the opposite size for a child is set to fill the available remaining container

space in the opposite direction. For an example of a component that implements opposite size, see Adjust theopposite size of UI components

The following illustration shows the opposite size and flow size of subcomponents as it relates to the flow direction

of a parent container.

Docking a child componentYou can dock a child component to anchor it adjacent to any edge of the parent container.

If a component implements IContainment, you can set its containment property to dock it to any edge of the

stage. When a resize event occurs, all docked components are laid out first, in the order in which they are added to

the parent. The remaining child objects are placed in the remaining container space.

Using containers to design a simple layoutYou can use a simple hierarchy of parent and child containers to design an effective layout for your application.

Creating an application layout that uses multiple containers and basic UI controls involves the following tasks:

Create a container

Create the orientation handler function

Create and add subcontainers

Add UI components

Adjust the opposite size of UI components Use spacers to define child layout

RIM Confidential and Proprietary Information Beta Customers Only. Content and software are subject to change.

25



28/184

The complete application is shown below. The sample application uses four simple containers, and some basic UI

controls to define a wizard-like application layout:

Refer to Code sample: Using containers to design a simple layout for the complete sample application.

Create a containerYou can create a single main container to hold all other UI components. In this task, you define the main container

and add it to the stage.

1. Import the required classes.

import flash.display.Sprite;import flash.events.Event;import flash.text.TextFieldAutoSize;

import flash.text.TextFormat;import qnx.ui.buttons.LabelButton;import qnx.ui.core.*import qnx.ui.data.DataProvider;import qnx.ui.listClasses.List;import qnx.ui.text.Label;import qnx.ui.text.TextInput;

2. Add the following statement to your class, directly before the class signature. This statement sets the stage

width and height, the frrate, and the background color of your application.

[SWF(height="600", width="1024", frameRate="30", backgroundColor="#FFFFFF")]

3. Create an application framework by extending Sprite.

class ContainerTest extends Sprite{

4. Create the main container variable.

private var myMain:Container;

26



29/184

5. Create a constructor for your class, and invoke initializeUI().

public function ContainerTest(){

initializeUI();}

6. Create the function initializeUI. The initializeUI function sets up the UI components that are used by

the application.

private function initializeUI():void{

7. In the initializeUI function, instantiate the main container.

myMain = new Container();

8. In the initializeUI function, set the debug color to a hexadecimal color value. The debugColor property is

useful for visualizing the bounds of each container while you develop your application. Each container can use

a different color value to allow you to tweak the details of the layout.

myMain.debugColor = 0xFFCC00;

9. In the initializeUI function, set the margins and the flow for the container. The margins property takes aVector of four numbers indicating, in order, margins for the left, top, right, and bottom edges of the container.

A component will only overlap a margin if the container runs out of space. The margin values are specified using

literals, however, it's a good idea to use variables to allow you to change a container's margins at run time. The

myMain container's flow property is set to ContainerFlow.HORIZONTAL to specify that the container's

children (which may also be containers) will appear horizontally-opposed, or side-by-side within the container.

myMain.margins = Vector.([20,20,20,20]);myMain.flow = ContainerFlow.HORIZONTAL;

10. In the initializeUI function, add the container to the stage.

addChild(myMain);}

}

Create the orientation handler function

When the user re-orients the device by switching from landscape mode to portrait mode, theStageOrientationEvent.ORIENTATION_CHANGE system event is dispatched and the stage.width and

stage.heightdevice properties are swapped. You must set up an event listener to capture the

StageOrientationEvent.ORIENTATION_CHANGE event in order to rotate and resize your application. In this

task, you create an event listener and a function to handle device orientation changes.

Before you begin: Create a container

1. Import the required classes

27



30/184

import flash.events.StageOrientationEvent;import flash.display.StageAlign;import flash.display.StageScaleMode;

2. Create the onReorient function and add the call to setSize. The setSizemethod calls the layout function

which adjusts the layout of the subcomponents according to the properties that are defined by each parent

container. Call this method only after each container and each subcomponent is defined and added to the display

list. Otherwise, the call will have no effect.

private function onReorient(event:StageOrientationEvent):void{

myContainer.setSize(stage.stageWidth, stage.stageHeight);}

3. In the constructor for your class, create an event listener to handle stage events. In the code sample below, an

event is dispatched whenever a UI component is added to the stage.

addEventListener(Event.ADDED_TO_STAGE, handleAddedToStage);

4. Create the handleAddedToStage. This function is called by the event listener every time an item is added to

the stage. The handleAddedToStage function creates an event listener to listen for reorientation events that

occur whenever the user changes the orientation of the device. When anStageOrientationEvent.ORIENTATION_CHANGE event is detected, theonReorient function is called. The

handleAddedToStage function then explicitly calls the onReorient function.

private function handleAddedToStage(e:Event):void{

removeEventListener(Event.ADDED_TO_STAGE,handleAddedToStage);stage.align = StageAlign.TOP_LEFT;stage.scaleMode = StageScaleMode.NO_SCALE;

stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, onReorient);onReorient(new

StageOrientationEvent(StageOrientationEvent.ORIENTATION_CHANGE,true,true));}

Create and add subcontainers

You can add multiple subcontainers to a parent container. Each subcontainer can use a distinct debug color. Thistask demonstrates how to add three subcontainers, as shown in the diagram.

28



31/184

Before you begin: Create the orientation handler function

1. In the body of the class, add the variables for three subcontainers: mySub, mySubRight, and mySubBottom.

private var mySub:Container;private var mySubRight:Container;

private var mySubBottom:Container;

2. In the initializeUI function, create the first subcontainer: mySub. The mySub container uses a vertical flow

(ContainerFlow.VERTICAL) meaning that all components within this container will appear vertically. The

size and sizeUnit properties determine the size of the subcontainer. In the following code sample, size is

set to 50 and sizeUnit is set to SizeUnit.PERCENT indicating that mySub will take up 50% of the main

container. The default value ofsizeUnit is SizeUnit.PIXELS.

mySub = new Container();

mySub.debugColor = 0xFF3300;mySub.margins = Vector.([20,40,20,40]);mySub.flow = ContainerFlow.VERTICAL;mySub.padding = 10;mySub.size = 50;mySub.sizeUnit = SizeUnit.PERCENT;mySub.align = ContainerAlign.NEAR;

3. In the initializeUI function, create the second subcontainer: mySubRight.The mySubRight subcontainer

takes up the right-side of the stage.

mySubRight = new Container();mySubRight.margins = Vector.([10,10,10,10]);mySubRight.size = 50;mySubRight.debugColor = 0x0033FF;mySubRight.sizeUnit = SizeUnit.PERCENT;mySubRight.flow = ContainerFlow.VERTICAL;mySubRight.align = ContainerAlign.MID;mySubRight.padding = 10;

29



32/184

4. In the initializeUI function, create the third subcontainer: mySubBottom. Set the containment property

to Containment.DOCK_BOTTOM. Docked children are handled first in layout operations. You can dock a

subcomponent to any of the four edges of a container, in the background of the stage

(Containment.BACKGROUND), or you can specify that the component is not repositioned by the parentcontainer (Containment.UNCONTAINED).

mySubBottom = new Container();mySubBottom.margins = Vector.([5,5,5,5]);mySubBottom.debugColor = 0x33FF33;mySubBottom.size = 12;mySubBottom.sizeUnit = SizeUnit.PERCENT;mySubBottom.flow = ContainerFlow.HORIZONTAL;mySubBottom.align = ContainerAlign.FAR;

mySubBottom.containment = Containment.DOCK_BOTTOM;

5. In the initializeUI function, add the subcontainers to the main container. The mySub and mySubRight

containers are added to the stage first, but not positioned. The third subcontainer, mySubBottom is added and

docked to the bottom of the main container. It is positioned first leaving the remainder of the stage for the other

two subcontainers.

myMain.addChild(mySub);myMain.addChild(mySubRight);

myMain.addChild(mySubBottom);

Add UI controls

You can add UI controls to each of the subcontainers.

Before you begin: Create and add the subcontainers.

1. In the body of the class, add the UI control variables.

private var firstLabel:Label;private var secondLabel:Label;private var thirdLabel:Label;private var fourthLabel:Label;

private var firstInput:TextInput;

private var leftButton:LabelButton;

private var rightButton:LabelButton;

2. In the initializeUI function, create and add the UI components.

var labelFormat:TextFormat = new TextFormat();labelFormat = new TextFormat();labelFormat.size = 22;

firstLabel = new Label();

firstLabel.format = labelFormat;firstLabel.text = "First label";

30



33/184

firstLabel.size=35;firstLabel.sizeUnit = SizeUnit.PERCENT;firstLabel.autoSize = TextFieldAutoSize.LEFT;

mySub.addChild(firstLabel);

secondLabel = new Label();secondLabel.format = labelFormat;secondLabel.text = "Second label";secondLabel.size=35;secondLabel.sizeUnit = SizeUnit.PERCENT;secondLabel.autoSize = TextFieldAutoSize.LEFT;

mySub.addChild(secondLabel);

thirdLabel = new Label();thirdLabel.format = labelFormat;thirdLabel.text = "Third label";thirdLabel.size=35;thirdLabel.sizeUnit = SizeUnit.PERCENT;thirdLabel.autoSize = TextFieldAutoSize.LEFT;

mySub.addChild(thirdLabel);

3. In the initializeUI function, create and add the mySubRight subcontainer's UI components. Add a spacerto the container before the first label is added. The spacer provides padding above the label.

firstInput = new TextInput;firstInput.width = 200;

fourthLabel = new Label();fourthLabel.format = labelFormat;fourthLabel.text = "Fourth label:";

fourthLabel.width = 200;fourthLabel.size=30;fourthLabel.sizeUnit = SizeUnit.PIXELS;mySubRight.addChild(new Spacer(60));mySubRight.addChild(fourthLabel);mySubRight.addChild(firstInput);

Adjust the opposite size of UI components

You can adjust the opposite flow size of a UI control by setting the SizeMode property.

Before you begin: Add UI controls

1. In the initializeUI function, create a button. In the following code sample, the Back button specifies

SizeMode.BOTH for its SizeMode property. After a layout call, the Back button will expand vertically (if the

container uses a horizontal flow) to fill the space in the container.

31



34/184

leftButton = new LabelButton();leftButton.label = "Back";leftButton.size = 100;leftButton.sizeUnit = SizeUnit.PIXELS;

leftButton.sizeMode = SizeMode.BOTH;

2. Specify a size for the component (using the size property) to resize the component when a layout call occurs.

In the following example, the Next button does not specify the SizeMode property. This button will not resize

after a layout call.

rightButton = new LabelButton();rightButton.label = "Next";rightButton.size = 100;

Use spacers to define child layout

You can use spacers to position UI components in the direction of the flow of the parent container. A spacer is a

simple, invisible component that adds space between components.

Before you begin: Adjust the opposite size of UI components

1. In the initializeUI function, add a spacer to a container. By default, the spacer's size property is set to

100, and the SizeUnit property is set to SizeUnit.PERCENT indicating that the spacer will take up the entire

container flow, until another component is added. In the following example, the spacer pushes all other

components to the right-edge of the container.

mySubBottom.addChild(new Spacer());

2. Add a button to the container.

mySubBottom.addChild(leftButton);

3. Add another spacer to the container. The spacer, which is instantiated when it is added to the container, is set

to three pixels in size.

mySubBottom.addChild(new Spacer(3,SizeUnit.PIXELS));

4. Add another button.

mySubBottom.addChild(rightButton);

Code sample: Using containers to design a simple layout

The following code listing builds the sample container layout application below:

32



35/184

package{

import flash.display.Sprite;import flash.events.Event;import flash.text.TextFieldAutoSize;import flash.text.TextFormat;

import qnx.ui.buttons.LabelButton;import qnx.ui.core.Container;import qnx.ui.core.ContainerAlign;import qnx.ui.core.ContainerFlow;import qnx.ui.core.Containment;import qnx.ui.core.SizeMode;import qnx.ui.core.SizeUnit;import qnx.ui.core.Spacer;import qnx.ui.data.DataProvider;

import qnx.ui.listClasses.List;import qnx.ui.text.Label;import qnx.ui.text.TextInput;

//Orientation Handlerimport flash.events.StageOrientationEvent;import flash.display.StageAlign;import flash.display.StageScaleMode;


// A simple container layout example

public class ContainerTest extends Sprite{

//containersprivate var myMain:Container;private var mySub:Container;private var mySubRight:Container;

private var mySubBottom:Container;

33



36/184

//the left-side of the screen labelsprivate var firstLabel:Label;private var secondLabel:Label;private var thirdLabel:Label;

private var fourthLabel:Label;

//text input for second sub containerprivate var firstInput:TextInput;

// back and next buttonsprivate var leftButton:LabelButton;private var rightButton:LabelButton;

private var myList:List;

private var myDP:DataProvider;public function ContainerTest(){

addEventListener(Event.ADDED_TO_STAGE,handleAddedToStage);initializeUI();

}

private function handleAddedToStage(e:Event):void{

removeEventListener(Event.ADDED_TO_STAGE,handleAddedToStage);

stage.align = StageAlign.TOP_LEFT;stage.scaleMode = StageScaleMode.NO_SCALE;

// stage is available, we can now listen for eventsstage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE,

onReorient);

// force a reorientation call

onReorient(newStageOrientationEvent(StageOrientationEvent.ORIENTATION_CHANGE,true,true));

}


// create main containermyMain = new Container();

myMain.margins = Vector.([20,20,20,20]);myMain.flow = ContainerFlow.HORIZONTAL;myMain.debugColor = 0xFFCC00;addChild(myMain);

// create subcontainer on left side of the screenmySub = new Container();mySub.margins = Vector.([20,40,20,40]);mySub.flow = ContainerFlow.VERTICAL;mySub.debugColor = 0xFF3300;

mySub.padding = 10;mySub.size = 50;

34



37/184

mySub.sizeUnit = SizeUnit.PERCENT;mySub.align = ContainerAlign.NEAR;

// create second subcontainer on left side of the screenmySubRight = new Container();mySubRight.margins = Vector.([10,10,10,10]);mySubRight.size = 50;mySubRight.debugColor = 0x0033FF;mySubRight.sizeUnit = SizeUnit.PERCENT;mySubRight.flow = ContainerFlow.VERTICAL;mySubRight.align = ContainerAlign.MID;mySubRight.padding = 10;

// create subcontainer as the bottom framemySubBottom = new Container();mySubBottom.margins = Vector.([5,5,5,5]);mySubBottom.debugColor = 0x33FF33;mySubBottom.size = 12;mySubBottom.sizeUnit = SizeUnit.PERCENT;mySubBottom.flow = ContainerFlow.HORIZONTAL;mySubBottom.align = ContainerAlign.FAR;mySubBottom.containment = Containment.DOCK_BOTTOM;

// add subcontainers to main containermyMain.addChild(mySub);myMain.addChild(mySubRight);myMain.addChild(mySubBottom);

// create and add UI components to the left containervar labelFormat:TextFormat = new TextFormat();labelFormat.size = 22;

firstLabel = new Label();

firstLabel.format = labelFormat;firstLabel.text = "First label";firstLabel.size=35;firstLabel.sizeUnit = SizeUnit.PERCENT;firstLabel.autoSize = TextFieldAutoSize.LEFT;

mySub.addChild(firstLabel);

secondLabel = new Label();secondLabel.format = labelFormat;

secondLabel.text = "Second label";secondLabel.size=35;secondLabel.sizeUnit = SizeUnit.PERCENT;secondLabel.autoSize = TextFieldAutoSize.LEFT;

mySub.addChild(secondLabel);

thirdLabel = new Label();thirdLabel.format = labelFormat;thirdLabel.text = "Third label";

thirdLabel.size=35;thirdLabel.sizeUnit = SizeUnit.PERCENT;

35

thi dL b l t Si T tFi ldA t Si LEFT



38/184

thirdLabel.autoSize = TextFieldAutoSize.LEFT;

mySub.addChild(thirdLabel);

// create and add UI components for right sidefirstInput = new TextInput;firstInput.width = 200;

fourthLabel = new Label();fourthLabel.format = labelFormat;fourthLabel.text = "Fourth label:";fourthLabel.width = 200;fourthLabel.size=30;fourthLabel.sizeUnit = SizeUnit.PIXELS;

mySubRight.addChild(new Spacer(60));mySubRight.addChild(fourthLabel);mySubRight.addChild(firstInput);

// create and add back and next buttonsleftButton = new LabelButton();leftButton.label = "Back";leftButton.size = 100;leftButton.sizeUnit = SizeUnit.PIXELS;

leftButton.sizeMode = SizeMode.BOTH;

rightButton = new LabelButton();rightButton.label = "Next";rightButton.size = 100;

// add spacer then button then spacer then buttonmySubBottom.addChild(new Spacer());mySubBottom.addChild(leftButton);mySubBottom.addChild(new Spacer(3,SizeUnit.PIXELS));

mySubBottom.addChild(rightButton);}

private function onReorient(event:StageOrientationEvent):void{

myMain.setSize(stage.stageWidth, stage.stageHeight);}

}}

36

Ch i b tt f li ti 6



39/184

Choosing a button for your application 6The BlackBerry Tablet OS SDK API Reference contains a variety of button implementations. Each implementation

is skinnable and customizable.

The BlackBerry Tablet OS SDK API provides the following button types:

Class Image Description

Button The Button class is the most basic

button type and the base class for

all buttons.

BackButton The BackButton class is a simple

button that contains a back arrow.

You can use this button to provide

navigation in your application.

CheckBox The CheckBox class is a simple

check box implementation.

IconButton The IconButton class is a buttonthat contains an icon.

LabelButton The LabelButton class is button

that contains a String.

RadioButton TheRadioButton class is a simple

radio button implementation. The

radio button remains in the

selected state when pressed. The

listener for the RadioButton

runs when a button is selected.

SegmentedControl TheSegmentedControl class is agroup of interconnected radio

buttons that force the user to

select a single option from a group

or related choices.

37

Cl I D i ti



40/184

Class Image Description

ToggleSwitch The ToggleSwitch class is a

simple toggle switch

implementation where the switchcan be dragged along a track from

one state to another.

Create a toggle buttonYou can use the toggle property to create a simple toggle button. When the toggle property is set to true, the

button maintains the down state when pressed. When the button is pressed again, the button is released and returnsto the up state.


import flash.display.Sprite;qnx.ui.Buttons.Button;


width and height, the frame rate, and the background color of your application.



class MyToggle extends Sprite{

4. In the body of the class, create a variable.

var myButton:Button;

5. Create a constructor for your class and invoke initializeUI()

public function MyToggle(){

initializeUI();}

6. Create a function called initializeUI to set up the toggle switch control.


7. In the initializeUI function, set the position and size of the button. The setPosition method takes the x

and y position of the button, in pixels. The setSize method takes the width and height settings, in pixels.

myButton = new Button();myButton.setPosition(200, 200);myButton.setSize(100, 50);

8. In the initializeUI function, set the toggle property to true.

myButton.toggle = true;

38

9 I th i iti li UI f ti dd t li t f th li k t



41/184

9. In the initializeUI function, add an event listener for the click event.

myButton.addEventListener(MouseEvent.CLICK, myButtonEvent);

10. In the initializeUI function, add the button to the stage.this.addChild(myButton);

}

11. Create themyButtonEvent function. In the following code sample, a trace is sent to the console indicating that

the button has been pressed. The myButton.selected property is called to return the state of the button.

When the button is in the down state (when it has been clicked) the selected property returns true.

function myButtonEvent(event:MouseEvent):void

{trace ("myButton has been clicked, current toggle state is:" +

myButton.selected);}

}

Create a check box


import flash.display.Sprite;import flash.events.MouseEvent;

import qnx.ui.buttons.CheckBox;import qnx.ui.buttons.LabelButton;


width and height, the frame rate, and the background color of your application.



class CheckBoxSample extends Sprite{

4. In the body of your class, create the instance variables.

private var myCheckBox:CheckBox;private var myButton:LabelButton;private var myText:TextInput;

5. Create a constructor for your class and invoke initializeUI().

public function CheckBoxSample(){

initializeUI();}

6. Create the initializeUI function to set up and initialize the UI controls.

39

private function initializeUI():void



42/184


7. In the initializeUI function, create and position the check box. For a check box, the width property sets

the width for both the check box and the text label. The width property is mandatory. You must specify a widthvalue or the check box will not render.

myCheckBox = new CheckBox();

myCheckBox = new CheckBox();myCheckBox.setPosition(128, 300);myCheckBox.width = 150;

8. In the initializeUI function, set the label for the check box. The label property takes a String. The

labelPadding property takes an integer to specify the number of pixels between the check box and the label.

myCheckBox.label = "Disable login";myCheckBox.labelPadding = 5;

9. In the initializeUI function, set the LabelPlacement property. In the code sample below, the label is

placed directly above the CheckBox instance.

myCheckBox.labelPlacement = LabelPlacement.TOP;

10. In the initializeUI function, add an event listener to trap mouse click events. The event listener will call thedisableButton function whenever the user clicks the check box.

myCheckBox.addEventListener(MouseEvent.CLICK, disableButton);

11. In the initializeUI function, add the check box to the stage.

this.addChild(myCheckBox);

12. In the initializeUI function, create the LabelButton and add it to the stage. This label button is disabled

when the user selects the check box.

myButton = new LabelButton();

myButton = new LabelButton();myButton.setPosition(175, 300);myButton.width = 100;myButton.label = "Login";

this.addChild(myButton);

13. In the initializeUI function, create the text input field and add it to the stage.

myText = new TextInput();

myText.setPosition(175, 250);myText.width = 150;

this.addChild(myText);}

40

14 Create thedisableButton function When the user clicks the check box the disableButton function is



43/184

14. Create thedisableButton function. When the user clicks the check box, the disableButton function is

called and the enabled property for the myButton and myText buttons are toggled.

function disableButton(event:MouseEvent):void

{myButton.enabled = !myButton.enabled;myText.enabled = !myText.enabled;

}}

Code sample: Creating a check box

The following code sample uses a CheckBox object to disable a button and text input field.

package{

import flash.display.Sprite;import flash.events.MouseEvent;

import qnx.ui.buttons.CheckBox;import qnx.ui.buttons.LabelButton;import qnx.ui.buttons.LabelPlacement;

import qnx.ui.text.TextInput;


public class CheckBoxSample extends Sprite{

private var myCheckBox:CheckBox;private var myButton:LabelButton;private var myText:TextInput;

public function CheckBoxSample(){

initializeUI();}


myCheckBox = new CheckBox();myCheckBox.setPosition(128, 350);myCheckBox.width = 200;myCheckBox.label = "Disable login";myCheckBox.labelPadding = 5;myCheckBox.labelPlacement = LabelPlacement.TOP;myCheckBox.addEventListener(MouseEvent.CLICK, disableButton);this.addChild(myCheckBox);

myButton = new LabelButton();myButton.setPosition(175, 300);myButton.width = 100;myButton.label = "Login";this.addChild(myButton);

41

myText = new TextInput();T t tP iti (175 250)

RI