Developing BlackBerry Tablet Applications : OS Interactions - Native QNX Components

RIM has been nice enough to include an SWC library file within their SDK so that we can use their native components within our Flex applications. They have also provided the classes in this SWC to get some additional information about the environment. The next example demonstrates some of what is available.

To enable these components within your application, simply check the box that says “Add platform specific libraries to library path” within the Preferences→Flex Build Packaging→BlackBerry Tablet OS. See Figure 1.

Figure 1. Enable qnx libraries

Let’s examine the following code. Because the qnx library components do not inherit from Flex base UI components, you will have to declare them either in the declarations block and within ActionScript and then to a UIComponent wrapper, or create the instance of them with ActionScript and add them with ActionScript to a UIComponent wrapper.

Within the fx:Declarations block, I have defined several qnx components:

• qnx.ui.buttons.LabelButton

• qnx.ui.buttons.IconButton

• qnx.ui.buttons.BackButton

• qnx.ui.buttons.CheckBox

• qnx.ui.progress.ActivityIndicator

• qnx.ui.picker.Picker

• qnx.ui.buttons.ToggleSwitch

• qnx.ui.progress.PercentageBar

There is an event listener defined for both the LabelButton and the IconButton.

Within my fx:Script block, I have defined an Array of days, as well as some methods to handle events. On application complete, the application1_applicationCompleteHandler method is called. Within this method, the LabelButton is added as a child of the ui1 UIComponent holder; the icon is set for the IconButton and it is added to ui2; the BackButton is added to ui3; the CheckBox is added to ui4; the ActvityIndicator is added to ui5; the dataProvider for the Picker is set and it is added to ui6; the ToggleSwitch is added to ui7; and the PercentageBar is added to ui8. The results are shown in Figure 2.

Clicking on the LabelButton calls the showAlertDialog method. Within this method, a qnx.dialog.AlertDialog is created, the title and message are defined, two buttons are added, the dialogSize is set to the static property of DialogSize.SIZE_MEDIUM, an event listener is added, and finally, the show method is called. The results are shown in Figure 3.

Clicking on the IconButton calls the showInfoDialog method. Within this method, a qnx.dialog.AlertDialog is created. This time, the message is set by reading some information from some of the non-ui classes that are included within the qnx package. The battery level is read from the qnx.system.Device.device.batteryLevel property; the battery state is read from the qnx.system.Device.device.batteryState property; the display height is read from the qnx.display.Display.display.getDisplayHeight(0) method; the display width is read from the qnx.display.Display.display.getDisplayWidth(0) method; the operating system is read from the qnx.system.Device.device.os property; and the qnx.utils.TimeFormatter.formatSeconds method is used to format a time string. The results are shown in Figure 4.

Using these platform-specific components can certainly have benefits, but it can also render your application unusable on other device operating systems (e.g., Android, iOS), so be careful when using platform-specific classes.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               applicationComplete="application1_applicationCompleteHandler(event)"
               xmlns:buttons="qnx.ui.buttons.*"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:display="qnx.ui.display.*"
               xmlns:progress="qnx.ui.progress.*"
               xmlns:picker="qnx.ui.picker.*">

    <fx:Declarations>
        <buttons:LabelButton label="Show Alert" id="labelButton" 
click="showAlertDialog(event)"/>
        <buttons:IconButton id="iconButton" click="showInfoDialog(event)"/>
        <buttons:BackButton label="Back" id="backButton"/>
        <buttons:CheckBox label="Yes" id="checkBox" width="100"/>
        <progress:ActivityIndicator id="activityIndicator"/>
        <picker:Picker id="dayPicker"/>
        <buttons:ToggleSwitch id="toggleSwitch" defaultLabel="Yes" selectedLabel="No"/>
        <progress:PercentageBar label="Saving" progress=".5" id="percentageBar" 
width="200"/>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[

            import mx.events.FlexEvent;
            import qnx.dialog.AlertDialog;
            import qnx.dialog.DialogSize;
            import qnx.display.Display;
            import qnx.display.IowWindow;
            import qnx.system.Device;
            import qnx.ui.data.DataProvider;
            import qnx.utils.TimeFormatter;

            private var arr:Array = [{label: "Monday", data:0}, 
                            {label: "Tuesday", data:1}, 
                            {label: "Wednesday", data:2}, 
                            {label: "Thursday", data:3}, 
                            {label: "Friday", data:4}, 
                            {label: "Saturday", data:5}, 
                            {label: "Sunday", data:6}];

            protected function application1_applicationCompleteHandler
(event:FlexEvent):void
            {
                ui1.addChild(labelButton);
                iconButton.setIcon("infoIcon.png");
                ui2.addChild(iconButton);
                ui3.addChild(backButton);
                ui4.addChild(checkBox);
                ui5.addChild(activityIndicator);
                dayPicker.dataProvider = new DataProvider([new DataProvider(arr)]);
                ui6.addChild(dayPicker);
                ui7.addChild(toggleSwitch);
                ui8.addChild(percentageBar);
            }

            private function showAlertDialog(event:Event):void
            {
                var alert:AlertDialog = new AlertDialog();
                alert.title = "Question";
                alert.message = "Do you love writing Flex 4.5" +
                              "code for BlackBerry Tablet OS?";
                alert.addButton("Hell Yeah!");
                alert.addButton("No way");
                alert.dialogSize= DialogSize.SIZE_MEDIUM;
                alert.addEventListener(Event.SELECT, alertButtonClicked);
                alert.show(IowWindow.getAirWindow().group);
            }

            private function showInfoDialog(event:Event):void
            {
                var alert:AlertDialog = new AlertDialog();
                alert.title = "Details";
                var info:String = "Battery Level: " + Device.device.batteryLevel + "\n" +
                    "Battery State: " + Device.device.batteryState + "\n" +
                    "Display Height: " + Display.display.getDisplayHeight(0) + "\n" +
                    "Display Width: " + Display.display.getDisplayWidth(0) + "\n" +
                    "Operating System: " + Device.device.os     + "\n" +
                    "Time Formatter: " + TimeFormatter.formatSeconds(22222, true );
                alert.message = info;
                alert.addButton("Close");
                alert.dialogSize= DialogSize.SIZE_MEDIUM;
                alert.show(IowWindow.getAirWindow().group);
            }

            private function alertButtonClicked(event:Event):void
            {
                trace("Button Clicked Index: " + event.target.selectedIndex);
            }

        ]]>
    </fx:Script>


    <mx:UIComponent id="ui1" y="10"/>
    <mx:UIComponent id="ui2" y="60"/>
    <mx:UIComponent id="ui3" y="110"/>
    <mx:UIComponent id="ui4" y="160"/>
    <mx:UIComponent id="ui5" y="210"/>
    <mx:UIComponent id="ui6" y="310"/>
    <mx:UIComponent id="ui7" y="410"/>
    <mx:UIComponent id="ui8" y="460"/>

</s:Application>

					  

Figure 2. qnx components

Figure 3. qnx.dialog.AlertDialog component

Figure 4. various OS data displayed in AlertDialog