Customizing Accordion Headers for 2.0.1 and Moxie

Settingstyles like the fillColors, fonts and highlight colors on an Accordion header is pretty simple. However, I wanted to comment on the best practice for Flex 2.0.1 that will also work in the future release of Flex. In Flex 2.0.1, you can set many styles that affect the Accordion headers on the Accordion itself rather than using the headerStyleName style. So, you could do something like this:

<mx:Accordion color=”0xFF0000″ fillColors=”[0xCCDD66, 0x44FFFF]” icon=”infoIcon”>

In Flex 2.0.1, this code would work and the styles would get inherited from the Accordion to its headers. However, in Moxie (future release of Flex), this won’t work. Styles have been cleaned up and therefore, only styles set on the headerStyleName will affect the Accordion header. This is one of the areas that I’ve been working on testing the past few weeks. Styles on the Accordion that affected only the headers will be deprecated. This change is available as of Flex build 175091 which you can get from the Adobe Labs nightly build pages.

So, if you want the Accordion in your Application to work in future builds, set all of your Accordion header styles using the headerStyleName. Here is a screenshot of the demo that I’ve provided (excuse my developer art):

Demo: AccordionSample.swf

Sample Code: AccordionSample.mxml, QuestionIcon.gif

In this example, the icon, fillColors, highlightColors, fontFamily, color and selectedFillColors are all set within the headerStyleName.

---

Possibly related posts: (automatically generated)

• We need a cool header…
• FAX LOCATIONS
• Hot from our fax machine

~ by jlafferty on July 17, 2007.