RE: [flexcoders] Re: TabNavigator tabs style

Philippe Maegerman Tue, 26 Jul 2005 03:46:47 -0700

I couldn't manage to do it with styles, but came up with some actionscript ;)

It will style all the TabNavigator tabs, but you could easily changeit to update only one tab by passing it's index as an argument ;))

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:Script>
<![CDATA[
function setTabStyle(tabObj, cRadius){
for(var i = 0; i < tabObj.numChildren; i++){
tabObj.getChildAt(i).setStyle('cornerRadius', cRadius);
}
}
</mx:Script>
<mx:TabNavigator creationComplete="setTabStyle(event.target.tabBar, 10);">
<mx:HBox label="tab1" width="200" height="200"></mx:HBox>
<mx:HBox label="tab2" width="200" height="200"></mx:HBox>
</mx:TabNavigator>
<mx:TabNavigator creationComplete="setTabStyle(event.target.tabBar, 20);">
<mx:HBox label="tab1" width="200" height="200"></mx:HBox>
<mx:HBox label="tab2" width="200" height="200"></mx:HBox>
</mx:TabNavigator>
</mx:Application>

Philippe Maegerman

Web developer

+32 2 400 40 39

+32 472 35 28 10

Avoir des rêves, c'est continuer d'exister...

From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Sreejith Unnikrishnan
Sent: mardi 26 juillet 2005 12:19
To: [email protected]
Subject: Re: [flexcoders] Re: TabNavigator tabs style

Hi,

You did not say whether you tried and it worked :-)

Run thecode below. Look out for the following.

Corner-radius is the radius applied to the Navigator and NOT the tabs (desired) when applied using styleName
Comment and UnComment the Tab style to see the difference. All the tabs have a corner-radius of 0.

Now back to the question, if I want to assign corner-radius to only ONE tabNavigator, how do I do it!

====================== CODE TO EXPERIMENT ===============================
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" width="100%" height="100%">
<mx:Style>
MyTabNavigator {
   tab-height: 30;
   tab-width: 87;
   border-color: #cccccc;
   background-color:#FF0000;
   corner-radius:16;
   }

MyTab {
   corner-radius: 8;
   fill-colors: #003366, #f6eeee;
   selected-fill-colors: #0033cc, #ffffff;
   border-color: #000000;
   color: #000000;
   background-color:#0033FF;
   }

/*
Tab {
   corner-radius: 0;
   }
*/

</mx:Style>

<mx:VBox width="100%" height="100%">
<mx:TabNavigator width="100%" height="50%" styleName="MyTabNavigator">
<mx:HBox label="Tab title 1"></mx:HBox>
<mx:HBox label="Tab title 2"></mx:HBox>
</mx:TabNavigator>
<mx:TabNavigator width="100%" height="50%" styleName="MyTab">
<mx:HBox label="Tab title 1" ></mx:HBox>
<mx:HBox label="Tab title 2"></mx:HBox>
</mx:TabNavigator>
</mx:VBox>
</mx:Application>

============================= END OF CODE ======================================

bhaq1972 wrote:

Hi Sreejith, > Infact the question is very simple. > > How do you set corner-radius = 10 to one TabNavigator and corner- radius > = 0 on another in the same application! > I've given up! :-( > have you tried Matt's recommendation i.e. use the styleName property? eg (btw i added your stylesheet entries (MyTabNavigator and MyTab) into main.css) <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:Style source="main.css"/> <mx:VBox> <mx:TabNavigator width="100%" height="50%" styleName="MyTabNavigator"> <mx:HBox label="Tab title 1"> <mx:TextInput text="Text1"/> </mx:HBox> <mx:HBox label="Tab title 2"> <mx:TextInput text="Text2"/> </mx:HBox> </mx:TabNavigator> <mx:TabNavigator width="100%" height="50%" styleName="MyTab"> <mx:HBox label="Tab title 1" > <mx:TextInput text="Text1"/> </mx:HBox> <mx:HBox label="Tab title 2"> <mx:TextInput text="Text2"/> </mx:HBox> </mx:TabNavigator> </mx:VBox> </mx:Application> regards bod

-- Flexcoders Mailing List FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com

YAHOO! GROUPS LINKS

Visit your group "flexcoders" on the web.
To unsubscribe from this group, send an email to: [EMAIL PROTECTED]
Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service.

------------------------------------------------------------------
**STATEMENT OF CONFIDENTIALITY**

This e-mail and any attached files are confidential and intended solely for the use of the individual to whom it is addressed. If you have received this email in error please send it back to the person that sent it to you. Any views or opinions presented are solely those of author and do not necessarily represent those the Emakina Company. Unauthorized publication, use, dissemination, forwarding, printing or copying of this email and its associated attachments is strictly prohibited.

We also inform you that we have checked that this message does not contain any virus but we decline any responsability in case of any damage caused by an a non detected virus.
------------------------------------------------------------------

RE: [flexcoders] Re: TabNavigator tabs style

Reply via email to