uiBTabView Example Using “classic” Theme

sunny — Fri, 14 Aug 2009 01:52:50 +0000

This demo is the same as that in the previous post uiBTabView Example Using “xp” Theme, but we are using a different theme this time:

Within the application code, a single line of code determines which theme to use:

uiSkins.initialize(theme);

If the uiSkins.initialize() call is omitted, the “default” theme is used.

uiBTabView Example Using “xp” Theme

sunny — Thu, 13 Aug 2009 13:02:31 +0000

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 ((uiModel object), which is then set as the value of the model property of the tab view component.

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;

The third tab has an icon in the tab. In the example above, the uiLabel class is used as the itemRenderer (by default the uiText class is used) – this allows icons to be displayed in the tabs.

tbv.uitabviewbar.itemRenderer = uiLabel;

The dataMap property is responsible for mapping properties in the data objects to the properties in the renderer class.

tbv.uitabviewbar.dataMap = { text:"label", image:"image", textPosition:"textPosition" }

GhostWire Studios » TabView

uiBTabView Example Using “classic” Theme

uiBTabView Example Using “xp” Theme