5 Replies Latest reply on Sep 17, 2009 9:20 AM by Russell.lrg

    How to apply cornerradius to tabs in TagNavigator

    Russell.lrg

      Hello,

       

          I have tried to applied CSS to tabs but that doesn't work. Could anyone give me an example showing how to give cornerradius to tabs in TagNavigator?

       

          Thanks in advance !

       

      ~Russell

        • 1. Re: How to apply cornerradius to tabs in TagNavigator
          Peter deHaan Level 4

          Russell,

           

          I believe you need to create a custom "Tab" skin and apply the corner radius there.

           

          For example, here is my main file:

           

          <?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/halo">
              <fx:Style>
                  .tabStylez {
                      skin: ClassReference("RoundTabSkin");
                  }
              </fx:Style>
              <mx:TabNavigator id="tabNav"
                               tabStyleName="tabStylez"
                               width="300" 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 here is my custom Tab skin, RoundTabSkin.mxml, which is in the same directory as my main.mxml file:

           

          <?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:Declarations>
                  <fx:Number id="cr">10</fx:Number>
              </fx:Declarations>
              <!-- 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" topLeftRadiusX="{cr}" topRightRadiusX="{cr}">
                  <s:fill>
                      <s:LinearGradient rotation="90">
                          <s:GradientEntry color="0xE4E4E4" color.over="0xCACACA"
                                           color.selectedStates="0xFFFFFF"
                                           alpha="1" />
                          <s:GradientEntry color="0xA1A1A1" color.over="0x878787"
                                           color.selectedStates="0xE4E4E4"
                                           alpha="1" />
                      </s:LinearGradient>
                  </s:fill>
              </s:Rect>
              <!-- layer 2: highlight stroke -->
              <s:Rect left="1" right="1" top="1" bottom="1" alpha="0.22"  topLeftRadiusX="{cr}" topRightRadiusX="{cr}">
                  <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 3: fill highlight -->
              <s:Rect left="1" right="1" top="1" height="10"  topLeftRadiusX="{cr}" topRightRadiusX="{cr}">
                  <s:fill>
                      <s:SolidColor color="0xFFFFFF"
                                    alpha="0.12" />
                  </s:fill>
              </s:Rect>
              <!-- layer 4: border - unselected only -->
              <s:Rect left="0" right="0" top="0" bottom="0" excludeFrom="selectedStates"  topLeftRadiusX="{cr}" topRightRadiusX="{cr}">
                  <s:stroke>
                      <s:SolidColorStroke color="0x696969" alpha="1" />
                  </s:stroke>
              </s:Rect>
              <!-- layer 5: border - selected only -->
              <s:Rect left="0" right="0" top="0" bottom="0" includeIn="selectedStates"  topLeftRadiusX="{cr}" topRightRadiusX="{cr}">
                  <s:fill>
                      <s:SolidColor color="0x696969" alpha="1" />
                  </s:fill>
              </s:Rect>
          </s:SparkSkin>
          

           

           

          Hope that helps,

          Peter

          • 2. Re: How to apply cornerradius to tabs in TagNavigator
            Peter deHaan Level 4

            Oh, and I took almost all that skin class code from the default Tab skin at:

            %FlexSDK%\frameworks\projects\sparkskins\src\mx\skins\spark\TabSkin.mxml

             

            Peter

            • 3. Re: How to apply cornerradius to tabs in TagNavigator
              Russell.lrg Level 1

              Hi Peter, thank you so much ! And thank you for telling me that I can

              "steal" codes from the sdk folder. I never know that before.

               

              Maybe I ask one more question? The property "topLeftRadiusX" is not in

              s:Rect any more. If I use radiusX, radiusY to substitute them, the tabs will

              get radius at all four corners. Do you have a solution for it?

               

               

               

              2009/9/16 Peter deHaan (Adobe) <forums@adobe.com>

               

              Oh, and I took almost all that skin class code from the default Tab skin

              at:

              >

              %FlexSDK%\frameworks\projects\sparkskins\src\mx\skins\spark\TabSkin.mxml

              >

              Peter

              >

              • 4. Re: How to apply cornerradius to tabs in TagNavigator
                Peter deHaan Level 4

                Actually, the problem is topLeftRadiusX is new, and you're using and older version of the Flex SDK. So the solution is to download a recent nightly Flex 4 SDK build from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4 (4.0.0.10339 is currently the latest nightly build) and try the code again.

                 

                Specifying topLeftRadiusX, topLeftRadiusY, topRightRadiusX, topRightRadiusY, bottomLeftRadiusX, bottomLeftRadiusY, bottomRightRadiusX, and bottomRightRadiusY (whew!) will let you control the corner radius of each corner with great precision.

                 

                Hope that helps,

                Peter

                • 5. Re: How to apply cornerradius to tabs in TagNavigator
                  Russell.lrg Level 1

                  Thank you so much! Your answer is very helpful.  After applying the latest

                  SDK I got all the topLeftRadiusX, topLeftRadiusY, topRightRadiusX,

                  topRightRadiusY, bottomLeftRadiusX, bottomLeftRadiusY, bottomRightRadiusX,

                  and bottomRightRadiusY

                   

                  But I still encounter some problem when running the application: I go the

                  error message of

                   

                  "Connection to file:///C:/Documents and Settings/rluo/Adobe Flash Builder

                  Beta/ComponentsLearning/bin-debug/textLayout_4.0.0.10339.swf halted - not

                  permitted from file:///C:/Documents and Settings/rluo/Adobe Flash Builder

                  Beta/ComponentsLearning/bin-debug/TagNavigator2.swf"

                   

                  Do you know how I can get it away?

                   

                  ~Russell

                   

                  2009/9/17 Peter deHaan (Adobe) <forums@adobe.com>

                   

                  Actually, the problem is topLeftRadiusX is new, and you're using and older

                  version of the Flex SDK. So the solution is to download a recent nightly

                  Flex 4 SDK build from

                  http://opensource.adobe.com/wiki/display/flexsdk/DownloadFlex4(4.0.0.10339 is currently the latest nightly build) and try the code again.

                  >

                  Specifying topLeftRadiusX, topLeftRadiusY, topRightRadiusX,

                  topRightRadiusY, bottomLeftRadiusX, bottomLeftRadiusY, bottomRightRadiusX,

                  and bottomRightRadiusY (whew!) will let you control the corner radius of

                  each corner with great precision.

                  >

                  Hope that helps,

                  Peter

                  >