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):

Accordion example

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.

3 responses

  1. Hi.

    That’s great!!! However, how to change the default white background color? Does any change of accordion’s background color impact to it’s headers colors.


  2. For each of the children of the Accordion, you would specify the backgroundColor style. For example:

  3. Chaitanya Yeluri | Reply

    dude u really saved lot of my time. From morning onwards I am looking for styling Accordion in flex 3 but finally I found in ur web site. This is the second time I got something really needed from this web site. Thanks for ur post.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: