Flex 4中如何创建自定义Accordion头部的例子

By Minidxer | October 21, 2009

接下来的例子演示了Flex 4中如何通过自定义Skin，创建自定义Accordion头部。

让我们先来看一下Demo（可以点击这里察看源代码）：


下面是完整代码(或点击这里察看)：
下面是main.mxml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Accordion_SparkSkin_headerStyleName_skin_test"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:mx="library://ns.adobe.com/flex/halo"
  5.         xmlns:s="library://ns.adobe.com/flex/spark">
  6.  
  7.     <fx:Style>
  8.         .customAccordionHeadStyles {
  9.             skin: ClassReference("skins.CustomAccordionHeaderSkin");
  10.         }
  11.     </fx:Style>
  12.  
  13.     <mx:Accordion id="accordion"
  14.             headerStyleName="customAccordionHeadStyles"
  15.             left="20" right="20" top="20" bottom="20">
  16.         <mx:VBox label="Red" width="100%" height="100%">
  17.             <mx:Text text="Panel 1" />
  18.         </mx:VBox>
  19.         <mx:VBox label="Orange" width="100%" height="100%">
  20.             <mx:Text text="Panel 2" />
  21.         </mx:VBox>
  22.         <mx:VBox label="Yellow" width="100%" height="100%">
  23.             <mx:Text text="Panel 3" />
  24.         </mx:VBox>
  25.         <mx:VBox label="Green" width="100%" height="100%">
  26.             <mx:Text text="Panel 4" />
  27.         </mx:VBox>
  28.         <mx:VBox label="Blue" width="100%" height="100%">
  29.             <mx:Text text="Panel 5" />
  30.         </mx:VBox>
  31.     </mx:Accordion>
  32.  
  33. </s:Application>

下面是skins/CustomAccordionHeaderSkin.mxml的代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:SparkSkin name="CustomAccordionHeaderSkin"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         minWidth="21" minHeight="21"
  6.         alpha.disabled="0.5">
  7.     <!-- states -->
  8.     <s:states>
  9.         <s:State name="up" />
  10.         <s:State name="over" />
  11.         <s:State name="down" />
  12.         <s:State name="disabled" />
  13.         <s:State name="selectedUp" />
  14.         <s:State name="selectedOver" />
  15.         <s:State name="selectedDown" />
  16.         <s:State name="selectedDisabled" />
  17.     </s:states>
  18.  
  19.     <!-- layer 3: fill -->
  20.     <s:Rect left="1" right="1" top="1" bottom="1">
  21.         <s:fill>
  22.             <s:SolidColor color="white"
  23.                     color.up="red"
  24.                     color.over="haloOrange"
  25.                     color.down="yellow"
  26.                     color.selectedUp="haloGreen"
  27.                     color.selectedOver="haloBlue"
  28.                     color.selectedDown="purple" />
  29.         </s:fill>
  30.     </s:Rect>
  31.  
  32.     <!-- layer 4: fill lowlight -->
  33.     <s:Rect left="1" right="1" bottom="1" height="9">
  34.         <s:fill>
  35.             <s:LinearGradient rotation="90">
  36.                 <s:GradientEntry color="0x000000" alpha="0.0099" />
  37.                 <s:GradientEntry color="0x000000" alpha="0.0627" />
  38.             </s:LinearGradient>
  39.         </s:fill>
  40.     </s:Rect>
  41.  
  42.     <!-- layer 5: fill highlight -->
  43.     <s:Rect left="1" right="1" top="1" height="9">
  44.         <s:fill>
  45.             <s:SolidColor color="0xFFFFFF"
  46.                         alpha="0.33"
  47.                         alpha.over="0.22"
  48.                         alpha.down="0.12" />
  49.         </s:fill>
  50.     </s:Rect>
  51.  
  52.     <!-- layer 6: highlight stroke (all states except down) -->
  53.     <s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="down">
  54.         <s:stroke>
  55.             <s:LinearGradientStroke rotation="90">
  56.                 <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
  57.                 <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
  58.             </s:LinearGradientStroke>
  59.         </s:stroke>
  60.     </s:Rect>
  61.  
  62.     <!-- layer 6: highlight stroke (down state only) -->
  63.     <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
  64.         <s:fill>
  65.             <s:SolidColor color="0x000000" alpha="0.07" />
  66.         </s:fill>
  67.     </s:Rect>
  68.     <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
  69.         <s:fill>
  70.             <s:SolidColor color="0x000000" alpha="0.07" />
  71.         </s:fill>
  72.     </s:Rect>
  73.     <s:Rect left="1" top="1" right="1" height="1" includeIn="down">
  74.         <s:fill>
  75.             <s:SolidColor color="0x000000" alpha="0.25" />
  76.         </s:fill>
  77.     </s:Rect>
  78.     <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
  79.         <s:fill>
  80.             <s:SolidColor color="0x000000" alpha="0.09" />
  81.         </s:fill>
  82.     </s:Rect>
  83.  
  84.     <!-- layer 2: border -->
  85.     <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20">
  86.         <s:stroke>
  87.             <s:SolidColorStroke color="0x696969"
  88.                         alpha="1"
  89.                         alpha.over="1"
  90.                         alpha.down="1" />
  91.         </s:stroke>
  92.     </s:Rect>
  93.  
  94. </s:SparkSkin>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Accordion, Gumbo | No Comments » | Tags:

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll