uiTabView

uiTabView

The uiTabView 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.

When using uiTabView, the tabs are always placed at the top. To place the tabs at the bottom, use uiBTabView.

Using uiTabView

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:uiTabView = new uiTabView();
tbv.model = model;
tbv.setSize(200,200);
 
// ** add to display list **
addChild(tbv);

Content

The content of a uiTabView container is defined using a uiModel object¹⁾.

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});
 
var tbv:uiTabView = new uiTabView();
tbv.model = model;

NOTE: Although in sample code we use addItem(), we would recommend using the addItems() method instead in your application code:

var model:uiModel = new uiModel();
model.addItems(
{label:"Page One", child:page1},
{label:"Page Two", child:page2},
{label:"Page Three", child:page3}
);
 
var tbv:uiTabView = new uiTabView();
tbv.model = model;

The data model is accessed via the model property. To modify the data model, you must use members of the uiModel object directly; components in the Aspire UI library generally do not implement members that are already implemented in the data model.

For example, to remove the first item (page) from the uiTabView instance:

tbv.model.removeItemAt(0);

The currently displayed page can be accessed via the read-only content property.

Size

The uiTabView has a fixed default size of 200px width and 200px height if it does not have any child when it is realized (added to the stage), otherwise the default size will depend on the requirements of the contents.

Use the setSize(width,height) method to set preferred dimensions (and skip computation of the size requirements of child pages).

var tbv:uiTabView = new uiTabView();
tbv.setSize(250,300);

The component will always allocate enough vertical space for the uiTabViewBar (displaying the tabs) first; the balance is then allocated to the uiFrame (displaying the page).

If there is not enough horizontal space to display all the tabs, the uiTabViewBar will show a uiStepper instance for scrolling the tabs left/right.

"uitabviewbar"

The tab buttons displayed by the uiTabView component are handled by an instance of the uiTabViewBar class. You can access this instance via the uitabviewbar property. This is useful if you need greater control over the tab buttons.

For example, in cases where you may want to change the itemRenderer to uiLabel (instead of the default uiText)²⁾:

var tbv:uiTabView = new uiTabView();
tbv.model = model;
tbv.uitabviewbar.itemRenderer = uiLabel;

Other members of the uiTabViewBar can be accessed similarly. For example, if you need to change the dataMap property:

var tbv:uiTabView = new uiTabView();
tbv.model = model;
tbv.uitabviewbar.itemRenderer = uiLabel;
tbv.uitabviewbar.dataMap = {text:"label",image:"image",textPosition:"textPosition"};

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.
Tab	Moves focus to the next UI control in the tab focus chain (which will be the first focusable child object in the content area if any).

TabViewDemo

ActionScript 3.0 TabViewDemo class

 1: package
 2: {
 3:     import com.ghostwire.ui.containers.uiBox;
 4:     import com.ghostwire.ui.containers.uiScrollPane;
 5:     import com.ghostwire.ui.containers.uiTabView;
 6:     import com.ghostwire.ui.controls.uiImage;
 7:     import com.ghostwire.ui.controls.uiLabel;
 8:     import com.ghostwire.ui.controls.uiText;
 9:     import com.ghostwire.ui.controls.uiTextArea;
10:     import com.ghostwire.ui.data.uiModel;
11:     import com.ghostwire.ui.enums.POSITION;
12:     import com.ghostwire.ui.managers.uiSkins;
13:
14:     import flash.display.Sprite;
15:     import flash.events.Event;
16:
17:     public class TabViewDemo extends Sprite
18:     {
19:         public function TabViewDemo()
20:         {
21:             addEventListener(Event.ADDED_TO_STAGE,init);
22:         }
23:
24:         private function init(evt:Event):void
25:         {
26:             // ** optional but recommended **
27:             stage.scaleMode    = "noScale";
28:             stage.align        = "TL";
29:
30:             // ** uncomment to use "classic" theme **
31:             // uiSkins.initialize("classic");
32:
33:             // ** optional but recommended **
34:             // ** let assets preload before starting application **
35:             uiSkins.manager.addEventListener(Event.INIT,main);
36:         }
37:
38:         private function main(evt:Event):void
39:         {
40:             // ** main application code **
41:             // ** page 1 **
42:             var page1:uiBox = new uiBox();
43:             page1.fillX = page1.fillY = true;
44:             page1.vertical = true;
45:             page1.addChild(new uiText("some text"));
46:             page1.addChild(new uiText("more text"));
47:             page1.addChild(new uiText("even more text"));
48:
49:             // ** page 2 **
50:             var page2:uiTextArea = new uiTextArea();
51:             page2.fillX = page2.fillY = true;
52:
53:             // ** page 3 **
54:             var page3:uiScrollPane = new uiScrollPane();
55:             page3.fillX = page3.fillY = true;
56:             page3.content.addChild(new uiImage("garden.jpg"));
57:
58:             // the data model specifying the pages **
59:             var model:uiModel = new uiModel();
60:             model.addItem({label:"Page One",image:"alert.png", child:page1, textPosition:POSITION.BOTTOM});
61:             model.addItem({label:"Page Two",child:page2});
62:             model.addItem({label:"Page Three",child:page3});
63:
64:             // ** create the tabview **
65:             var tbv:uiTabView = new uiTabView();
66:             tbv.model = model;
67:             tbv.uitabviewbar.itemRenderer = uiLabel;
68:             tbv.uitabviewbar.dataMap = {text:"label",image:"image",textPosition:"textPosition"}
69:
70:             // ** add to display list **
71:             addChild(tbv);
72:         }
73:         // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
74:         // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
75:     }
76: }

TabViewDemo.as

API Reference

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

¹⁾ Attempting to call addChild() or addChildAt() directly on the uiTabView instance itself will throw an error

²⁾ Use the uiLabel as the itemRenderer if you wish to use icons and text as the labels.