5 Replies Latest reply on Oct 11, 2010 12:09 PM by Devtron

    TabNavigator - how to set borderColor style ?

    Devtron Level 3

      Hello

       

      I have successfully color coded my Tab Navigator (thanks to Subeesh).

       

      I am now running into a problem where I cannot color the border.

       

      Here is the AS scripting code I am trying to use from my tabNavigator click event:

       

                  private function selectProfile():void {

       

                      //get selected profile's color

       

                      var myColor:Number;

       

                      myColor = getSelectedProfileColor();

       

                     

       

                      tn.setStyle("borderColor", myColor);

       

                      tn.setStyle("color", myColor);

       

                      tn.setStyle("backgroundColor", myColor);

       

                      tn.setStyle("chromeColor", myColor);

       

                     

       

                      formA.setStyle("borderColor", myColor);

       

                      formA.setStyle("color", myColor);

       

                      formA.setStyle("backgroundColor", myColor);

       

                      formA.setStyle("chromeColor", myColor);

       

                  }

       

       

      When I set style on "color" that seems to work, but ONLY that style works. I would really rather color the border of my form/tab navigator. How can I do that?

       

       

      here is my MXML:

       

                      <mx:TabNavigator id="tn" width="100%" height="100%"

       

                                       creationComplete="hideAllSchedulingTabsHack()"

       

                                       creationPolicy="all"

       

                                       styleName="myTabStyle"

       

                                       click="selectProfile()"

       

                                       >

       

       

       

                          <mx:Form id="A" label="A" name="very blue" hideEffect="{hideEffect}" showEffect="{showEffect}" visible="false">

       

                              <mx:Label text="Cool Point" />

       

                              <mx:NumericStepper id="coolPointA" name="coolPointA" minimum="0" maximum="120" styleName="numStepper" color="white" />   

       

                              <mx:Label text="Comfort Point" />   

       

                              <mx:NumericStepper id="comfortPointA" name="comfortPointA"   minimum="0" maximum="120" styleName="numStepper" color="white" />   

       

                              <mx:Label text="Heat Point" />

       

                              <mx:NumericStepper id="heatPointA" name="heatPointA"  minimum="0" maximum="120" styleName="numStepper" color="white" />   

       

                              <mx:Label id="testLabelA" name="testLabelA" />   

       

                          </mx:Form>

       

       

                      </mx:TabNavigator>

       

       

      Here is a screenshot of the output, you can see only "color" style is working:

      tabNavigator---styles-not-working.png

        • 1. Re: TabNavigator - how to set borderColor style ?
          Subeesh Arakkan Level 4

          I think the issue is because you are using Graphite theme. It must be using some other Border class which may not have the borderColor property.

           

          try this along with other styles

           

          tn.setStyle("borderSkin",mx.skins.spark.BorderSkin);

          • 2. Re: TabNavigator - how to set borderColor style ?
            Devtron Level 3

            Subeesh,

             

            I have fixed a few things and finally got back to this problem. I noticed I was trying to set the style for TabNavigator in the TabNavigator click event, which isnt what I wanted. I ended up adding an EventListener for MouseClick to each tab BUTTON. I now have it working.

             

            I also realized I was getting the compiler error because the import statement did not exist, like I guessed...

             

            So I added this:

            import mx.skins.spark.BorderSkin;

             

            Now it is working but isnt completely correct.

             

            Here is a screenshot:

            tabNavigator---borderColoring-screenshot.png

             

            As you can see, there is a big white gap at the top of the TabNavigator.

             

            Do you know what that gap is (is it a border or header or what I dont know??)....and do you know how I can fill it or color it?

             

            It would be cool to set the color to the border color as well...that'd actually be perfect!! Any ideas?


            Cheers...

            • 3. Re: TabNavigator - how to set borderColor style ?
              Subeesh Arakkan Level 4

              that is the top padding. try setting paddingTop="0" to remove the white space.

               

              To set border color, you can borderColor style

              • 4. Re: TabNavigator - how to set borderColor style ?
                Devtron Level 3

                ^ Nice job!

                 

                I have a new problem now that I got this working...I noticed that when I click on the tab buttons, my form's showeffect displays a white form.

                 

                I have 26 dynamic forms inside the tab navigator. When I click on a different tab, it should display the associated form. Each form and corresponding tab button should have the same color attributes.

                 

                Here is a screenshot of the problem:

                tabNavigator---showEffect-white-background-bad-screenshot.png

                 

                 

                ^ You can see the form in white there. it is kind of hard to take a screenshot of this problem because its a resize/move effect. It is animated.

                 

                I have tried to set the backgroundColor property in the MXML for the forms, but that doesnt seem to apply or take effect.

                 

                Is there something I should be doing in ActionScript to color this form? Style property(s)? Any ideas?

                • 5. Re: TabNavigator - how to set borderColor style ?
                  Devtron Level 3

                  Here is my MXML code:

                   

                   

                          <mx:Fade id="hideEffect" />
                          <mx:Move id="showEffect"  />

                   

                                      <mx:Form id="A" label="A" name="very blue" hideEffect="{hideEffect}" showEffect="{showEffect}" visible="false" >
                                           <mx:MY CONTROLS GO HERE /> 
                                      </mx:Form>
                                         
                                      <mx:Form id="B" label="B" name="red" hideEffect="{hideEffect}" showEffect="{showEffect}" visible="false" >
                                          <mx:MY CONTROLS GO HERE />
                                      </mx:Form>

                   

                   

                  I specify the Move attributes in ActionScript code elsewhere....

                   

                  Basically I need to figure out how to color the white form to the tab button's associated color. I have the color value, I just do not know what to reference to color the form. Any ideas?

                   

                  I also should point out that this white/empty form did not start happening until I added the styling for the BorderSkin.