The default Halo Accordion header Spark skin can be found at /frameworks/projects/sparkskins/src/mx/skins/spark/AccordionHeaderSkin.mxml.
主应用
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/ -->
<s:Application name="Accordion_SparkSkin_headerStyleName_skin_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Style>
.customAccordionHeadStyles {
skin: ClassReference("skins.CustomAccordionHeaderSkin");
}
</fx:Style>
<mx:Accordion id="accordion"
headerStyleName="customAccordionHeadStyles"
left="20" right="20" top="20" bottom="20">
<mx:VBox label="Red" width="100%" height="100%">
<mx:Text text="Panel 1" />
</mx:VBox>
<mx:VBox label="Orange" width="100%" height="100%">
<mx:Text text="Panel 2" />
</mx:VBox>
<mx:VBox label="Yellow" width="100%" height="100%">
<mx:Text text="Panel 3" />
</mx:VBox>
<mx:VBox label="Green" width="100%" height="100%">
<mx:Text text="Panel 4" />
</mx:VBox>
<mx:VBox label="Blue" width="100%" height="100%">
<mx:Text text="Panel 5" />
</mx:VBox>
</mx:Accordion>
</s:Application>
skin组件,继承自SparkSkin
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/ -->
<s:SparkSkin name="CustomAccordionHeaderSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
minWidth="21" minHeight="21"
alpha.disabled="0.5">
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
<s:State name="selectedUp" />
<s:State name="selectedOver" />
<s:State name="selectedDown" />
<s:State name="selectedDisabled" />
</s:states>
<!-- layer 3: fill -->
<s:Rect left="1" right="1" top="1" bottom="1">
<s:fill>
<s:SolidColor color="white"
color.up="red"
color.over="haloOrange"
color.down="yellow"
color.selectedUp="haloGreen"
color.selectedOver="haloBlue"
color.selectedDown="purple" />
</s:fill>
</s:Rect>
<!-- layer 4: fill lowlight -->
<s:Rect left="1" right="1" bottom="1" height="9">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x000000" alpha="0.0099" />
<s:GradientEntry color="0x000000" alpha="0.0627" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 5: fill highlight -->
<s:Rect left="1" right="1" top="1" height="9">
<s:fill>
<s:SolidColor color="0xFFFFFF"
alpha="0.33"
alpha.over="0.22"
alpha.down="0.12" />
</s:fill>
</s:Rect>
<!-- layer 6: highlight stroke (all states except down) -->
<s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="down">
<s:stroke>
<s:LinearGradientStroke rotation="90">
<s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
<s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 6: highlight stroke (down state only) -->
<s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.07" />
</s:fill>
</s:Rect>
<s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.07" />
</s:fill>
</s:Rect>
<s:Rect left="1" top="1" right="1" height="1" includeIn="down">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.25" />
</s:fill>
</s:Rect>
<s:Rect left="1" top="2" right="1" height="1" includeIn="down">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.09" />
</s:fill>
</s:Rect>
<!-- layer 2: border -->
<s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20">
<s:stroke>
<s:SolidColorStroke color="0x696969"
alpha="1"
alpha.over="1"
alpha.down="1" />
</s:stroke>
</s:Rect>
</s:SparkSkin>