BTA Flexing

My passion RIAs…………..Shardul Singh Bartwal

Selected tab skining in Flex 3 Tabbar

Posted by Shardul Singh Bartwal on November 22, 2010

I was trying to skin the tab-bar in flex 3.Was facing some issue,as I dot find any particular property for skinning the selected tab,although there is a property ‘selectedTabTextStyleName’ for the style of the selected text. But ultimately it is done.Below is the code for the skinning of the selected tab of the tab-bar hope you will find it worth of your purpose.Below is the same code. Please feel free to give your idea if you have done this by any other way.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	 layout="vertical">
<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
	
	         import mx.controls.tabBarClasses.Tab

		[Bindable]
		private var arrayCollection : ArrayCollection = new ArrayCollection([
		{lbl:'Football'},
		{lbl:'Cricket'},
		{lbl:'BollyBall'}
		])
		
		private function setTabSkin():void
		{
		  var tab:Tab = tabBar.getChildAt(tabBar.selectedIndex) as Tab;			  
		  tab.setStyle("fillColors", ["#0xBBBBBB", "#EEEEEE"]);
                  tab.setStyle("backgroundColor", "#999999");
                  tab.setStyle("borderColor", "#000000");
                  tab.setStyle("themeColor", "#222222");
		}
	]]>
</mx:Script>
	<mx:TabBar id="tabBar" itemClick="setTabSkin()" selectedIndex="0" creationComplete="setTabSkin()" dataProvider="{arrayCollection}" labelField="lbl"/>

</mx:Application>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: