Horizontal Accordion Component for Flex
People have asked for an Accordion component that lays itself out horizontally instead of vertically. Looks like Scott Barnes had put one together 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 to make this component as well. Well, here it is, an accordion component that cascades horizontally for Flex 2.
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.
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.
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.
I packaged the component as a SWC. You can download the SWC and drop it into a Flex project. Download the SWC here. (281 K)
Here’s the full source of the component. And here’s the source of the example MXML file that makes the example below.
9:51 AM
|
Labels:
Flex Accordion Component,
Flex Components Downloads,
Flex Samples
|
This entry was posted on 9:51 AM
and is filed under
Flex Accordion Component
,
Flex Components Downloads
,
Flex Samples
.
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.
2 comments:
ugg bootsTHE SNOW STARTEDwholesale ugg boots TO FALLWholesale handbags SEVERAL HOURSwholesale clothing BEFORE HER Wholesale jewelrylabor began.wholesale clothing A few flakes first,wholesale handbags in the dullwholesale furniture gray late-afternoon sky, Furniture Wholesaleand then wind-drivenWholesale jewelry swirls andCeramic tile eddies around Micro sd cardsthe edges of Wholesale clothingtheir wide front porch. Wholesale JewelryHe stood by her Wholesale fashion jewelryside at the window, Wholesale costume jewelrywatching sharpugg boots gusts of snow billow,ugg boots then swirl andugg boots drift to the groundugg boots. All around the neighborhoodwholesale, lights came onwholesale electronics, and the naked branches of the trees turned white.
ugg bootsOutside, uggssnow continuedHigh pressure blower to fall quietlyIndustrial fan through the darknessIndustrial blower, as bright andCommercial blower thick as staticwholesale in the coneschina wholesale of light cast by wholesale jewelrythe streetlights.wholesale computers By the time he rosewholesale christmas supplies and looked outWholesale Cell Phones the window, wholesale handbagstheir car had wholesale MP3become a soft whitewholesale MP4 hill on thewholesale MP5 edge of the streetugg boots. Already his footprintswholesale shoes in the driveway had wholesale clothingfilled and disappearedpressure blower.
He brushedpressure blowers ashes from hisfans hands and sat on the sofablowers beside his wife, her feet propped on pillows,watches her swollen ankles crossed, a copy of Dr. Spock balanced on her belly.
Post a Comment