In this tutorial you will come to know about TabBar of Flex.You may have used tab many times, tab bar provides such facility so we can include more than one window in a single window. TabBar control helps us to control the active child container of a ViewStack container.

Adobe Flex TabBar:

You may have used tab many times, tab bar  provides such facility so we can include more than one window in a single window. TabBar control helps us to control the active child container  of a ViewStack container.

TabBar control is similar to a TabNavigator container, but without having any children.

Adobe Flex TabBar Example1:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Panel title="TabBar Example" width="20%" height="25%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" horizontalCenter="10" verticalCenter="10">

<mx:Text text="Select tab from the tab bar"/>

<mx:TabBar id="tabBar" >

<mx:dataProvider>

<mx:String>Flex</mx:String>

<mx:String>SilverLight</mx:String>

<mx:String>JavaFx</mx:String>

</mx:dataProvider>

</mx:TabBar>

</mx:Panel>

</mx:Application>

 

Output:

Example2:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

import mx.controls.TabBar;

import mx.events.ItemClickEvent;

[Bindable]

private var tech:ArrayCollection=new ArrayCollection([

{label:"MicroSoft",data:"SilverLight"},

{label:"Sun",data:"JavaFx"},

{label:"Adobe",data:"Flex"}

]);

private function tabDisp(event:ItemClickEvent):void{

var tabbar:TabBar=TabBar(event.currentTarget);

txtAra.text="Index is="+event.index+ "\nCompany is="+event.label+"\nTechnology is="+tabbar.dataProvider[event.index].data;

}

]]>

</mx:Script>

<mx:Panel x="0" y="0" width="344" height="158" title="Tab Content" horizontalAlign="center" verticalAlign="middle">

<mx:TabBar id="tab" itemClick="tabDisp(event);">

<mx:dataProvider>

{tech}

</mx:dataProvider>

</mx:TabBar>

<mx:TextArea id="txtAra" width="60%" height="100%"/>

</mx:Panel>

</mx:Application>

Output:

Related Tags for Adobe Flex TabBar: