Aug 13 2009
uiBTabView Example Using “xp” Theme
Here is a live demo featuring the uiBTabView component from the Aspire UI library:
- uiBTabView places tabs at the bottom. To place tabs at the top, use the uiTabView component.
- The mini tab scroller is built-in and appears if there is not enough space to display all the tabs.
- The tab focus order is automatically set up so it flows from top (content area) to bottom (active tab).
- When a tab has focus, the arrow keys can be used to change the active tab.
See also: uiBTabView usage notes
BottomTabViewDemo class
package { import com.ghostwire.ui.containers.uiBox; import com.ghostwire.ui.containers.uiBTabView; import com.ghostwire.ui.containers.uiScrollPane; import com.ghostwire.ui.controls.uiCheckBox; import com.ghostwire.ui.controls.uiImage; import com.ghostwire.ui.controls.uiLabel; import com.ghostwire.ui.controls.uiText; import com.ghostwire.ui.controls.uiTextArea; import com.ghostwire.ui.data.uiModel; import com.ghostwire.ui.enums.POSITION; import com.ghostwire.ui.managers.uiSkins; import flash.display.Sprite; import flash.events.Event; public class BottomTabViewDemo extends Sprite { public function BottomTabViewDemo() { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(evt:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); // ** uncomment to use "classic" theme ** // uiSkins.initialize("classic"); // ** optional but recommended ** // ** let assets preload before starting application ** uiSkins.manager.addEventListener(Event.INIT,main); } private function main(evt:Event):void { // ** main application code ** // ** page 1 ** var page1:uiBox = new uiBox(); page1.fillX = page1.fillY = true; page1.vertical = true; page1.spacing = 10; page1.addChild(new uiCheckBox("Option A","star.png",POSITION.BOTTOM)); page1.addChild(new uiCheckBox("Option B","star.png",POSITION.BOTTOM)); page1.addChild(new uiCheckBox("Option C","star.png",POSITION.BOTTOM)); // ** page 2 ** var page2:uiTextArea = new uiTextArea("this is a text area"); page2.fillX = page2.fillY = true; // ** page 3 ** var page3:uiScrollPane = new uiScrollPane(); page3.fillX = page3.fillY = true; page3.content.addChild(new uiImage("flower.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", image:"star.png", child:page3 } ); model.addItem( { label:"Page Four", child:new uiText("Page Four") } ); model.addItem( { label:"Page Five", child:new uiText("Page Five") } ); // ** create the tabview ** var tbv:uiBTabView = new uiBTabView(); tbv.model = model; tbv.uitabviewbar.itemRenderer = uiLabel; tbv.uitabviewbar.dataMap = { text:"label", image:"image", textPosition:"textPosition" } tbv.setSize(280, 180); tbv.move(10, 10); // ** add to display list ** addChild(tbv); } } }
- The tab pages are defined using a data model object ((
uiModelobject), which is then set as the value of themodelproperty of the tab view component. - The third tab has an icon in the tab. In the example above, the
uiLabelclass is used as theitemRenderer(by default theuiTextclass is used) – this allows icons to be displayed in the tabs. - The
dataMapproperty is responsible for mapping properties in the data objects to the properties in the renderer class.
var model:uiModel = new uiModel(); model.addItem( { label:"Page One", child:page1 } ); model.addItem( { label:"Page Two", child:page2 } ); model.addItem( { label:"Page Three", image:"star.png", child:page3 } ); model.addItem( { label:"Page Four", child:new uiText("Page Four") } ); model.addItem( { label:"Page Five", child:new uiText("Page Five") } ); var tbv:uiBTabView = new uiBTabView(); tbv.model = model;
tbv.uitabviewbar.itemRenderer = uiLabel;
tbv.uitabviewbar.dataMap = { text:"label", image:"image", textPosition:"textPosition" }
Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of the components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework. You may experiment with the various features by downloading a trial version.
