[flexcoders] Re: two tabnavigators with different tab colors?

Tim Hoff Wed, 07 Jun 2006 09:19:27 -0700

As a side note, if you want to control the color (style) of individual tabs in a TabNavigator, you can use the following code in 2.0 (not sure if it works in 1.5).

//=======================================================
// CSS:
//=======================================================

.tab1 {
fill-colors: #99CC00, #CCFF66;
}

.tab2 {
fill-colors: #FFF04B, #FFFFCC;
}

.tab3 {
fill-colors: #8AC7D2, #CBEEF1;
}

//=======================================================
// Action Script and MXML:
//=======================================================

<mx:Script>
        <![CDATA[

   private function setTabStyles():void
      {
          theTabNavigator.getTabAt(0).styleName = "tab1";
          theTabNavigator.getTabAt(1).styleName = "tab2";
          theTabNavigator.getTabAt(2).styleName = "tab3";
       }

  ]]>
    </mx:Script>

<mx:TabNavigator id="theTabNavigator" creationComplete="setTabStyles();"/>

//=======================================================

You can use this to customize any of the available style properties for individual tabs.

Salute,
Tim Hoff

--- In flexcoders@yahoogroups.com, "Jim Robson" <[EMAIL PROTECTED]> wrote:
>
> To change the colors of the tabs themselves, you need to use the
> tabStyleName property (at least that's how it works in Flex 2.0). The
> following code gives one blue TabNavigator with blue tabs, and one red
> TabNavigator with red tabs:
>
>
>
> <?xml version="1.0" encoding="utf-8"?>
>
> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
>
> <mx:Style>
>
> .MyTabNavigator {
>
> background-color:#FF0000;
>
> tabStyleName: myTabStyle;
>
> }
>
>
>
> .MyTab {
>
> background-color:#0033FF;
>
> tabStyleName: blueTab;
>
> }
>
> .blueTab {
>
> fill-colors: #0033FF,#0033FF;
>
> }
>
>
>
> .myTabStyle {
>
> fill-colors: #ff0000, #ff0000;
>
> tabStyleName: redTab;
>
> }
>
> .redTab {
>
> fill-colors: #FF0000,#FF0000;
>
> }
>
>
>
> </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>
>
>
>
> _____
>
> From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
> Behalf Of shemeshkale
> Sent: Wednesday, June 07, 2006 10:44 AM
> To: flexcoders@yahoogroups.com
> Subject: [flexcoders] Re: two tabnavigators with different tab colors?
>
>
>
> i m trying to change the colors of the Tabs themselves.
> not the TabNavigator background.
> it works? really? weird?
> plz try again with this code then dont work for me - flex 1.5
> u should get 2 TabNavigators with white backgrounds
> the top should have red Tabs and the bottom Blue Tabs.
> if its not working replace ".myTabStyle1" with "Tab" to see desired
> effect.
>
> <?xml version="1.0" encoding="utf-8"?>
> <mx:Application xmlns:mx="http://www.macromed
> <http://www.macromedia.com/2003/mxml> ia.com/2003/mxml"
> width="100%" height="100%">
> <mx:Style>
> .MyTabNavigator {
> background-color:#ffffff;
> tabStyleName: myTabStyle1;
> }
>
> .MyTab {
> background-color:#ffffff;
> tabStyleName: myTabStyle2;
> }
>
> .myTabStyle1 {
> fill-colors: #ff0000, #ff0000;
> }
>
> .myTabStyle2 {
> fill-colors: #0000ff, #0000ff;
> }
>
> </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:HBox label="Tab title 3"></mx:HBox>
> <mx:HBox label="Tab title 4"></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:HBox label="Tab title 3" ></mx:HBox>
> <mx:HBox label="Tab title 4"></mx:HBox>
> </mx:TabNavigator>
> </mx:VBox>
> </mx:Application>
>
> --- In [EMAIL PROTECTED] <mailto:flexcoders%40yahoogroups.com> ups.com,
> "Jim Robson" jim.robson@ wrote:
> >
> > Your code works fine for me. I get one red TabNavigator and one blue
> > TabNavigator. I am using Flex 2.0 - I don't know if something changed
> > relative to TabNavigator styles since 1.5.
> >
> >
> >
> > _____
> >
> > From: [EMAIL PROTECTED] <mailto:flexcoders%40yahoogroups.com> ups.com
> [mailto:[EMAIL PROTECTED] <mailto:flexcoders%40yahoogroups.com> ups.com]
> On
> > Behalf Of shemeshkale
> > Sent: Wednesday, June 07, 2006 9:59 AM
> > To: [EMAIL PROTECTED] <mailto:flexcoders%40yahoogroups.com> ups.com
> > Subject: [flexcoders] Re: two tabnavigators with different tab colors?
> >
> >
> >
> > oops..
> > here is the code again: NOT WORKING.
> >
> > <?xml version="1.0" encoding="utf-8"?>
> > <mx:Application xmlns:mx="http://www.macromed
> > <http://www.macromed <http://www.macromedia.com/2003/mxml>
> ia.com/2003/mxml> ia.com/2003/mxml"
> > width="100%" height="100%">
> > <mx:Style>
> > .MyTabNavigator {
> > background-color:#FF0000;
> > tabStyleName: myTabStyle;
> > }
> >
> > .MyTab {
> > background-color:#0033FF;
> > }
> >
> > .myTabStyle {
> > fill-colors: #ff0000, #ff0000;
> > }
> >
> > </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>
> >
> > --- In [EMAIL PROTECTED] <mailto:flexcoders%40yahoogroups.com>
> ups.com,
> > "Jim Robson" <jim.robson@> wrote:
> > >
> > > I think you have an extra dot in your CSS style definitions. There
> > should be
> > > only one dot before each style name, as follows:
> > >
> > >
> > >
> > > .MyTabNavigator {
> > > background-color:#FF0000;
> > > tabStyleName: myTabStyle;
> > > }
> > >
> > >
> > >
> > > _____
> > >
> > > From: [EMAIL PROTECTED] <mailto:flexcoders%40yahoogroups.com>
> ups.com
> > [mailto:[EMAIL PROTECTED] <mailto:flexcoders%40yahoogroups.com>
> ups.com]
> > On
> > > Behalf Of shemeshkale
> > > Sent: Wednesday, June 07, 2006 9:22 AM
> > > To: [EMAIL PROTECTED] <mailto:flexcoders%40yahoogroups.com> ups.com
> > > Subject: [flexcoders] Re: two tabnavigators with different tab colors?
> > >
> > >
> > >
> > > i thought of something like this but its not working!
> > > here is my code: what m i doing wrong?
> > >
> > > <?xml version="1.0" encoding="utf-8"?>
> > > <mx:Application xmlns:mx="http://www.macromed
> > > <http://www.macromed <http://www.macromed
> <http://www.macromedia.com/2003/mxml> ia.com/2003/mxml>
> > ia.com/2003/mxml> ia.com/2003/mxml"
> > > width="100%" height="100%">
> > > <mx:Style>
> > > ..MyTabNavigator {
> > > background-color:#FF0000;
> > > tabStyleName: myTabStyle;
> > > }
> > >
> > > ..MyTab {
> > > background-color:#0033FF;
> > > }
> > >
> > > ..myTabStyle {
> > > fill-colors: #ff0000, #ff0000;
> > > }
> > >
> > > </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>
> > >
> > > --- In [EMAIL PROTECTED] <mailto:flexcoders%40yahoogroups.com>
> > ups.com,
> > > "Jim Robson" <jim.robson@> wrote:
> > > >
> > > > I think you may be looking for tabStyleName:
> > > >
> > > >
> > > >
> > > > TabNavigator {
> > > >
> > > > fillColors: #FF0000, #CC0000;
> > > >
> > > > tabStyleName: myTabStyle;
> > > >
> > > > }
> > > >
> > > > .myTabStyle {
> > > >
> > > > fillColors: #FF0000, #CC0000;
> > > >
> > > > }
> > > >
> > > >
> > > >
> > > > _____
> > > >
> > > > From: [EMAIL PROTECTED] <mailto:flexcoders%40yahoogroups.com>
> > ups.com
> > > [mailto:[EMAIL PROTECTED] <mailto:flexcoders%40yahoogroups.com>
> > ups.com]
> > > On
> > > > Behalf Of shemeshkale
> > > > Sent: Wednesday, June 07, 2006 8:12 AM
> > > > To: [EMAIL PROTECTED] <mailto:flexcoders%40yahoogroups.com>
> ups.com
> > > > Subject: [flexcoders] two tabnavigators with different tab colors?
> > > >
> > > >
> > > >
> > > > hi,
> > > > i have two TabNavigators in flex 1.5
> > > > i want to give each of them different tab colors.
> > > > fillColors is not working on a TabNavigator but only on Tab in the
> > > > style declartion.
> > > > so how do i give each navigator different tab colors?
> > > >
> > >
> >
>

__._,_.___

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

SPONSORED LINKS

`Web site design development`	`Computer software development`	`Software design and development`
`Macromedia flex`	`Software development best practice`

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.

__,_._,___

[flexcoders] Re: two tabnavigators with different tab colors?

Reply via email to