11 Replies Latest reply on Jan 5, 2010 2:31 PM by cyber0897

    how do you get rid of the gradient in the tab of a tabnavigator?

    cyber0897 Level 1

      hey guys... so like the title suggests... i need to get rid of the gradient in the tabs of the tabnavigator...

      i just watch them to be of certain color...

       

      like the unselected tab will have color #333333

      and the selected will have color #ffffff

       

       

      any ideas??

        • 1. Re: how do you get rid of the gradient in the tab of a tabnavigator?
          Peter deHaan Level 4

          Try creating a custom Tab skin.

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                         xmlns:s="library://ns.adobe.com/flex/spark" 
                         xmlns:mx="library://ns.adobe.com/flex/mx">
              
              <fx:Style>
                  .tabStyles {
                      color: red;
                      skin: ClassReference("skins.CustomTabSkin");
                  }
              </fx:Style>
              
              <mx:TabNavigator id="tabNav"
                               tabStyleName="tabStyles"
                               width="400" height="100"
                               x="20" y="20">
                  <mx:VBox label="Red" />
                  <mx:VBox label="Orange" />
                  <mx:VBox label="Yellow" />
                  <mx:VBox label="Green" />
                  <mx:VBox label="Blue" />
              </mx:TabNavigator>
              
          </s:Application>
          
          

           

           

           

          And my custom skins/CustomTabSkin.mxml file looks like this:

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       minWidth="21" minHeight="21"
                       alpha.disabledStates="0.5">
              
              <fx:Script>
                  override protected function initializationComplete():void
                  {
                      useChromeColor = true;
                      super.initializationComplete();
                  }
              </fx:Script>
              
              <!-- states -->
              <s:states>
                  <s:State name="up" />
                  <s:State name="over" />
                  <s:State name="down" />
                  <s:State name="disabled" stateGroups="disabledStates"/>
                  <s:State name="selectedUp" stateGroups="selectedStates" />
                  <s:State name="selectedOver" stateGroups="selectedStates" />
                  <s:State name="selectedDown" stateGroups="selectedStates" />
                  <s:State name="selectedDisabled" stateGroups="disabledStates, selectedStates" />
              </s:states>
              
              <!-- layer 1: fill -->
              <s:Rect left="1" right="1" top="1" bottom="0" >
                  <s:fill>
                      <s:SolidColor color="#333333" color.selectedStates="#FFFFFF" />
                  </s:fill>
              </s:Rect>
              
              <!-- layer 2: highlight stroke -->
              <s:Rect left="1" right="1" top="1" bottom="1" alpha=".22" >
                  <s:stroke>
                      <s:LinearGradientStroke rotation="90">
                          <s:GradientEntry color="0xFFFFFF" alpha="1" />
                          <s:GradientEntry color="0xD8D8D8" alpha="1" />
                      </s:LinearGradientStroke>
                  </s:stroke>
              </s:Rect>
              
              <!-- layer 4: border - unselected only -->
              <s:Rect left="0" right="0" top="0" bottom="0" excludeFrom="selectedStates" >
                  <s:stroke>
                      <s:SolidColorStroke color="0x696969" alpha="1" />
                  </s:stroke>
              </s:Rect>
              
              <!-- layer 5: border - selected only -->
              <s:Rect left="0" width="1" top="0" bottom="0" includeIn="selectedStates" >
                  <s:fill>
                      <s:SolidColor color="0x696969" alpha="1" />
                  </s:fill>
              </s:Rect>
              <s:Rect left="1" right="1" top="0" height="1" includeIn="selectedStates" >
                  <s:fill>
                      <s:SolidColor color="0x696969" alpha="1" />
                  </s:fill>
              </s:Rect>
              <s:Rect width="1" right="0" top="0" bottom="0" includeIn="selectedStates" >
                  <s:fill>
                      <s:SolidColor color="0x696969" alpha="1" />
                  </s:fill>
              </s:Rect>
              
          </s:SparkSkin>
          

           

           

          Peter

           

          • 2. Re: how do you get rid of the gradient in the tab of a tabnavigator?
            cyber0897 Level 1

            hey peter... im trying that but i get an error on the classReference line...


            the error says

            "Description    Resource    Path    Location    Type
            Error parsing stylesheet: /Users/tkanagala/web projects/troubleshootingLogin/src/modules/apx32/apx32TroubleShoot.mxml    apx32TroubleShoot.mxml    troubleshootingLogin/src/modules/apx32    line 19    Flex Problem"

             

            and

             

            "Description    Resource    Path    Location    Type
            Invalid CSS syntax(Unexpected token: '.').    apx32TroubleShoot.mxml    troubleshootingLogin/src/modules/apx32    line 35    Flex Problem
            "

             

            im not sure if its my file structure or something... so i included an image of my file structure...

             

            and the code i have for the css is

                    .tabStyle{
                        skin:ClassReference(skins.tabNavSkin);
                        fontSize:10;
                    }

            • 3. Re: how do you get rid of the gradient in the tab of a tabnavigator?
              Peter deHaan Level 4

              This forum always eats quotes, but I'd make sure you have quotation marks around the ClassReference bits:

               

              skin:ClassReference("skins.tabNavSkin");

               

               

              Peter

              1 person found this helpful
              • 4. Re: how do you get rid of the gradient in the tab of a tabnavigator?
                cyber0897 Level 1

                hmm weird... i tried the quotes before and it didnt work... and i tried it now and that worked lol weird...

                 


                anyways... what exactly do you use the useChromeColor for? becuase i dont see any reference to that id...

                • 5. Re: how do you get rid of the gradient in the tab of a tabnavigator?
                  cyber0897 Level 1

                  hey peter, anotehr quick question... im trying to change the color of the labels on the tab... which end up being whilte, i needthem to be red

                  i tried doing color:red in the class, and that didnt work...

                  • 6. Re: how do you get rid of the gradient in the tab of a tabnavigator?
                    Peter deHaan Level 4

                    I believe my example showed some red text.

                    What do you see when you run my example with the latest nightly Flex 4 SDK build?

                     

                    Peter

                    • 7. Re: how do you get rid of the gradient in the tab of a tabnavigator?
                      cyber0897 Level 1

                      hey peter... when i run ur code with the latest nightly build i do get the text as red, but the rollover of that text is black... i dont know how to get rid of that... i tried doing "textRollOverColor" but that didnt do the trick...

                       

                      i basically need my tab to look like the one in the image i just attached to this post...

                       

                       

                      and also, after updating to the latest nightly build i changed my "halo" to "mx" all around... and now i seem to have lost the rollover functionality aswell as the video element...

                       

                      i changed the video element to "videoDisplay" and it did not work...   any suggestions??

                       

                       

                      thanks peter..

                      • 8. Re: how do you get rid of the gradient in the tab of a tabnavigator?
                        Peter deHaan Level 4

                        The textRollOverColor style works for me (4.0.0.13101):

                         

                        <?xml version="1.0" encoding="utf-8"?>
                        <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                       xmlns:s="library://ns.adobe.com/flex/spark" 
                                       xmlns:mx="library://ns.adobe.com/flex/mx">
                            <fx:Style>
                                @namespace s "library://ns.adobe.com/flex/spark";
                                @namespace mx "library://ns.adobe.com/flex/mx";
                                
                                mx|Tab {
                                    fontWeight: bold;
                                    color: red;
                                    textRollOverColor: haloOrange;
                                }
                            </fx:Style>
                            
                            <mx:TabNavigator id="tabNav"
                                             width="400" height="100"
                                             x="20" y="20">
                                <mx:VBox label="Red" />
                                <mx:VBox label="Orange" />
                                <mx:VBox label="Yellow" />
                                <mx:VBox label="Green" />
                                <mx:VBox label="Blue" />
                            </mx:TabNavigator>
                            
                        </s:Application>
                        

                         

                        Peter

                        • 9. Re: how do you get rid of the gradient in the tab of a tabnavigator?
                          cyber0897 Level 1

                          hmm... yeah that worked for me... but initially i noticed that the halo color did not disply for the first few seconds... andthen i saw it work just fine after...

                           

                          oh and sorry i forgot to include the image last time... i need my tabs to look like the image in my attachment..

                           

                          i tried to do that but i was unsuccessful.. i changed some code around.. the code i ended up with is

                           

                                  .tabStyle{
                                      skin:ClassReference("skins.tabNavSkin");
                                      color:#e9e9e9;
                                      textRollOverColor:#e9e9e9;
                                      fontSize:12;
                                  }

                          <mx:TabNavigator id="tabNav" width="275" tabStyleName="tabStyle" fontWeight="bold" height="400" paddingTop="0"
                                                   tabWidth="137.5" creationPolicy="all" borderVisible="false">

                          and in the tab skin file i changed

                           

                              <!-- layer 1: fill -->
                              <s:Rect left="1" right="1" top="1" bottom="0" >
                                  <s:fill>
                                      <s:SolidColor color="#e9e9e9" color.selectedStates="#d4d4d4" />
                                  </s:fill>
                              </s:Rect>

                           

                          and this does not show me the right colors... im at a loss right now lol thank you for urhelp tho peter... relaly appretiate it!!

                          • 10. Re: how do you get rid of the gradient in the tab of a tabnavigator?
                            Peter deHaan Level 4

                            I dont really know if I'm following what you're trying to do.

                            I think the code is working fine. You're specifying the Tab label color of #e9e9e9 which is dangerously close to the Tab background fill in your custom skin.

                             

                            Your screenshot looks much better because if I grab the pixel color value it is closer to #666666 (not #e9e9e9).

                             

                            This looks pretty close to your screenshot (or at least good enough for me):

                             

                            <?xml version="1.0" encoding="utf-8"?>
                            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                           xmlns:s="library://ns.adobe.com/flex/spark" 
                                           xmlns:mx="library://ns.adobe.com/flex/mx"
                                           backgroundColor="#e9e9e9">
                                <s:layout>
                                    <s:VerticalLayout paddingLeft="10" paddingTop="10" />
                                </s:layout>
                                
                                <fx:Style>
                                    @namespace s 'library://ns.adobe.com/flex/spark';
                                    @namespace mx 'library://ns.adobe.com/flex/mx';
                                    
                                    mx|Tab {
                                        skin: ClassReference('skins.CustomTabSkin');
                                        color: #666666;
                                        textRollOverColor: #666666;
                                        fontSize: 12;
                                        fontWeight: bold;
                                    }
                                </fx:Style>
                                
                                <mx:TabNavigator id="tabNav" width="275" height="400" paddingTop="0" 
                                                 tabWidth="137.5" creationPolicy="all" borderVisible="false">
                                    <mx:VBox label="USER OPTIONS" />
                                    <mx:VBox label="TROUBLESHOOTING" />
                                </mx:TabNavigator>
                                
                            </s:Application>
                            

                             

                            Peter

                            1 person found this helpful
                            • 11. Re: how do you get rid of the gradient in the tab of a tabnavigator?
                              cyber0897 Level 1

                              haha wow... im an idot.. lol once i changd that to 666666 that worked exactly like what i wanted it to do.. and weirdly that fixed my rollover problem.. ? that was the weird thing... the rollover did not work before that and now without me doing anything it worked... ?