Split AccordionHeader in FLEX
I’ve recently started using FLEX in order to develop a real-world application. One element I needed for that project was an Accordion. No biggie, that’s included with FLEX. But I wanted it to be special: with a split header for each section.
FLEX comes with a great set of default components, one of them is the Accordion component. This component allows you to easily create a container that shows/hides child containers with nice animation effects.
As the company I work for focuses not just on technology and design, but also on usability and user experience, I often find myself looking for ways to make FLEX do what I and our interaction designers want it to do.
Today, I was discussing with Macromedian Waldo Smeets how to create an Accordion header that features a split header. The left section of the header has to contain the label of the section, the right part could then be used to show summary data.
Waldo came up with the idea of a custom implementation of the ‘headerClass’ property of the ‘Accordion’ class. That worked great, FLEX allows you to specify a custom class the Accordion component should use.
Next, I added a way to set the content of each label and summary for each Accordion section. To finalize, Waldo discovered that we didn’t even need to set the label and summary properties through ActionScript, we could just read the content of both the VBox ‘label’ and ‘toolTip’ attributes.
One more thing I added was an image that switches on and off depending on the selected state of the Accordion section.
Check out the image below:
I’m sure there’s still quite a lot to do before this is usable for a production environment (focus management is a bit messed up, for example and the summary label should be clickable too), but a few hours of playing clearly demonstrated to me how FLEX can be adjusted to suit both your design and business needs. Nice.
Download the source files and feel free to post your comments and/or improvements.
Bookmark on del.icio.us - posted at 29 December 2004 - filed under flex. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
