Adobe

Products

Acrobat

Creative Cloud

Creative Suite

Digital Marketing Suite

Digital Publishing Suite

Elements

Photoshop

Touch Apps

Student and Teacher Editions

More products

Solutions

Creative tools for business

Digital marketing

Digital media

Education

Financial services

Government

Web Experience Management

Flex mobile development tips and tricks – Part 3: Hiding and positioning your app’s tabs and hiding the ActionBar

by Holly Schinsky

devgirl.org

Content

Hiding the ActionBar and tabs
Positioning the tabs at the top of your app
Where to go from here

Created

10 October 2011

Requirements

Prerequisite knowledge

Prior experience building applications—but not necessarily mobile apps—with Flex will help you make the most of this article.

User level

Intermediate

Required products

Flash Builder (Download trial)

This is Part 3 of a multipart series of articles that cover tips and tricks for Flex mobile development. Part 1 focused on handling data when switching between views and between application executions. Part 2 covered styling the ActionBar and tab components in your mobile application. In this part, you'll learn how to control the visibility of the ActionBar and tab components, and you'll learn how to move the tab components to the top of your application.

Hiding the ActionBar and tabs

When you're working on a Flex mobile application based on TabbedViewNavigatorApplication, you may find that you need to hide the ActionBar or tabs. You may, for example, want to open more screen space for a particular view, or simply configure the display based on a user's preferences. In these instances, you can use two properties available on the View class to achieve the desired effect: actionBarVisible and tabBarVisible .

To illustrate how actionBarVisible and tabBarVisible work, I created a simple mobile app based on TabbedViewNavigatorApplication. If you'd like see the full source code and try the application yourself, download the sample files for this article and import the project in Adobe Flash Builder.

There are three views in the code: View1, View2, and View3. The first view has buttons to toggle the visibility of the ActionBar and TabBar controls.

As you can see from the View1 code below, you set actionBarVisible and tabBarVisible to true or false to control their visibility:

        <?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="View1"> 
  
    <fx:Script> 
        <![CDATA[ 
            protected function onActionBarClickHandler(event:MouseEvent):void 
            { 
                if (actionBarVisible) 
                { 
                    this.actionBarVisible = false; 
                    b.label="Show ActionBar"; 
                } 
                else { 
                    this.actionBarVisible = true; 
                    b.label="Hide ActionBar"; 
                } 
            } 
  
            protected function onTabBarClickHandler(event:MouseEvent):void 
            { 
                if (tabBarVisible) 
                { 
                    this.tabBarVisible = false; 
                    b2.label="Show TabBar"; 
                } 
                else { 
                    this.tabBarVisible = true; 
                    b2.label="Hide TabBar"; 
                } 
            } 
        ]]>
    </fx:Script> 
    <s:VGroup width="100%" height="100%" horizontalAlign="center" top="50"> 
        <s:TextArea text="This is View 1" editable="false"/> 
        <s:HGroup> 
            <s:Button id="b" label="Hide ActionBar" click="onActionBarClickHandler(event)"/> 
            <s:Button id="b2" label="Hide TabBar" click="onTabBarClickHandler(event)"/> 
        </s:HGroup> 
    </s:VGroup> 
</s:View>

    

When switching between views–whether via the tabs or programmatically–the visibility of those items is only affected on View1 (see Figure 1).

Figure 1. The application at startup (left), with ActionBar hidden (center), and with ActionBar and tabs hidden (left).

The other views remain unaffected (see Figure 2).

Figure 2. View2, which does not change when the buttons in View1 are clicked.

None of this involves the main application code, as you can see below:

        <?xml version="1.0" encoding="utf-8"?> 
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                                  xmlns:s="library://ns.adobe.com/flex/spark"> 
    <s:ViewNavigator label="View1" width="100%" height="100%" firstView="views.View1"/> 
    <s:ViewNavigator label="View2" width="100%" height="100%" firstView="views.View2"/> 
    <s:ViewNavigator label="View3" width="100%" height="100%" firstView="views.View3"/> 
</s:TabbedViewNavigatorApplication>

    

If you build and test this application yourself, you may notice that when you hide the ActionBar, switch to another view, and then switch back, the ActionBar will be displayed again when you return to View1. This happens because the view is recreated when you switch back to it. If you want the ActionBar to always be invisible on a certain view, you can use a few different approaches. One approach is to set destructionPolicy="never" on the view; once the ActionBar is hidden it will not be shown again since the view will not be recreated. Another approach is to set viewActivate="actionBarVisible=false" on the root View tag so that it will be hidden each time the view is activated. One issue with using this approach, however, is that when the view is activated the user will actually see the ActionBar briefly before it is removed, which may be undesirable. A third approach is to add code to your root tabbed application file to set the active view's actionBarVisible property to false for the ViewNavigator component on the tabbedNavigator IndexChangeEvent , such as:

        <?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                         xmlns:s="library://ns.adobe.com/flex/spark"     
                         applicationComplete="onApplicationComplete(event)">    
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.events.IndexChangeEvent;
protected function onApplicationComplete (event:FlexEvent):void{
    vn1.actionBar.visible=false;               
    tabbedNavigator.addEventListener(IndexChangeEvent.CHANGE,onChange);       
}
            
protected function onChange(event:IndexChangeEvent):void
{
    if (event.newIndex==0)
        vn1.activeView.actionBarVisible=false;
                
}
            
]]>
</fx:Script>
    
    
    <s:ViewNavigator id="vn1" label="View1" width="100%" height="100%" firstView="views.View1"/>
    <s:ViewNavigator label="View2" width="100%" height="100%" firstView="views.View2"/>
    <s:ViewNavigator label="View3" width="100%" height="100%" firstView="views.View3"/>
</s:TabbedViewNavigatorApplication>

    

Positioning the tabs at the top of your app

By default, of course, the tab buttons for a Flex 4.5 TabbedViewNavigatorApplication are at the bottom, as you can see in the second sample application for this article (see Figure 3).

Figure 3. The default position for the tabs.

However, there may be times when you prefer to have your tabs at the top of the screen instead.

Follow these steps to move the tabs to the top of your application:

Find and copy the TabbedViewNavigatorSkin.as class into your mobile project in a folder called skins. On my Mac, I can find this skin class here (for Flash Builder 4.5.1): /Applications/Adobe Flash Builder 4.5/sdks/4.5.1/frameworks/projects/mobiletheme/src/spark/skins/mobile/TabbedViewNavigatorSkin.as.
Set your CSS style to use this skin class either in your main application file as below or in an external style sheet:

        	<fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        s|TabbedViewNavigator
        {
            skinClass: ClassReference("skins.TabbedViewNavigatorSkin");
        }
</fx:Style>

    

In your newly copied TabbedViewNavigatorSkin class, change the package at the top of the class to reflect its new location in your local skins folder; replace the first package line from package spark.skins.mobile to package skins.
Scroll to the bottom of the skin class and locate the layoutContents() function. This is where the tab bar and content layout is done. The content in this case refers to the children of your View classes, such as the UI components and the results List in the application.

        override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
{
    super.layoutContents(unscaledWidth, unscaledHeight);
 
    var tabBarHeight:Number = 0; 
 
    if (tabBar.includeInLayout)
    {
        tabBarHeight = Math.min(tabBar.getPreferredBoundsHeight(), unscaledHeight);
        tabBar.setLayoutBoundsSize(unscaledWidth, tabBarHeight);
        tabBar.setLayoutBoundsPosition(0, unscaledHeight - tabBarHeight);
        tabBarHeight = tabBar.getLayoutBoundsHeight(); 
 
        // backgroundAlpha is not a declared style on ButtonBar
        // TabbedViewNavigatorButtonBarSkin implements for overlay support
        var backgroundAlpha:Number = (_isOverlay) ? 0.75 : 1;
        tabBar.setStyle("backgroundAlpha", backgroundAlpha);
    }
 
    if (contentGroup.includeInLayout)
    {
        var contentGroupHeight:Number = (_isOverlay) ? unscaledHeight : Math.max(unscaledHeight - tabBarHeight, 0);
        contentGroup.setLayoutBoundsSize(unscaledWidth, contentGroupHeight);
        contentGroup.setLayoutBoundsPosition(0, 0);
    }
}

    

The tabBar.setLayoutBoundsPosition(x,y) function is the key here. If you modify the code to set the position of the y variable to 0 , the tabs will be placed at the top of the application:

        if (tabBar.includeInLayout)
{
    tabBarHeight = Math.min(tabBar.getPreferredBoundsHeight(), unscaledHeight);
    tabBar.setLayoutBoundsSize(unscaledWidth, tabBarHeight);
    tabBar.setLayoutBoundsPosition(0,0);
    tabBarHeight = tabBar.getLayoutBoundsHeight(); 
 
    // backgroundAlpha is not a declared style on ButtonBar
    // TabbedViewNavigatorButtonBarSkin implements for overlay support
    var backgroundAlpha:Number = (_isOverlay) ? 0.75 : 1;
    tabBar.setStyle("backgroundAlpha", backgroundAlpha);
}
if (contentGroup.includeInLayout)
{
    var contentGroupHeight:Number = (_isOverlay) ? unscaledHeight : Math.max(unscaledHeight - tabBarHeight, 0);
    contentGroup.setLayoutBoundsSize(unscaledWidth, contentGroupHeight);
    contentGroup.setLayoutBoundsPosition(0, 0);
}

    

Figure 4. The app with the tabs on top.

Now if you want to get rid of the ActionBar to create more screen space (see Figure 5), you just need to go into the View classes and set actionBarVisible to false ; for example:

        <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" title="Search Location..." actionBarVisible="false" xmlns:json="com.adobe.serialization.json.*" >

Figure 5. The app with tabs on top and no ActionBar.

Where to go from here

For more details on changing the look of the tabs and ActionBar see Flex mobile development tips and tricks – Part 2: Styling your application's tabs and ActionBar.

Also, if you're interested in creating Alert PopUps and other skinnable PopUps, be sure to check out Part 4 of this series.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

Tutorials & Samples

Tutorials

Samples

Flex User Forum

07/25/2011	Flash Player Debug Issues - Safari 5.1 & Chrome 13
04/22/2012	Loader png - wrong color values in BitmapData
04/22/2012	HTTPService and crossdomain.xml doesn't work as expected
04/23/2012	Memory related crashes in Flex application

Flex Cookbook

04/06/2012	How to detect screen resize with a SkinnableComponent
02/29/2012	Embed Stage3D content inside Flex application components
02/15/2012	Custom WorkFlow Component
02/09/2012	Using Camera with a MediaContainer instead of VideoDisplay

Flex mobile development tips and tricks – Part 3: Hiding and positioning your app’s tabs and hiding the ActionBar

by Holly Schinsky

Content

Created

Page tools

Requirements

Prerequisite knowledge

User level

Required products

Hiding the ActionBar and tabs

Positioning the tabs at the top of your app

Where to go from here

More Like This

Tutorials & Samples

Tutorials

Samples

Flex User Forum

Flex Cookbook

Products

Solutions

Industries

Help

Learning

Ways to buy

Downloads

Company