1 Reply Latest reply on Oct 14, 2010 10:00 PM by estabahn

    How to dynamically change Accordian skin?

    estabahn

      I have an accordian component, I'm skinning it with an image. I need to change the appearance of some of the headers, by swapping out an image with a colored dot. How can I programatically change the skin image at runtime? Or else draw a dot into the header at runtime?

        • 1. Re: How to dynamically change Accordian skin?
          estabahn Level 1

          I'm answering my own question here. One can programatically change the icon that an accordian header uses. Like this:

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

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute"

             creationComplete="init()">

           

          <mx:Script>

             <![CDATA[

           

             [Bindable]

             [Embed(source="images/Box.png")]

             public var boxIcon:Class;

           

             [Bindable]

             [Embed(source="images/CheckBox.png")]

             public var checkboxIcon:Class;

           

             public function init():void {

           

                 accordion1.getHeaderAt(0).setStyle('icon', boxIcon);

                 accordion1.getHeaderAt(1).setStyle('icon', checkboxIcon);

                 accordion1.getHeaderAt(2).setStyle('icon', checkboxIcon);

           

             }

           

             ]]>

          </mx:Script>

           

          <mx:Style>

             .myAccordionHeaderStyle {

           

             }

          </mx:Style>

          <mx:Box width="380" horizontalAlign="left" verticalGap="12"

             verticalScrollPolicy="off" horizontalScrollPolicy="off">

          <!-- REMOVE headerStyleName property and test again-->

             <mx:Accordion id="accordion1" width="100%" color="#000000"

          fontFamily="menuHeaderFont"

                 fontSize="14" resizeToContent="true" fontWeight="bold"

                 creationPolicy="all"

                 historyManagementEnabled="false"

                 headerStyleName="myAccordionHeaderStyle"

                 paddingRight="0">

                 <mx:VBox label="HEADER ONE" width="100%" verticalScrollPolicy="off">

                     <mx:Text>

                         <mx:htmlText>

                             <![CDATA[

                                 Here is some test text.

                             ]]>

                         </mx:htmlText>

                     </mx:Text>

                </mx:VBox>

                 <mx:VBox label="HEADER TWO" width="100%" verticalGap="47">

                     <mx:Text>

                         <mx:htmlText>

                             <![CDATA[

                                 Here is some test text.

                             ]]>

                         </mx:htmlText>

                     </mx:Text>

                </mx:VBox>

                 <mx:VBox label="HEADER THREE" width="100%"

          verticalScrollPolicy="off">

                     <mx:Text>

                         <mx:htmlText>

                             <![CDATA[

                                 Here is some test text.

                             ]]>

                         </mx:htmlText>

                     </mx:Text>

                 </mx:VBox>

             </mx:Accordion>

          </mx:Box>

          </mx:Application>