Flex4之皮肤定制【Skin类和Skin类】          博客分类：

第一、关于spark.skin.SparkSkin类的

1.SparkSkin介绍    (1)spark.skins，这个包里面只有一个class：SparkSkin，非美工的程序员可以通过这个class来实现任意自定义控件的样式。    (2)SparkSkin是一个Group类型的容器。（它继承自Group）    (3)全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类    (4)SparkSkin：是全部Spark Class的基础类，也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类。       Skin：是SparkSkin的父类，例如ButtonBarSkin就是Skin的子类，如果想要自定义这部分组件的样式，则需要使用Skin。       综上所述，也就是可以使用SparkSkin的地方，我们使用Skin一样可以达到同样的效果。
2.SparkSkin示例    在Flex SDK 4(Gumbo)中，我们只需要将这个button的样式继承与SparkSkin或者Skin，然后在其中加入一些我想要的内容即可，请看以下的代码：
  1. <span style="font-size: medium;"><?xml version="1.0" encoding="utf-8"?>
  2. <s:SparkSkin
  3. xmlns:s="library://ns.adobe.com/flex/spark"
  4. xmlns:fx="http://ns.adobe.com/mxml/2009">
  5. <s:states>
  6. <s:State name="up"/>
  7. <s:State name="over"/>
  8. <s:State name="down"/>
  9. <s:State name="disabled"/>
  10. </s:states>
  11. <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
  12. <s:Ellipse width="100%" height="100%">
  13. <s:fill>
  14. <s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/>
  15. </s:fill>
  16. <s:stroke>
  17. <s:SolidColorStroke color="0x0c0d0d" />
  18. </s:stroke>
  19. </s:Ellipse>
  20. <s:RichText id="labelElement"
  21. fontFamily="Myriad Pro"
  22. fontSize="11"
  23. color="0xBBBBBB"
  24. textAlign="center"
  25. horizontalCenter="0"
  26. verticalCenter="1"
  27. width="100%">
  28. </s:RichText>
  29. </s:SparkSkin></span>
<?xml version="1.0" encoding="utf-8"?>

<s:SparkSkin

   xmlns:s="library://ns.adobe.com/flex/spark"

   xmlns:fx="http://ns.adobe.com/mxml/2009">

   <s:states>

      <s:State name="up"/>

      <s:State name="over"/>

      <s:State name="down"/>

      <s:State name="disabled"/>

   </s:states>

   <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>

   <s:Ellipse width="100%" height="100%">

      <s:fill>

         <s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/>

      </s:fill>

      <s:stroke>

         <s:SolidColorStroke color="0x0c0d0d" />

      </s:stroke>

   </s:Ellipse>

   <s:RichText id="labelElement"

         fontFamily="Myriad Pro"

         fontSize="11"

         color="0xBBBBBB"

         textAlign="center"

         horizontalCenter="0"

         verticalCenter="1"

         width="100%">

   </s:RichText>

</s:SparkSkin>
 
我们可以用以下几个方式： (1) Button {      skinClass: ClassReference("com.rianote.flex.skin.KButton");     } (2)<Button skinClass="com.rianote.flex.skin.KButton" /> (3)myButton.setStyle( "skinClass", Class( KButton ));
其中skinClass也是Flex SDK 4(Gumbo)里面新增加的一个class，其作用就是设定当前这个组件的Skin。 主程序：
  1. <span style="font-size: medium;"><?xml version='1.0' encoding='UTF-8'?>
  2. <s:Application xmlns:s="library://ns.adobe.com/flex/spark"
  3. xmlns:fx="http://ns.adobe.com/mxml/2009"
  4. height="254" width="576">
  5. <fx:Script>
  6. <![CDATA[
  7. import com.rianote.flex.skin.Button;
  8. ]]>
  9. </fx:Script>
  10. <s:Button x="54" y="56" skinClass="com.rianote.flex.skin.Button" height="32"
  11. width="77" label="Button"/>
  12. </s:Application>
  13. </span>
<?xml version='1.0' encoding='UTF-8'?>

<s:Application xmlns:s="library://ns.adobe.com/flex/spark"

   xmlns:fx="http://ns.adobe.com/mxml/2009"

   height="254" width="576">

   <fx:Script>

      <![CDATA[

         import com.rianote.flex.skin.Button;

      ]]>

  </fx:Script>

   <s:Button x="54" y="56" skinClass="com.rianote.flex.skin.Button" height="32"

         width="77" label="Button"/>

</s:Application>
  3.SparkSkin示例解释    自定义Button的mxml的代码解释： (1)<s:SparkSkin        xmlns:s="library://ns.adobe.com/flex/spark"        xmlns:fx="http://ns.adobe.com/mxml/2009"> </s:SparkSkin> 含义：    如果要自定义控件样式，必须要要继承SparkSkin或者Skin，关于二者的区别我在上一篇文章中已经叙述了。
(2)<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata> 含义：    我们要修改的是spark.components.Button的外形，Flex SDK 4(Gumbo)新增了一个matadata tag：HostComponent.同时，Metadata也由原来的mx:变成了现在的fx，因为namespace发生了改变。
(3)<s:states>       <s:State name="up"/>       <s:State name="over"/>       <s:State name="down"/>       <s:State name="disabled"/> </s:states> 含义：    定义了Button的四种状态：up、down、over、disabled。这是Flex SDK 4(Gumbo)新增的一种功能，用State来描述状态。    在Flex SDK 3的情况下，只能描述UI的不同状态，而在Flex SDK 4(Gumbo)中，又赋予了State描述控件状态的功能。
(4)<s:Ellipse width="100%" height="100%"> </s:Ellipse> 含义：    画一个圆形（椭圆形）的图形，而Ellipse也是Flex SDK 4(Gumbo)新增一个包：spark.primitives里面的一个class。    spark.primitives里面定义了一些图形，例如：Ellipse、Rect、Path、Line等class。同样根据这些class name就可以得出是做什么用的。
(5)<s:fill>       <s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/>    </s:fill> 含义：    设定填充的方式（SolidColor）填充颜色值0x131313的颜色，color.over是指鼠标移动上去后的颜色，color.down是鼠标按下时候的颜色。    引申一下，还有color.up、color.display，通过这些值就可以描述四种状态时的颜色。 另外，请注意一下，SolidColor外层必须要有<s:fill>否则会出现错误。而fill的含义是：填充。
(6)<s:stroke>       <s:SolidColorStroke color="0x0c0d0d" />    </s:stroke> 含义：    设定边线的颜色（SolidColorStroke）当然也可以设定诸如：color.up、color.display、color.down、color.over的颜色。    同样SolidColorStroke必须在stroke内部，而stroke的含义：设定边框。
(7)我们在重新看一下这些代码的意义： <s:Ellipse width="100%" height="100%">       <s:fill>             <s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/>       </s:fill>       <s:stroke>             <s:SolidColorStroke color="0x0c0d0d" />       </s:stroke> </s:Ellipse> 含义：    定义一个圆形（因为宽和高相等）然后填充一个0x131313的颜色，并且设定鼠标移上、按下时的颜色值（color.over="#191919" color.down="#ffffff"）然后在定义一个边框，设定颜色为0x0c0d0d。
(8)<s:RichText id="labelElement"       fontFamily="Myriad Pro"       fontSize="11"       color="0xBBBBBB"       textAlign="center"       horizontalCenter="0"       verticalCenter="1"       width="100%"> </s:RichText> 含义：    上面的代码定义了Button中可以显示文字的部分。注意，id必须设定为labelElement，否则出错。其他的样式可以自行设定了。
主程序：    <s:Button x="54" y="56" skinClass="com.rianote.flex.skin.Button" height="32" width="77" label="Button"/>    我们要注意的地方：skinClass，这也是Flex SDK 4(Gumbo)新增加的一个class，专门用来设定当前皮肤的properties，请注意skinClass只适用于Spark包里面的可视化控件。    以上就是这个简单的自定义Button的代码详解了，通过以上的例子，我们在Flex SDK 4(Gumbo)可以通过继承SparkSkin、Skin和skinClass的方式很简单的实现自定义组件的皮肤。
4.halo包使用定义的皮肤 看以下的代码： <fx:Style>     .sparkButtonStyle {          skin: ClassReference("com.rianote.flex.skin.KButton");     } </fx:Style> <mx:Button label="我是halo组件" styleName="sparkButtonStyle"/>
再让我们对比一下spark组件的写法： <fx:Style> Button {     skinClass: ClassReference("com.rianote.flex.skin.KButton"); } </fx:Style> <s:Button label="我是spark组件" skinClass="com.rianote.flex.skin.KButton" />
参考文献： 1.Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin .http://www.k-zone.cn/zblog/post/flash-builder-gumbo-customer-sparkskin.html
 
第二、关于spark.components.supportClasses.Skin类的
 Spark 皮肤是 Flex 4 中的一个新特性。spark.skins 包包含在 Spark 名称空间中，并且已在Adobe 的 Flex 4 LiveDocs 中说明：“自定义 Spark 皮肤为 MXML 文件，定义组成 Spark 组件皮肤的逻辑、图形元素和其他对象”。那么这对于您意味着什么呢？我希望这篇文章能为您解答这个问题。 请注意：本示例是使用 Flex 4 SDK 构建版本（nightly build）4.0.0.8702 开发的，可在此处找到该版本。 我曾经想过在示例中为一个类似于 Spark DropDownList 的组件添加皮肤，后来决定使用一个容易理解的组件，所以我选择了 Spark 按钮。这个按钮非常简单，使用起来很容易上手，但它仍然是交互式的，我们可以看到用户交互的结果。了解这一点之后，我们开始动手制作。 需要做的第一件事是创建一个基于 spark.components.supportClasses.Skin 的新 MXML 组件，将其命名为 myButtonSkin。我在我的 com.fincanon.skins 包中创建了这个组件，显然您也可以在合适的包中创建它。另外，出于个人爱好，我删除了默认的 400x300 的尺寸。我们将把 Layout 选项设置保留为默认值 spark.layouts.BasicLayout。
 
新 MXML 组件
生成的皮肤“shell”简单地建立了 ff:、s: 和 mx: 名称空间，并且将布局设置为 BasicLayout。关于这些名称空间的更多信息，请在 Adobe Developer Connection 上阅读文章 Flex 3 与 Flex 4 beta 之间的差异。新的 Spark 皮肤 shell：
  1. <span style="font-size: medium;"><?xml version="1.0" encoding="utf-8"?>
  2. <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
  3. xmlns:s="library://ns.adobe.com/flex/spark"
  4. xmlns:mx="library://ns.adobe.com/flex/halo">
  5. <s:layout>
  6. <s:BasicLayout/>
  7. </s:layout>
  8. </s:Skin></span>
<?xml version="1.0" encoding="utf-8"?>

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"

    xmlns:s="library://ns.adobe.com/flex/spark"

    xmlns:mx="library://ns.adobe.com/flex/halo">

    <s:layout>

        <s:BasicLayout/>

    </s:layout>

</s:Skin>
现在我们有了一个空 shell，我们需要填充它，分别使用 <fx:Metadata> 标记和 <s:states>标记定义主机组件和状态。当定义主机组件时，可以从皮肤中访问该主机组件中包含的公开属性和样式。因为我们要在此处为一个按钮添加皮肤，所以您应该不会奇怪，主机组件也需要是一个按钮（您可能已经猜到了）。定义主机组件和皮肤状态：
<fx:Metadata>     [HostComponent("spark.components.Button")] </fx:Metadata>
<s:states>     <mx:State name="up"/>     <mx:State name="down"/>     <mx:State name="over"/>     <mx:State name="disabled"/> </s:states>
现在，我们开始向皮肤添加一些可视元素。如果按钮具有投影是不是比较美观呢？如果投影能够根据当前状态改变是不是更好呢？我们将更改 over 状态中的 alpha、distance、blurX 和 blurY 值，同时将 down 状态中的整个投影更改为内部阴影。从以下代码可以看出，可以更改每个状态的属性，只需将状态名称添加到所关注的属性中即可。例如，所有状态的投影的 alpha 属性都设置为 0.5。但是，通过添加 alpha.over="0.3"，我们可以更改单个状态的属性。
添加投影：
<s:filters>     <s:DropShadowFilter quality="3"         alpha="0.5" alpha.over="0.3"         distance="5" distance.over="15"         blurX.over="15" blurY.over="15"         inner.down="true"/> </s:filters>
接下来，填充皮肤的背景。我将使用带有细微圆角的渐变绿色背景，但是您可以随意使用任何样式的背景。为了创建背景，我们将使用包含一个 Spark fill 和一个 Halo LinearGradient 的 Spark Rect 组件。我们混合并匹配 mx: 名称空间（Halo）与 s: 名称空间（Spark）。为什么这样做呢？因为我们可以这样做。
为背景使用一个 Spark Rect：
<s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">      <s:fill>           <mx:LinearGradient rotation="90">                <mx:entries>                     <mx:GradientEntry color="#0a5c00" ratio="0.00"/>                     <mx:GradientEntry color="#84a381" ratio="0.40" ratio.over="0.25"/>                     <mx:GradientEntry color="#0a5c00" ratio="0.80"/>                </mx:entries>           </mx:LinearGradient>      </s:fill> </s:Rect>
我们快速查看一下背景代码。首先可以看到左侧、右侧、顶部和底部样式都设置为 0。这告诉背景 Rect，它需要拉伸到按钮的所有 4 边。Rect 中接下来是 radiusX 和 radiusY（您可能已经知道这两项就是以前的 cornerRadius）。我在此处将它们都设置为 5，但是在此示例末尾，我将展示对它们的两种不同操作方法。 Rect 内部是 Spark fill，Spark fill 中包含 Halo LinearGradient。为了使颜色按我们希望的方向渐变，我们将 rotation 属性设置为 90（默认值为 0，表示从左到右渐变）。LinearGradient 内部是 entries 属性，它是一个 GradientEntry 类数组。GradientEntry 的 color 属性是将在 LinearGradient 中的该点设置的颜色；ratio 属性是一个百分比（从 0.0 到 0.1），表示渐变到此颜色的起始百分比。您将注意到，我们更改了中间的 GradientEntry 的 over 状态中的 ratio（ratio.over="0.25"），对阴影的 alpha 属性也进行过这样的操作。 最后，我们添加按钮的标签。这一步非常简单，因为我们所需做的只是使用一个 Spark SimpleText 控件并设置两个属性和样式。在此示例中真正需要修改的地方是 id，它必须为 "labelDisplay"，因为这是 Spark Button 在尝试定位其标签时将要查找的名称。本例中使用的其他属性和样式用于设置标签的颜色和位置，以及标签的边框。要使加宽或增高按钮，可以更改左侧、右侧、顶部和底部样式。
添加标签：
<s:SimpleText id="labelDisplay" color="#ffffff"      horizontalCenter="0" verticalCenter="0"      left="10" right="10" top="5" bottom="5"/>
现在，要为应用程序中的按钮添加皮肤，只需将该按钮的 skinClass 指向自定义皮肤即可。定义按钮的 skinClass：
<s:Button label="Spark Skins!" skinClass="com.fincanon.skins.myButtonSkin"/>
最后，我们看一下所有代码，以及生成的按钮（位于代码下方）。
  1. <span style="font-size: medium;"><?xml version="1.0" encoding="utf-8"?>
  2. <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
  3. xmlns:s="library://ns.adobe.com/flex/spark"
  4. xmlns:mx="library://ns.adobe.com/flex/halo">
  5. <fx:Metadata>
  6. [HostComponent("spark.components.Button")]
  7. </fx:Metadata>
  8. <s:states>
  9. <mx:State name="up"/>
  10. <mx:State name="down"/>
  11. <mx:State name="over"/>
  12. <mx:State name="disabled"/>
  13. </s:states>
  14. <s:filters>
  15. <s:DropShadowFilter quality="3"
  16. alpha="0.5" alpha.over="0.3"
  17. distance="5" distance.over="15"
  18. blurX.over="15" blurY.over="15"
  19. inner.down="true"/>
  20. </s:filters>
  21. <s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
  22. <s:fill>
  23. <mx:LinearGradient rotation="90">
  24. <mx:entries>
  25. <mx:GradientEntry color="#0a5c00" ratio="0.00"/>
  26. <mx:GradientEntry color="#84a381" ratio="0.40" ratio.over="0.25"/>
  27. <mx:GradientEntry color="#0a5c00" ratio="0.80"/>
  28. </mx:entries>
  29. </mx:LinearGradient>
  30. </s:fill>
  31. </s:Rect>
  32. <s:SimpleText id="labelDisplay" color="#ffffff"
  33. horizontalCenter="0" verticalCenter="0"
  34. left="10" right="10" top="5" bottom="5"/>
  35. <s:layout>
  36. <s:BasicLayout/>
  37. </s:layout>
  38. </s:Skin></span>
<?xml version="1.0" encoding="utf-8"?>

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"

     xmlns:s="library://ns.adobe.com/flex/spark"

     xmlns:mx="library://ns.adobe.com/flex/halo">

     <fx:Metadata>

          [HostComponent("spark.components.Button")]

     </fx:Metadata>

     <s:states>

          <mx:State name="up"/>

          <mx:State name="down"/>

          <mx:State name="over"/>

          <mx:State name="disabled"/>

     </s:states>

     <s:filters>

          <s:DropShadowFilter quality="3"

               alpha="0.5" alpha.over="0.3"

               distance="5" distance.over="15"

               blurX.over="15" blurY.over="15"

               inner.down="true"/>

     </s:filters>

     <s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">

          <s:fill>

               <mx:LinearGradient rotation="90">

                    <mx:entries>

                         <mx:GradientEntry color="#0a5c00" ratio="0.00"/>

                         <mx:GradientEntry color="#84a381" ratio="0.40" ratio.over="0.25"/>

                         <mx:GradientEntry color="#0a5c00" ratio="0.80"/>

                    </mx:entries>

               </mx:LinearGradient>

          </s:fill>

     </s:Rect>

     <s:SimpleText id="labelDisplay" color="#ffffff"

          horizontalCenter="0" verticalCenter="0"

          left="10" right="10" top="5" bottom="5"/>

     <s:layout>

          <s:BasicLayout/>

     </s:layout>

</s:Skin>
添加了皮肤的新按钮： 现在快速对 radiusX 和 radiusY 执行以下操作（如前面所述）。首先，看一下将它们都设置为负数时会发生什么：将 radiusX 和 radiusY 更改为 -10
<s:Rect left="0" right="0" top="0" bottom="0" radiusX="-10" radiusY="-10">      <s:fill>           <mx:LinearGradient rotation="90">                <mx:entries>                     <mx:GradientEntry color="#0a5c00" ratio="0.00"/>                     <mx:GradientEntry color="#84a381" ratio="0.40" ratio.over="0.25"/>                     <mx:GradientEntry color="#0a5c00" ratio="0.80"/>                </mx:entries>           </mx:LinearGradient>      </s:fill> </s:Rect>
负 radiusX 和 radiusY 值： 接下来，将 radiusX 设置为正数，将 radiusY 设置为负数：
<s:Rect left="0" right="0" top="0" bottom="0" radiusX="20" radiusY="-10">      <s:fill>           <mx:LinearGradient rotation="90">                <mx:entries>                     <mx:GradientEntry color="#0a5c00" ratio="0.00"/>                     <mx:GradientEntry color="#84a381" ratio="0.40" ratio.over="0.25"/>                     <mx:GradientEntry color="#0a5c00" ratio="0.80"/>                </mx:entries>           </mx:LinearGradient>      </s:fill> </s:Rect>
正 radiusX 值和负 radiusY 值： 最后，交换一下，也就是将 radiusX 设置为负数，将 radiusY 设置为正数：
<s:Rect left="0" right="0" top="0" bottom="0" radiusX="-10" radiusY="20">      <s:fill>           <mx:LinearGradient rotation="90">                <mx:entries>                     <mx:GradientEntry color="#0a5c00" ratio="0.00"/>                     <mx:GradientEntry color="#84a381" ratio="0.40" ratio.over="0.25"/>                     <mx:GradientEntry color="#0a5c00" ratio="0.80"/>                </mx:entries>           </mx:LinearGradient>      </s:fill> </s:Rect>
负 radiusX 值和正 radiusY 值： 这篇文章到此就结束了。您可以随意使用 Flex 4 中各种不同的 Spark 皮肤。

最新文章

  1. 【原创】开源Math.NET基础数学类库使用(06)直接求解线性方程组
  2. .PRT extension and multiple NX versions
  3. Shell脚本_判断apache是否启动
  4. eclipse debug 过滤一些包
  5. DataGridView控件的使用---添加行
  6. dd命令测试linux磁盘读写速度
  7. webapp中的日期选择
  8. ML.NET指南
  9. [Deep Learning] 常用的Active functions &amp; Optimizers
  10. Win7 查看端口占用的进程，并根据进程id杀死进程。
  11. Excel列名序号互转
  12. 虚拟机下Linux安装jdk
  13. s - t 平面图最大流 （附例题 bzoj 1001）
  14. STL整理之set
  15. Javascript面向对象编程（三）：非构造函数的继承（对象的深拷贝与浅拷贝）
  16. 使用UTL_HTTP时遭遇ORA-29273
  17. 对Django框架架构和Request/Response处理流程的分析（转）
  18. javaScript高级教程（一）javaScript 1.6 Array 新增函数
  19. 【vue系列】elementUI 穿梭框右侧获取当前选中项的值的思路
  20. Linux 文件缓存 (一)

热门文章

  1. 转--&gt;&gt;mysql的bin log
  2. servlet中如何实现通过Spring实现对象的注入
  3. vue配置手机通过IP访问,Win10让局域网内其他电脑通过IP访问网站的方法
  4. postgresql 表触发器
  5. Oracle的问题的解决
  6. domain
  7. Vue 组件&amp;组件之间的通信 之 非父子关系组件之间的通信
  8. asp.net core 同时添加Identity和Bearer认证
  9. vue-自主研发非父子关系组件之间通信的问题
  10. Mac appStore下载软件报500错误的解决方法