uiBTabView

uiBTabView

Required: Aspire UI Components Lite Edition Version 1.1+

The uiBTabView component is used to display a collection of pages - the component displays the page corresponding to the currently selected tab in a shared content area. This component is a composite consisting of a uiFrame and uiTabViewBar.

This component is essentially the same as uiTabView but the tabs are placed at the bottom instead of at the top.

Using uiBTabView

ActionScript 3.0 Example

import com.ghostwire.ui.containers.uiBox;
import com.ghostwire.ui.containers.uiScrollPane;
import com.ghostwire.ui.containers.uiTabView;
import com.ghostwire.ui.controls.uiImage;
import com.ghostwire.ui.controls.uiText;
import com.ghostwire.ui.controls.uiTextArea;
import com.ghostwire.ui.data.uiModel;
 
// ** page 1 **
var page1:uiBox = new uiBox();
page1.fillX = page1.fillY = true;
page1.vertical = true;
page1.addChild(new uiText("some text"));
page1.addChild(new uiText("more text"));
page1.addChild(new uiText("even more text"));
 
// ** page 2 **
var page2:uiTextArea = new uiTextArea();
page2.fillX = page2.fillY = true;
 
// ** page 3 **
var page3:uiScrollPane = new uiScrollPane();
page3.fillX = page3.fillY = true;
page3.content.addChild(new uiImage("gardenpic.jpg"));
 
// the data model specifying the pages **
var model:uiModel = new uiModel();
model.addItem({label:"Page One", child:page1});
model.addItem({label:"Page Two", child:page2});
model.addItem({label:"Page Three", child:page3});
 
// ** create the tabview **
var tbv:uiBTabView = new uiBTabView();
tbv.model = model;
tbv.setSize(200,200);
 
// ** add to display list **
addChild(tbv);

User Interaction

The tabs in the uiTabViewBar should be regarded as a mutually exclusive group of buttons. Only the currently selected tab in the group is included in the tab focus chain. While a tab button is in focus, the user can use the following keys to interact with the component:

Key	Action
Left/Up Arrow	Selects the tab to the left (looping to the last tab on the right).
Right/Down Arrow	Selects the tab to the right (looping to the first tab on the left).
Shift+Tab	Moves focus to previous UI control in the tab focus chain (which will be the last focusable child object in the content area if any).
Tab	Moves focus to the next UI control in the tab focus chain.

API Reference

For more information on the members of the com.ghostwire.ui.containers.uiBTabView class, please refer to the API Reference.