Developing BlackBerry Tablet Applications : OS Interactions - Screen Options

There are several options available to programmatically control several areas of the screen layout. These options determine the layout of the application, whether to show the action bar in View-Based or Tabbed application, and whether to show the application in full-screen mode. This sample application is shown in Figure 1.

1. Layout

The options for your application layout are portrait, where the application shows vertically in the device; or landscape, where the application shows horizontally in the device. Setting the aspect ratio by calling the setAspectRatio method on the stage can change the application’s layout. The StageAspectRatio class contains two static values that should be used to set the aspect ratio.

The following code includes a RadioGroup with the ID of orientation. There are two RadioButton components in this group with values of portrait and landscape. When clicking on one of these radio buttons, the radiobutton1_clickHandler method is called. Within this method, the orientation.selectedValue is tested. If orientation.selectedValue is equal to portrait, the stage.setAspectRatio method is called and StageAspectRatio.PORTRAIT is passed in. If orientation.selectedValue is equal to landscape, the stage.setAspectRatio method is called and StageAspectRatio.LANDSCAPE is passed in. The results are pictured in Figure 2.

2. ActionBar

The ActionBar is the built-in navigation that comes along with the View-Based or Tabbed application layouts. This bar consumes significant screen real estate. Therefore, the option to hide and show it programmatically is available to you as the developer.

The following code includes a CheckBox with the label “Show ActionBar”. This CheckBox is set to “selected” by default, as that is the normal state of the ActionBar. When clicking on this CheckBox to check or uncheck the value, the checkbox2_clickHandler is called. The actionBarVisible property of this view is set to the value of the CheckBox. The results are pictured in Figure 3, which shows an application that is in full screen with the ActionBar hidden.

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">

    <fx:Script>
        <![CDATA[
            protected function checkbox2_clickHandler(event:MouseEvent):void
            {
                this.actionBarVisible = event.target.selected;
            }

            protected function radiobutton1_clickHandler(event:MouseEvent):void
            {
                if(orientation.selectedValue == "portrait"){
                    stage.setAspectRatio(StageAspectRatio.PORTRAIT);
                } else if(orientation.selectedValue == "landscape"){
                    stage.setAspectRatio(StageAspectRatio.LANDSCAPE);
                }
            }

        ]]>
    </fx:Script>

    <fx:Declarations>
        <s:RadioButtonGroup id="orientation"/>
    </fx:Declarations>

    <s:VGroup top="20" left="10">
        <s:CheckBox click="checkbox2_clickHandler(event)" label="Show ActionBar"
                  selected="true"/>
        <s:RadioButton groupName="orientation" value="portrait" label="Portrait"
                       click="radiobutton1_clickHandler(event)" selected="true"/>
        <s:RadioButton groupName="orientation" value="landscape" label="Landscape"
                       click="radiobutton1_clickHandler(event)"/>
    </s:VGroup>


</s:View>

					  

Figure 1. Screen Options Application

Figure 2. Landscape Mode

Figure 3. ActionBar Hidden