{"id":26,"date":"2007-01-27T20:13:33","date_gmt":"2007-01-28T04:13:33","guid":{"rendered":"http:\/\/dougmccune.com\/blog\/2007\/01\/27\/horizontal-accordion-component-for-flex\/"},"modified":"2007-01-27T20:14:07","modified_gmt":"2007-01-28T04:14:07","slug":"horizontal-accordion-component-for-flex","status":"publish","type":"post","link":"https:\/\/dougmccune.com\/blog\/2007\/01\/27\/horizontal-accordion-component-for-flex\/","title":{"rendered":"Horizontal Accordion Component for Flex"},"content":{"rendered":"

People have asked for an Accordion component that lays itself out horizontally instead of vertically. Looks like Scott Barnes had put one together<\/a> back in 2005 that worked for Flex 1.5. Seeing as he’s now as Microsoft I’d say the chances of him porting it to Flex 2 are zip. Others seem to be trying<\/a> to make this component as well. Well, here it is, an accordion component that cascades horizontally for Flex 2. <\/p>\n

You use it just like the normal accordion component. The only difference is now you can use the “headerWidth” style instead of headerHeight to set the width of the tabs in CSS. <\/p>\n

Making the component wasn’t that difficult, but it required a complete copy\/paste of the Accordion component. If you look at the source you’ll see that I’ve made a class called AccordionBase. Basically this base class is a straight copy of the Accordion class from the framework but modified to allow it to be extended easier. That means I changed a bunch of properties and methods that were private to protected, so my subclasses could access them. Once I made these changes the only other thing I did to AccordionBase was remove the updateDisplayList and measure methods. These methods are defined in the subclasses, which are HAccordion and VAccordion. Each of those subclasses has slightly different code to do the layout and tweening. Ideally I would have been able to do this without making a new AccordionBase class that duplicated the code of Accordion, but this is another instance where a simple extension of a class doesn’t give you enough access to the parent class.<\/p>\n

The one important thing to be aware of is that you MUST embed the font that you’ll be using for the text of the HAccordion’s headers. The component rotates the headers by 90 degrees, and if you rotate a text component then it will only work if you have the font embedded. See the source of the example MXML file to see how I did this, it’s simple, but if you don’t do it you’ll be wondering why the headers are all blank.<\/p>\n

I packaged the component as a SWC. You can download the SWC and drop it into a Flex project. Download the SWC here<\/a>. (281 K)<\/p>\n

Here’s the full source<\/a> of the component. And here’s the source of the example MXML<\/a> file that makes the example below.<\/p>\n

This movie requires Flash Player 9.<\/div>\n