主页 » RIA文档中心 » RIA杂志速递

在Flex 4中建立一个自定义Halo Accordion header的皮肤

Posted 七月 18th, 2009 by kenshin

这是一篇来自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里面完成的。）

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

自定义Accordion header skin，请看以下代码：

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

注意：此项目是基于测试版的Flex SDK 4，当你用新版本的Flex SDK 4编译的时候，API可以会发生改变，造成无法编译成功。

riadevID: 
瑞研社区最新地址：http://www.riadev.com/flex-thread-128-1-1.html
您给予的分值: None 平均分: 7 ( 3 票)
周一, 2009-07-27 15:42 — RIAMeeting网友

这flex文章翻译的不错

这flex文章翻译的不错，我会一直关注的，谢谢！

发表新评论

  • 网页地址和电子邮件地址将会被自动转换为链接。
  • 行和段被自动切分。
  • 您可以使用下面的标签来高亮显示您的评论内容: <code>, <blockcode>. 可以使用"[foo]".旁边显示标签样式 "<foo>" PHP代码可以用这样的区块来包含<?php ... ?> or <% ... %>

更多格式化选项信息

验证区域
系统验证：请回答下面的问题