Sure, I’d just create an ActionScript function which sets the headerStyleName style to whatever whichever custom style you want. Basically make 2-3+ custom selectors and specify the custom Accordion header skin you want to use:

.customAccordionHeadStyles1 {
    skin: ClassReference("skins.CustomAccordionHeaderSkin1");
}
.customAccordionHeadStyles2 {
    skin: ClassReference("skins.CustomAccordionHeaderSkin2");
}
.customAccordionHeadStyles3 {
    skin: ClassReference("skins.CustomAccordionHeaderSkin3");
}

And then create some ActionScript functions to set the headerStyleName to whichever CSS selector you want:

private function useSkin1():void {
    accordion.setStyle("headerStyleName", "customAccordionHeadStyles1");
}
private function useSkin2():void {
    accordion.setStyle("headerStyleName", "customAccordionHeadStyles2");
}
private function useSkin3():void {
    accordion.setStyle("headerStyleName", "customAccordionHeadStyles3");
}

You could probably clean up that code significantly, but it may help get you started.

Peter

i want to switch between 2 or more stlyes , can i use a function to change directly the css file??

thanks.

useBaseColor = true;

line allows level3 to show unmodified colors.

DMcQ

But when I do this, I get a strange shift in color where the colors look much darker than the values I’m putting in. This is probably my ignorance of the skinning framework (maybe the baseLayer attribute is somehow modifying the colors I enter).

Any thoughts on trying to do a flat gradient for the header.

As always, thanks for this immensely helpful site.

Daniel McQ

This, should be placed inside a fx:Script tag….

import mx.events.FlexEvent;
 
[Bindable]
public var __parent:*;
 
protected function onCreationComplete(event:FlexEvent):void{
	//Get a reference to the "hostComponent", needed to be used like this 
	//because I couldn't make the metadata hostComponent work for the mx:VBox component
	__parent = this["parent"];
	//Hide the original label of flex component
	__parent.getChildAt(0).visible = false;
}

and after that you can use the __parent variable to access the information of the original mx component, just like the hostComponent should work…
In my example I set the first child to false, to hide the original label of mx component… then you should specify another label element and you can retrieve the string value like this:
text=”{__parent.label}”

First of all, set a creationComplete handler, in the skin class definition:
creationComplete=”onCreationComplete(event)”

After that, just add this script tag, with some magic code to get a reference of the original mx component:

After that you can access the properties of your original mx component like this:

This solution is just a complement to the article above, and is not a beautiful one. Hope that in the future someone come with a better and easier solution for this issue.

First of all, set a creationComplete handler, in the skin class definition:
creationComplete=”onCreationComplete(event)”

After that, just add this script tag, with some magic code to get a reference of the original mx component:

After that you can access the properties of your original mx component like this:

This solution is just a complement to the article above, and is not a beautiful one. Hope that in the future someone come with a better and easier solution for this issue.