本文来自:RIAMeeting:http://riameeting.com/node/404
这是一篇来自Flex Example的文章,介绍《如何在Flex 4中自定义Halo Accordion组件的header部分的皮肤》。
原文地址:http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/
下面的例子描述了在Flex 4里面,我们如何自定义Accordion header,使用的方式是建立一个新的基于spark skin的skin,然后对其skin parts进行修改以便设定Accordion header。 默认Halo Accordion header spark skin可以在以下位置找到 :/frameworks/projects/sparkskins/src/mx/skins/spark/AccordionHeaderSkin.mxml
如果要执行这个例子,您必须安装Flash Player 10,同时在您的Flex Builder 3中安装Flex SDK 4。 关于更多的关于如何下载和安装Flex SDK 4在Flex Builder,请看
http://blog.flexexamples.com/2008/08/02/using-the-beta-gumbo-sdk-in-flex-builder-3/
关于下载Flex SDK 4 latest build,请访问
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4
(编者注:本篇文章撰写的时候,还未有Flash Builder 4,因此是在Flex Builder 3里面完成的。)
<?xml version= "1.0" encoding= "utf-8" ?> <!-- <a href= "http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/" title= "http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/" >http : //blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion...</a> --> <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 >
自定义Accordion header skin,请看以下代码:
<?xml version= "1.0" encoding= "utf-8" ?> <!-- <a href= "http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/" title= "http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/" >http : //blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion...</a> --> <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 >
注意:此项目是基于测试版的Flex SDK 4,当你用新版本的Flex SDK 4编译的时候,API可以会发生改变,造成无法编译成功。