Home Tutorial Flex Flex-components Adobe Flex TabBar

 
 

Share on Google+Share on Google+
Adobe Flex TabBar
Posted on: January 22, 2010 at 12:00 AM
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:

Advertisement

Related Tags for Adobe Flex TabBar:


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.

Posted on: January 22, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com