8 Replies Latest reply on Jan 19, 2011 10:00 AM by grenvoy

    Color NavigatorContent In TabNavigator

    Devtron Level 3

      Hello,

       

      I have a TabNavigator with a few NavigatorContent definitions within it.

       

      I am able to set the label to text, and the backgroundColor to green, but how can I set it to color?

       

      <s:NavigatorContent label="Green" width="100%" height="100%"  backgroundColor="green" />

       

      ^ This paints the entire tab green. I need to paint only the header green. How can I do that?

       

      I need each tab heading to have a different color. Any suggestions?

        • 1. Re: Color NavigatorContent In TabNavigator
          Subeesh Arakkan Level 4

          I am not sure if  there is a direct method. This is a simple trick I use normally.

           

          <mx:TabNavigator id="tn" width="100%" height="100%"
                  creationComplete="tn_creationCompleteHandler(event)">
                  <s:NavigatorContent label="Green" backgroundColor="green" backgroundAlpha="0"/>
                  <s:NavigatorContent label="Red" backgroundColor="red" backgroundAlpha="0"/>
              </mx:TabNavigator>

           

          private function tn_creationCompleteHandler(event:FlexEvent):void
          {
              for( var i:int = 0 ; i< tn.numChildren ; i++)
              {
                  tn.getTabAt(i).setStyle("chromeColor", ( tn.getChildAt(i) as NavigatorContent).getStyle("backgroundColor"));
              }
          }

           

           

          tabNavigator.getTabAt( index ) gives you the reference to the tab. you could even define a style in the css file and set it

          • 2. Re: Color NavigatorContent In TabNavigator
            Devtron Level 3

            I am trying to set it in the CSS but having no luck.

             

            Here is the CSS:

            .myTabStyle {
                tabStyleName: "myTabs";      
            }

             

            .myTabs {
                backgroundColor: #FF0080;
                fillColor: #FF0080;  /* this is the tab widget itself, not the content */
            }

             

             

            Here is my Tab definition:

            <mx:TabNavigator width="100%" height="100%" styleName="myTabStyle" />

             

             

            This is not working. It makes my second tab square and grey.

            Here is a screenshot of the problem:

            LineSeries.png

             

            I have tried to use "fillColors" too but same problem.

             

            I will try to use your suggestion Subeesh, but do you see anything wrong with my CSS approach?? I cant

            • 3. Re: Color NavigatorContent In TabNavigator
              Subeesh Arakkan Level 4

              try chromeColor instead of fillColor


              • 4. Re: Color NavigatorContent In TabNavigator
                Devtron Level 3

                Thank you Subeesh.

                 

                I have tried everything and nothing works.

                 

                I went ahead and removed the FLEX theme we use in our appearance settings. When I remove our theme and use the default Spark theme, your example works and all the other examples work.


                This leads me to believe that using the GraphiteGraphical theme is the reason I cannot change the tab colors.

                 

                How can I override the theme? This theme is really becoming a problem because it limits our programming in ActionScript. There is not much I can do to work around this. Any ideas?

                 

                If I remove the theme, much of the layout is removed. How can I re-add the layout from the theme's definition? I would need to implement custom CSS, derived from the Graphite Graphical theme, correct?

                 

                I think the moral of this story is, if youre new to FLEX, do not use pre-defined themes, even if they look cool, because you cannot override them. Atleast I have not figured out a way.

                • 5. Re: Color NavigatorContent In TabNavigator
                  Subeesh Arakkan Level 4

                  there is no need to change the theme. try this

                   

                  .myTabs {
                              backgroundColor: #FF0080;
                              skin:ClassReference('mx.skins.spark.ButtonSkin');
                              chromeColor: #FF0080;  /* this is the tab widget itself, not the content */
                          }

                  • 6. Re: Color NavigatorContent In TabNavigator
                    Devtron Level 3

                    Thank you Subeesh! Once again, you have proven you are the CSS master of this Adobe Forum! GOOD JOB MAN! This works great!

                     

                    tabNavigator-Coloring-screenshot.png

                     

                     

                    Before I mark this as the correct answer, Do you know how to set this programmatically in AS?

                     

                    Would it be:

                     

                    tn.setStyle("chromeColor", "FF0080");

                    or

                    tn.setStyle("backgroundColor", "FF0080");

                     

                    Anyways, regardless, this is awesome!!

                    • 7. Re: Color NavigatorContent In TabNavigator
                      Devtron Level 3

                      ok, I got it to work after a little wrestling match.

                       

                      tabNavigator-Coloring-screenshot--working.png

                       

                      Here is the solution I ended up using:

                      tab.setStyle("chromeColor", _colors[i]);

                       

                      I had to set the style of "chromeColor" for each button in the TabNavigator.

                       

                      Subeesh is a FLEX legend!!

                      • 8. Re: Color NavigatorContent In TabNavigator
                        grenvoy

                        I have a similar problem I'm struggling with.   I'm using Halo, and I have a tab navigator that I dynamically add tabs too.

                         

                        At first I want all the tabs to have a normal style

                         

                        mx|TabNavigator

                        {

                        tab-width: 110;

                        horizontal-gap: 3;

                        tabStyleName: tabStyle;

                        selected-tab-text-style-name: tabSelectedText;

                        }

                         

                        .tabStyle

                        {

                        font-size: 10;

                        font-weight: bold;

                        corner-radius: 10;

                        fill-colors: #6486AC, #FFFFFF;

                        fill-alphas: 1.0, 1.0;

                        background-color: #FFFFFF; /*6486AC*/

                        }

                         

                         

                        As I add my tabs in ActionScript, I may want a certain tab to be Red, Yellow, Etc

                         

                        .tabStyleRed

                        {

                        font-size: 10;

                        font-weight: bold;

                        corner-radius: 10;

                        fill-colors: red, #FFFFFF;

                        fill-alphas: 1.0, 1.0;

                        background-color: #FFFFFF;

                        }

                         

                        The probem is that I can't get the fill color to change.  I have tried this.setStyle("tabStyleName", "tabStyleRed"), I have tried super.setStyle.  I just can't get it to change the style.  Any ideas?