Flex 4中如何创建头部背景为图片的Accordion的例子

By Minidxer | November 3, 2009

和前面Flex 4中如何设置Halo DataGrid头部为图片背景的例子类似的，接下来的例子演示了Flex 4中如何通过headerStyleName和skin样式，创建头部背景为图片的Accordion的。

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


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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Halo_Accordion_headerStyleName_skin_test"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         xmlns:mx="library://ns.adobe.com/flex/halo">
  6.  
  7.     <fx:Style>
  8.         @namespace s "library://ns.adobe.com/flex/spark";
  9.         @namespace mx "library://ns.adobe.com/flex/halo";
  10.  
  11.         .accordionHeaderStyles {
  12.             skin: ClassReference("skins.CustomAccordionHeaderSkin");
  13.         }
  14.     </fx:Style>
  15.  
  16.     <mx:Accordion id="accordion"
  17.             headerStyleName="accordionHeaderStyles"
  18.             width="80%" height="80%"
  19.             horizontalCenter="0" verticalCenter="0">
  20.         <mx:VBox label="Red" />
  21.         <mx:VBox label="Orange" />
  22.         <mx:VBox label="Yellow" />
  23.         <mx:VBox label="Green" />
  24.         <mx:VBox label="Blue" />
  25.     </mx:Accordion>
  26.  
  27. </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 1: fill -->
  20.     <s:Rect left="1" right="1" top="1" bottom="1" alpha="0.6">
  21.         <s:fill>
  22.             <s:BitmapFill source="@Embed('assets/pattern_147.gif')" />
  23.         </s:fill>
  24.     </s:Rect>
  25.  
  26.     <!-- layer 2: fill lowlight -->
  27.     <s:Rect left="1" right="1" bottom="1" height="9">
  28.         <s:fill>
  29.             <s:LinearGradient rotation="90">
  30.                 <s:GradientEntry color="black" alpha="0.0099" />
  31.                 <s:GradientEntry color="black" alpha="0.0627" />
  32.             </s:LinearGradient>
  33.         </s:fill>
  34.     </s:Rect>
  35.  
  36.     <!-- layer 3: fill highlight -->
  37.     <s:Rect left="1" right="1" top="1" height="9">
  38.         <s:fill>
  39.             <s:SolidColor color="white"
  40.                     alpha="0.33"
  41.                     alpha.over="0.22"
  42.                     alpha.down="0.12" />
  43.         </s:fill>
  44.     </s:Rect>
  45.  
  46.     <!-- layer 4: highlight stroke (all states except down) -->
  47.     <s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="down">
  48.         <s:stroke>
  49.             <s:LinearGradientStroke rotation="90">
  50.                 <s:GradientEntry color="white" alpha.over="0.22" />
  51.                 <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
  52.             </s:LinearGradientStroke>
  53.         </s:stroke>
  54.     </s:Rect>
  55.  
  56.     <!-- layer 5: highlight stroke (down state only) -->
  57.     <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
  58.         <s:fill>
  59.             <s:SolidColor color="black" alpha="0.07" />
  60.         </s:fill>
  61.     </s:Rect>
  62.     <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
  63.         <s:fill>
  64.             <s:SolidColor color="black" alpha="0.07" />
  65.         </s:fill>
  66.     </s:Rect>
  67.     <s:Rect left="1" top="1" right="1" height="1" includeIn="down">
  68.         <s:fill>
  69.             <s:SolidColor color="black" alpha="0.25" />
  70.         </s:fill>
  71.     </s:Rect>
  72.     <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
  73.         <s:fill>
  74.             <s:SolidColor color="black" alpha="0.09" />
  75.         </s:fill>
  76.     </s:Rect>
  77.  
  78.     <!-- layer 6: border -->
  79.     <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20">
  80.         <s:stroke>
  81.             <s:SolidColorStroke color="0x696969"
  82.                     alpha="1"
  83.                     alpha.over="1"
  84.                     alpha.down="1" />
  85.         </s:stroke>
  86.     </s:Rect>
  87.  
  88. </s:SparkSkin>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

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

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

5 comments | Add One

  1. bo0liu - 11/3/2009 at 12:22 pm

    例子怎么是DataGrid的？

  2. Minidxer - 11/3/2009 at 9:20 pm

    Sorry, fixed. :)

  3. 期货开户 - 11/5/2009 at 7:47 pm

    写的不错，顶一下，也希望能到我哪里看看！

  4. seny - 08/25/2010 at 10:34 am

    我非常喜欢你这个网站，收益匪浅，我想提点小建议，就是希望你能不能在一些关键的知识点中加点儿注释如： skin: ClassReference(”skins.CustomAccordionHeaderSkin”);

  5. 镜子 - 01/13/2011 at 10:41 am

    同意seny的观点，对于我们这些初学者来说，要是有注释会更容易上手

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll