How do I restyle an Adobe Flex Accordion to include a button in each canvas header?

Answer 1

You will have to create a custom header renderer, add a button to it and position it manually. Try something like this:

<mx:Accordion>
    <mx:headerRenderer>
        <mx:Component>
            <AccordionHeader xmlns="mx.containers.accordionClasses.*">
                <mx:Script>
                <![CDATA[

                import mx.controls.Button;


                private var extraButton : Button;


                override protected function createChildren( ) : void {
                    super.createChildren();

                    if ( extraButton == null ) {
                        extraButton = new Button();

                        addChild(extraButton);
                    }
                }

                override protected function updateDisplayList( unscaledWidth : Number, unscaledHeight : Number ) : void {
                    super.updateDisplayList(unscaledWidth, unscaledHeight);

                    extraButton.setActualSize(unscaledHeight - 6, unscaledHeight - 6);
                    extraButton.move(unscaledWidth - extraButton.width - 3, (unscaledHeight - extraButton.height)/2);
                }

                ]]>
                </mx:Script>
            </AccordionHeader>
        </mx:Component>
    </mx:headerRenderer>

    <mx:HBox label="1"><Label text="Text 1"/></HBox>
    <mx:HBox label="1"><Label text="Text 2"/></HBox>
    <mx:HBox label="1"><Label text="Text 3"/></HBox>
</mx:Accordion>

Answer 2

Thanks, I got it working using FlexLib's CanvasButtonAccordionHeader.

Answer 3

Hi Shawn, Would you please share the source code of using FlexLib's CanvasButtonAccordionHeader in your application. I am having a little trouble in finding the way around and the documentation on the page doesn't help much too.

Thanks in advance.

Alex Fisherr