Here’s an example of how to use complex UI components for the header renderers of a Flex Accordion component. Normally the Accordion only allows you to specify a Button as the header renderer, and any customization still requires you to subclass Button, so it’s hard to get full control over the headers. The CanvasButton component in FlexLib is an extension of Button that acts like Canvas, which means that it subclasses Button but allows you to easily add children via MXML.

I’ve created a special extension of CanvasButton that is specifically for use as a header renderer in an Accordion. The new CanvasButtonAccordionHeader (nice name huh?) is now in the FlexLib SVN repository. Note that this is in the FlexLib SVN repository but is not in the zip distribution on the main FlexLib page yet, once we get a few more updates I’ll update the .zip distribution. For now you’ll have to get the source from the repository.

The example below shows using a header renderer for the Accordion that display a ComboBox and a CheckBox in the header. The point here is that since you’re effectively using a Canvas as the header, you can easily add whatever UI components to the headers that you want.

Browse the MXML source of this example.