Share on Google+Share on Google+

Adobe Flex TabBar

Advertisement
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:

Advertisements

Advertisement

Posted on: January 22, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.