flex 3 accordion component and rounded corners

Question

Hi guys,

Im using the accordion component in Flex and cant seem to get the header to have rounded corners. The footer rounds no problem but the header remnains square, any suggestions?

Answer 1

Your best bet is to probably design the skin in flash and use that skin in flex.

I suggest downloading the flex skinning templates from here

http://www.adobe.com/cfusion/entitlement/index.cfm?event=custom&sku=RC00530&e=flex_skins

installing it.

When flash opens goto 'create from template' and click on more. Select flex skins. You can choose just to create an accordion template or a full skins template. Design it as you want. Run it to create a swc and then import that swc into flex. You can then use that skin in your accordion panel.

That way your skin can be designed with your rounded corners (make sure you have scale 9 enabled so that they scale properly)

Answer 2

Here's an in-depth example from Doug McCune showing how to customize the Accordion control, with accompanying source code and explanation, in which he does something similar. While the specifics will depend on what you're trying to do, essentially you need to re-skin the button and/or selection skins of the accordion-item header.

Skinning can be a bit tricky, one of those things that seems like it ought to be easier than it is (and personally I find using Flash for skinning to be a pain for all but the simplest situations; I much prefer to do it in code or markup), but if you spend a little time with the code in the example I'm sure you'll see what's going on and be able to apply to your project. Hope it helps -- good luck!