Home Tutorial Flex Flex4 Components TabBar in Flex4

 
 

Share on Google+Share on Google+
TabBar in Flex4
Posted on: May 12, 2010 at 12:00 AM
Advertisement
The Spark TabBar control defines a horizontal row of related buttons. This Control uses a itemClickevent event which is used to select a tab from TAbBar.

TabBar control in flex4:

The Spark TabBar control defines a horizontal row of related buttons. This Control uses a itemClickevent  event which is used to select a tab from TAbBar. The TabBar control displays tabs in horizontal row . You provide data for a tabBar control by its dataProvider property. Dataporvider is the default property of TabBar control. The tag of TabBr control is <s:TabBar>.

Example:

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">

<s:Panel title="TabBab Control Example" width="325" height="260" x="3"

 y="0" color="#990000">

<s:TabBar dataProvider="{vst}" color="BLack" width="172" height="28"

 x="0" y="0"/>

<mx:ViewStack id="vst"

borderStyle="solid" width="287" height="177" y="27">

<s:NavigatorContent id="html" label="HTML">

<s:BorderContainer width="100%" height="100%" borderWeight="1"

cornerRadius="10" dropShadowVisible="true" y="0">

<s:Label text="HTML is a Hyper Text Markup Language." x="-1" y="16"/>

</s:BorderContainer>

</s:NavigatorContent>

<s:NavigatorContent id="java" label="JAVA">

<s:BorderContainer width="100%" height="100%" borderWeight="1"

cornerRadius="10" dropShadowVisible="true">

<s:Label text="JAVA is an object oriented programming language." x="-1"

 y="16" color="Blue"/>

</s:BorderContainer>

</s:NavigatorContent>

<s:NavigatorContent id="unix" label="UNIX">

<s:BorderContainer width="100%" height="100%" borderWeight="1"

cornerRadius="10" dropShadowVisible="true">

<s:Label text="UNIX is an operating system." x="-1" y="16" color="Green"/>

</s:BorderContainer>

</s:NavigatorContent>

</mx:ViewStack>

</s:Panel>

</s:Application>

This is the example for TabBar control. Please select a tab in the TabBar control.

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Advertisement

Related Tags for TabBar in Flex4:


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: May 12, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com