0 Replies Latest reply on Jan 21, 2011 1:19 PM by grenvoy

    Changing Tab Color

    grenvoy

      I have been struggling for a while with trying to change the color of a tab, after it's been displayed.  Some background is that i have a multi tab window.  If something happens in one of the windows, I want to bring attention to that tab and color the tab red.


      I am dynamically adding the tabs to the tab navigator from  database table.  I read them in with their data and when I have them all I build up the tab navigator.  My TabObject is really a Canvas that I have extended.

       

       

                      private function AddTabsToTabNavigator():void

                      {

                          var lIsFirst:Boolean = true;

                          for each ( var lTab:TabHandler in mTabDictionary )

                          {

                              // Create our Frame Canvas that we are going to add to the Tab Navigator

                              var lTabItem:TabObject         = new TabObject();

                           

                              lTabItem.name                  = lTab.GetTabName();

                              lTabItem.SetRefreshTime(lTab.GetTabRefreshInterval());

      //lTabItem.setStyle( "tabStyleName", "tabStyleGreen" );

      //lTabItem.styleName = Constants.TAB_STYLE_GREEN;

      //TAB_NAVIGATOR.invalidateDisplayList();

      lTabItem.setStyle( "backgroundColor", "green");                       

                              TAB_NAVIGATOR.addChild( lTabItem );

                          }

                      }

       

       

      I've tried a number of things comented out here.  I have a CSS and I can set the initial color of the tab no problem.

       

      mx|TabNavigator
      {
          tab-width: 110;
          horizontal-gap: 3;
          tabStyleName: tabStyleYellow;
          selectedTabTextStyleName: tabSelectedText;
      }

      .tabStyleYellow
      {
          font-size: 10;
          corner-radius: 10;
          fill-colors: yellow, #FFFFFF; /* #9D9DA0, #FFFFFF */
          fill-alphas: 1.0, 1.0;
          background-color: #FFFFFF; /*6486AC*/
      }

       

      But I don't see how I can go back and change the tab color.   Am I missing something

      Here is another way I've tried.

       

                      public function ChangeTabStyle( aTabName:String, aStyleName:String ):void
                      {
                           var lActiveTab:TabObject = TAB_NAVIGATOR.getChildByName( aTabName ) as TabObject;
      //                    var lTab:DisplayObject = TAB_NAVIGATOR.getChildAt( mCurrentTabSelected ) as Tab
                          if ( null != lActiveTab )
                          {
                              lActiveTab.setStyle( "tabStyleName", "tabStyleBlue" );
      //                        lActiveTab.styleName = aStyleName;
      //                        lActiveTab.setStyle("fillColors", ["red", "white"]);
      //                        lActiveTab.setStyle("backgroundColor", "red");
                          }
                      }