There are several options available to programmatically control several areas of the screen layout. These options include the layout of the application; whether or not to show the action bar in View-Based or Tabbed Applications; and whether or not to show the application in full screen mode. A sample application can be seen in Figure 6-13.
Layout
The options for your application layout are portrait (where the application is displayed vertically on the device) or landscape (where the application is displayed horizontally). 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 code below 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.selected Value is equal to portrait, the stage.setAspectRatio method is called and StageAspec tRatio.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 can be seen in Figure 6-14.
Full Screen
Utilizing the entire screen for your mobile application is an option that you can set within your application, and there are a few choices when this change is requested. To put an application in full screen mode, you will need to set the displayState property on the stage. There are several static properties within the StageDisplayState class that can be used for this.
The code below includes a CheckBox with the label “FullScreen”. This CheckBox is not selected by default, as that is the normal state of the application. When clicking on this CheckBox to check or uncheck the value, the checkbox1_clickHandler is called. If the checkbox is checked, the stage.displayState is set to StageDisplayState. FULL_SCREEN_INTERACTIVE. If the checkbox is not checked, the stage.displayState is set to StageDisplayState.NORMAL.
ActionBar
The ActionBar is the built-in navigation system that comes along with the View-Based or Tabbed Application layouts. This bar does consume significant screen real estate. Therefore, the option to hide and show this bar programmatically is available to you as the developer.
The code below includes a CheckBox with the label “Show ActionBar”. This CheckBox is 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 can be seen in Figure 6-16, which shows a full screen application 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[
protectedfunction checkbox1_clickHandler(event:MouseEvent):void
{
if(event.target.selected){
stage.displayState =
StageDisplayState.FULL_SCREEN_INTERACTIVE;
} else {
stage.displayState = StageDisplayState.NORMAL;
}
}
protectedfunction checkbox2_clickHandler(event:MouseEvent):void
{
this.actionBarVisible = event.target.selected;
}
protectedfunctionradiobutton1_clickHandler(event:MouseEvent):void
{
if(orientation.selectedValue == “portrait”){
stage.setAspectRatio(StageAspectRatio.PORTRAIT);
} elseif(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=”checkbox1_clickHandler(event)” label=”Full Screen”/>
<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>
