Changing the look of your Accordion navigation in Flex 3
Skinning and styling your accordion in Flex Builder 3 is much easier, I think, than most books and articles seem to indicate.
I’d like to take a moment here to explain the difference between styling and skinning, because the two terms are not interchangeable. Styling refers to changing basic colors, text, and borders, without affecting the overall default look of the element(s) in question. Since this can mostly be accomplished right in the Design window of your Flex application, and hence is pretty self-explanatory, I will not be discussing it here. Skinning, however, is the practice of totally changing the default look of elements by applying new graphical representations (images and shapes) and textures to them. Now on to our example.
When you create an accordion, each “tab” that you add includes a canvas — which is the area that opens up when the user clicks the accordion “tab.” FYI, these aren’t actually tabs but are called headers, which, as you’ll see in a moment, is important to remember.
So now, looking at the source code for a new accordion with 2 headers, you would see tags like this:
<mx:Accordion>
<mx:Canvas>
</mx:Canvas>
<mx:Canvas>
</mx:Canvas>
</mx:Accordion>
Your <Canvas> tags surround items — such as text, labels, and images — that show up as your accordion opens.
So where to begin in styling this thing? Well, if you are used to using CSS to style HTML, your first instinct (as was mine) might be to create a style on the Accordion element. If what you are looking for is to change the look of the headers (or “tabs”), then your first instinct would be incorrect! Step 2 might be to try to style the Canvas. Nope, that doesn’t work either. What you are actually styling/skinning is the AccordionHeader element. That’s right, it doesn’t appear in your tags, in fact you wouldn’t necessarily see it’s there, but it is. So, here we go.
Open your CSS file. (You do have one, don’t you? If not, then right-click your Flex 3 project, select New > CSS File, and create one. Oh, and don’t forget to link to it from your application — you’ll need to add a line something like this between your <mx:Application> tags: <mx:Style source="[YOUR_CSS_FILENAME].css" />)
Once in your CSS file, change to Design view; click the New Style button, check the “Specific component” radio button, and select “AccordionHeader” in the Component dropdown list. Ya keepin’ up here?
In the Flex Properties Explorer, you have a handy way to choose styling or skinning by clicking one of the buttons at the top right of the container. For this example, select Skin. Next, click the Skin dropdown, and select “Image files… .” You are presented with a list of header states that can be styled, including Up, Over, Down, Disabled, etc.: similar to a Button control. Choose an image from your file system that you would like to apply to your accordion headers, and that’s it.
Well, that’s almost it. First off, don’t be concerned if you see the message, “There is no preview available for this style” in your Design window. It just means literally what it says — there is no built-in way to preview skins for the AccordionHeader element.
Second, depending on the type of image you chose (a shape image vs. a sliced stretch-to-fit image), your header may look kind of funky because your graphic probably stretched to fit the width of your accordion header. You’ll have to play around with the properties in Design or Code view until you get the look of things just right. I just kind of threw you in the water here, now you have to figure out how to swim! Have fun, play around, add off-the-wall images just to see how things work. That’s how you learn!
