3 Replies Latest reply on Jun 29, 2007 8:07 AM by Newsgroup_User

    Custom rendering for Accordion button

    Level 7
      Hello all,

      I'm trying to change the text color of the selected button for an Accordion, so
      that the text colors look like this:

      ---------------
      Black
      ---------------
      ---------------
      White
      ---------------
      v
      v
      v
      v
      ----------------
      Black
      ----------------
      ----------------
      Black
      ----------------

      [Pls excuse my ascii graphics... ;-)]

      This is what I've tried:
      ------------------------------------------------------------------
      private function highlight_selected_accordion():void
      {
      var selected_color:int = 0xFFFFFF;
      var default_color:int = 0x000000;
      var size:int = accordion.numChildren;
      for (var i:int = 0; i < size; ++i)
      {
      var header:AccordionHeader =
      accordion.getHeaderAt(i) as AccordionHeader;
      header.setStyle('color',
      (i == accordion.selectedIndex ?
      selected_color : default_color));
      }
      }

      ....

      <mx:Accordion id="accordion"
      y="0"
      width="169"
      height="100%"
      left="2"
      change="highlight_selected_accordion();">
      ------------------------------------------------------------------

      The result is that nothing happens on the first click, then each button's text
      turns white on subsequent clicks but never turns black again.

      Again, what I want is that only the expanded button has white text, and the
      rest have black text.

      Any help would be appreciated.

      - Adam
        • 1. Re: Custom rendering for Accordion button
          Level 7
          (Bump)

          Any ideas on this?

          Thanks,

          - Adam

          Adam Fineman wrote:
          > Hello all,
          >
          > I'm trying to change the text color of the selected button for an
          > Accordion, so that the text colors look like this:
          >
          > ---------------
          > Black
          > ---------------
          > ---------------
          > White
          > ---------------
          > v
          > v
          > v
          > v
          > ----------------
          > Black
          > ----------------
          > ----------------
          > Black
          > ----------------
          >
          > [Pls excuse my ascii graphics... ;-)]
          >
          > This is what I've tried:
          > ------------------------------------------------------------------
          > private function highlight_selected_accordion():void
          > {
          > var selected_color:int = 0xFFFFFF;
          > var default_color:int = 0x000000;
          > var size:int = accordion.numChildren;
          > for (var i:int = 0; i < size; ++i)
          > {
          > var header:AccordionHeader =
          > accordion.getHeaderAt(i) as AccordionHeader;
          > header.setStyle('color',
          > (i == accordion.selectedIndex ?
          > selected_color : default_color));
          > }
          > }
          >
          > ....
          >
          > <mx:Accordion id="accordion"
          > y="0"
          > width="169"
          > height="100%"
          > left="2"
          > change="highlight_selected_accordion();">
          > ------------------------------------------------------------------
          >
          > The result is that nothing happens on the first click, then each
          > button's text turns white on subsequent clicks but never turns black again.
          >
          > Again, what I want is that only the expanded button has white text, and
          > the rest have black text.
          >
          > Any help would be appreciated.
          >
          > - Adam
          • 2. Re: Custom rendering for Accordion button
            peterent Level 2
            If your Accordion is defined like this:

            <mx:Accordion x="111" y="90" width="307" height="338" change="changeStyle(event)" creationComplete="changeStyle(event)">

            Then changeStyle can be written to modify the text color of the Accordion header buttons:

            <mx:Script>
            <![CDATA[
            import mx.events.IndexChangedEvent;

            private function changeStyle( event:Event ) : void
            {
            if( event is IndexChangedEvent ) {
            var e:IndexChangedEvent = event as IndexChangedEvent;
            e.target.getHeaderAt( e.oldIndex ).setStyle('color',0x000000);
            }
            event.target.getHeaderAt( event.currentTarget.selectedIndex ).setStyle('color',0x0000dd);
            }
            ]]>
            </mx:Script>

            When the Accordion is first created you'll want to change the color, but you also want to change the color when a header button is picked. That's an IndexChangedEvent. That event type also tells what the previous index was so you can change it back to its original color.
            • 3. Re: Custom rendering for Accordion button
              Level 7
              peterent wrote:
              <snipped solution>

              That's perfect. Thanks very much.

              - Adam