9 Replies Latest reply on May 17, 2011 1:09 PM by whyDontUCmyLogin

    A way to set selected header text color for accordion

    run,ryan! Level 3

      adobe dosen't provide a way to set selected header text for accordion, the closest one is 'text-selected-color', but that's the color when mouse down.

       

      this is a ugly way to achieve it

                  private function changeHeaderColor(acc:Accordion):void
                  {
                      for(var i:int = 0; i < acc.numChildren; i++)
                      {
                          acc.getHeaderAt(i).setStyle('color', 0x122052);
                      }
                      trace('acc.selectedIndex' + acc.selectedIndex);
                      trace('selected:' + acc.getHeaderAt(acc.selectedIndex));
                      acc.getHeaderAt(acc.selectedIndex).setStyle('color', 0xFFFFFF);
                  }
      
      <mx:Accordion resizeToContent="true" width="100%" id="acc_text" creationComplete="changeHeaderColor(acc_text)"
      

      it would be more neat to just extend AccordionHeader component, if someone have that code please share with us, thanks.

        • 1. Re: A way to set selected header text color for accordion
          Barna Biro Level 3

          Hi there,

           

          Hopefully these links will be of some help:

           

           

          Obviously, no one would stop you to extend the default Accordion component and add new features or edit current features.

           

          Blog: http://blog.wisebisoft.com

          With best regards,

          Barna Biro

           

          PS: I'm not sure if you can use a custom header renderer for the accordion elemenets but it would be a possible solution. In case there's no default implementation for this, you can extend the component and add the new features.

          • 2. Re: A way to set selected header text color for accordion
            m_hartnett Level 3

            look at the headerStyleName style of the Accordian.

            This points to the css of the accordian object and will allow you to control all aspect including changing the selected color.

            • 3. Re: A way to set selected header text color for accordion
              run,ryan! Level 3

              thanks for your quick reply, brana and mark

              I had read the blog from flexexample, its not setting the selected text color.

              and i can not find anything helpful from css, and the same thing as styleName, as there is no real selected-text-color

              following is what i did b4

              AccordionHeader
              {
                  color: #122052;
                  text-selected-color: #FF0000;
                  text-roll-over-color: #FFFFFF;
              

              it's setting color #FF0000 when you press mouse down, but when you release the mouse, it changed back to #122052

               

              do you have an example?

              • 4. Re: A way to set selected header text color for accordion
                Barna Biro Level 3

                Sorry, I can't provide a working example but what I can say is that you might get lucky with a custom header renderer. Simply create your custom Button component that you'll use as a header renderer for your Accordion and add all the needed logic into that component ( meaning: once you click the button, handle the coloring within the component itself ). You only need to check if an easy way exists to tell an already active button that a different button was clicked so you can reset it's color.

                 

                I'd try playing around with this and maybe use some events too ( so I can somehow set up a notification system that would reset the currently active button and change the color of the currently clicked button ). It is definitely more work and what you first posted but if you can get it to work then I'm sure that it will serve you well on the long run.

                 

                In case I have time to dig into this a bit more then I'll try to come back with a working example ( but I can't promiss anything so don't way for me to come back with a working example too soon ).

                 

                Wishing you luck,

                Barna Biro

                • 5. Re: A way to set selected header text color for accordion
                  m_hartnett Level 3

                  Here you go.  This is using an inline style.  You can move this out to a css of course.

                  You can also define a css for the Accordian object and have a entry for the headerStyleName like this

                   

                  Also take a look at the api document for the AccordianHeader object and look at the available styles.

                  You can customize much of the look and feel of the header.

                   

                  http://livedocs.adobe.com/flex/3/langref/index.html

                   

                   

                   

                   

                   

                   

                   

                   

                   

                  Accordion

                   

                  {

                   

                   

                  headerHeight: 22;

                   

                   

                  borderStyle: solid;

                   

                   

                  backgroundColor:#e7eae4;

                   

                   

                  backgroundAlpha: 1;

                   

                   

                  focusAlpha: 1;

                   

                   

                  borderColor: #8e8e8e;

                   

                   

                  color: #000000;

                   

                   

                  textRollOverColor: #000000;

                   

                   

                  headerStyleName: "accHeader";

                  }

                   

                  //HERE IS THE EXAMPLE it is using an inline css

                   

                  <?xml version="1.0" encoding="utf-8"?>

                  <mx:Application

                  xmlns:mx="

                   

                  http://www.adobe.com/2006/mxml" layout="vertical

                  "

                  width="

                   

                  100%" height="100%" backgroundColor="#eaf1f6

                  "

                  backgroundGradientAlphas="

                   

                  1.0,1.0"

                  >

                   

                   

                  <mx:Style>

                   

                   

                  .accHeader {

                   

                   

                  fillColors: haloSilver, haloBlue;

                   

                   

                  fillAlphas: 1.0, 0.5;

                   

                   

                  selectedFillColors: black, black;

                  }

                   

                   

                  </mx:Style>

                   

                   

                   

                  <mx:Script>

                  <![CDATA[

                   

                   

                  import

                  mx.collections.ArrayCollection;

                   

                   

                   

                   

                  ]]>

                   

                   

                  </mx:Script>

                   

                   

                  <mx:Accordion width="200" height="200" headerStyleName="accHeader"

                  >

                   

                   

                  <mx:Canvas label="Accordion Pane 1" width="100%" height="100%"

                  >

                   

                   

                  </mx:Canvas>

                   

                   

                  <mx:Canvas label="Accordion Pane 2" width="100%" height="100%"

                  >

                   

                   

                  </mx:Canvas>

                   

                   

                  <mx:Canvas label="Accordion Pane 3" width="100%" height="100%"

                  >

                   

                   

                  </mx:Canvas>

                   

                   

                  </mx:Accordion>

                   

                  </mx:Application>

                  • 6. Re: A way to set selected header text color for accordion
                    run,ryan! Level 3

                    thanks, but this is an example of setting color of header, not the color of the text of selected header

                    • 7. Re: A way to set selected header text color for accordion
                      m_hartnett Level 3

                      Sorry misread your post.  You have to do this programatically.

                      Here is some code that will do it and you can also do this with a headerRender which I dont have on hand right now

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

                      <?xml version="1.0" encoding="utf-8"?>

                      <mx:Application

                      xmlns:mx="

                       

                      http://www.adobe.com/2006/mxml" layout="vertical

                      "

                      width="

                       

                      100%" height="100%" backgroundColor="#eaf1f6

                      "

                      backgroundGradientAlphas="

                       

                      1.0,1.0

                      "

                      creationComplete="cc()"

                       

                      >

                       

                       

                       

                      <mx:Script>

                      <![CDATA[

                       

                       

                      import

                      mx.events.IndexChangedEvent;

                       

                       

                      import

                      mx.collections.ArrayCollection;

                       

                       

                       

                      public function cc():void

                      {

                      ac.getHeaderAt(0).setStyle(

                       

                      'color'

                      , 0xAA0000);

                      }

                       

                       

                       

                      public function setButtonStyle(e:IndexChangedEvent):void

                      {

                      ac.getHeaderAt(e.oldIndex).setStyle(

                       

                      'color'

                      , 0);

                      ac.getHeaderAt(e.newIndex).setStyle(

                       

                      'color'

                      , 0xAA0000);

                      }

                       

                       

                       

                      ]]>

                       

                       

                      </mx:Script>

                       

                       

                      <mx:Accordion id="ac" width="200" height="200" change="setButtonStyle(event)"

                      >

                       

                       

                      <mx:Canvas label="Accordion Pane 1" width="100%" height="100%"

                      >

                       

                       

                      </mx:Canvas>

                       

                       

                      <mx:Canvas label="Accordion Pane 2" width="100%" height="100%"

                      >

                       

                       

                      </mx:Canvas>

                       

                       

                      <mx:Canvas label="Accordion Pane 3" width="100%" height="100%"

                      >

                       

                       

                      </mx:Canvas>

                       

                       

                      </mx:Accordion>

                       

                      </mx:Application>

                      • 8. Re: A way to set selected header text color for accordion
                        Tom Decaux Level 1

                        With Flex 4, if you are using the MX accordion, you can also create your own Header renderer (a class which extends Button) and override the selected function:

                         

                        override public function set selected(value:Boolean):void

                        {

                        super.selected = value;

                         

                        this.setStyle('color',value ? 0xf0f0f0 : 0x22222);

                        }

                         

                        eBuildy, French Flex Specialists !

                        • 9. Re: A way to set selected header text color for accordion
                          whyDontUCmyLogin Level 1

                          that's the way i did it (the original suggestion at the top).  simple and effective.  thanks for the post (even 3 years ago)