`
shlei
  • 浏览: 288635 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Flex4之皮肤定制【Skin类和Skin类】

flex 
阅读更多
第一、关于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，然后在其中加入一些我想要的内容即可，请看以下的代码： 
<span style="font-size: medium;"><?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></span>
 


我们可以用以下几个方式：
(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。
主程序： 
<span style="font-size: medium;"><?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>  
</span>
 

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.

第二、关于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： 
<span style="font-size: medium;"><?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></span>
 

现在我们有了一个空 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"/>
最后，我们看一下所有代码，以及生成的按钮（位于代码下方）。 
<span style="font-size: medium;"><?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></span>
 

添加了皮肤的新按钮：
现在快速对 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 皮肤。

From http://javacrazyer.iteye.com/blog/719450
http://ctwen.iteye.com/blog/654848
分享到：
| 基于 Cairngorm MVC 框架的 Flex 程序设计 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    FLEX4的皮肤skin

    在Flex 4中，皮肤（Skin）是一种强大的机制，用于改变和定制UI组件的外观和交互体验。本文将深入探讨FLEX4中的皮肤系统，特别是SparkSkin类，并通过实例展示如何创建和应用自定义皮肤。 1. SparkSkin的介绍： ...

    flex4自定义组件皮肤

    Flex4是一种基于ActionScript3和Flash Player的开源框架，用于构建富互联网应用程序（RIA）。它提供了丰富的组件库，包括MX和Spark两个主要组件集。在Flex4中，自定义组件皮肤是提升应用视觉效果和用户体验的重要...

    flex4 皮肤

    首先，让我们了解一下Flex4中的皮肤类层次。基础的皮肤类是Skin，它提供了一种将样式、图形和子组件组合在一起的方法。在Flex4中，每个可视组件（如Button、Label等）都有一个或多个关联的皮肤类。这些皮肤类通常是...

    Flex4的皮肤文档及demo

    本主题主要围绕`SparkSkin`类和`Skin`类展开，这两类在Flex4的皮肤定制中扮演着核心角色。 **SparkSkin介绍** `SparkSkin`是Flex4中用于创建Spark组件皮肤的主要类，位于`spark.skins`包下。它是一个`Group`类型的...

    flex skin 皮肤资源

    在Flex中，皮肤通常以ActionScript类的形式存在，这些类扩展了Flex框架提供的BaseSkin或Skin类，并覆盖了特定组件的绘制方法，如drawBackground()和drawBorder()。开发者可以通过修改这些类来调整皮肤的细节，比如...

    Flex4 Spark皮肤

    1. **MXML代码方式**：直接在MXML文件中设置 `skinClass` 属性为定义好的皮肤类的完整命名空间路径。例如： ```xml ``` 2. **ActionScript代码方式**：在ActionScript代码中设置控件的 `skinClass` 属性。 ```...

    flex4 TabBar skin

    flex4 TabBar skin

    dh.rar_flex cool me_flex menu skin_flex 导航_flex4 menu_flex4 menu

    这个"dh.rar_flex cool me_flex menu skin_flex 导航_flex4 menu_flex4 menu"的压缩包文件，显然是与Flex4相关的资源，特别是关于创建酷炫的菜单导航和皮肤设计。 在Flex4中，菜单（Menu）是一种常见的用户界面元素...

    Flex4皮肤资料

    在Flex4中，皮肤（skin）是一种用于控制UI组件外观的设计模式，允许开发者和设计师定制组件的视觉表现，而不必触及组件的核心功能代码。这不仅提高了开发效率，还实现了设计与逻辑的分离，使得UI设计更加灵活且易于...

    flex主题(skin)

    Flex主题（Skin）是Adobe Flex框架中的一个重要概念，它关乎应用程序的外观和用户体验。在Flex中，皮肤定义了UI...通过灵活地切换和定制皮肤，开发者可以创造出独具特色的Flex应用程序，满足多样化的设计和功能需求。

    skin_Flex_程序皮肤

    开发者可以自定义已有的皮肤类，或者从头创建新的皮肤类。一旦皮肤创建完成，可以通过设置组件的`skinClass`属性来应用。 四、Flex皮肤的灵活性 Flex支持动态更换皮肤，这意味着用户可以根据需求在运行时改变应用的...

    flex皮肤flex皮肤

    每个Flex组件都有一个与之关联的皮肤类，这个类定义了组件的外观。开发者可以通过继承已有的皮肤类并重写其属性来创建新的皮肤。 5. **MXML与ActionScript皮肤** - **MXML皮肤**：使用MXML语法，可以直接在XML中...

    三个Flex的皮肤

    在本主题中，我们重点关注的是Flex中的“皮肤”这一概念，这关系到Flex应用的外观和用户界面的定制。 首先，让我们了解什么是Flex皮肤。在Flex中，皮肤是一种可以改变组件外观和行为的可替换资源。通过更换皮肤，...

    Flex help之Flex 皮肤

    4. **创建皮肤组件**：在Flex项目中，使用MXML或ActionScript编写皮肤类。导入导出的图形资源，并将其添加到相应的皮肤部件中。 5. **关联皮肤与组件**：在组件类中，通过设置`skinClass`属性来指定使用的皮肤类。...

    FLEX4的皮肤制作教程

    ### FLEX4的皮肤制作教程 #### 一、SparkSkin介绍 ...综上所述，SparkSkin和Skin是Flex 4中非常重要的概念，它们提供了强大的工具来定制UI组件的外观。通过理解和掌握这些技术，可以显著提升应用程序的用户体验。

    flex蓝色经典皮肤

    4. ActionScript或MXML源代码：可能包含了自定义的皮肤类，扩展了Flex的内置组件。 使用Flex蓝色经典皮肤的步骤大致如下： 1. 导入皮肤资源：将解压后的"blueplastic"文件夹中的资源引入到项目中。 2. 引用皮肤类...

    Flex Skin Photoshop

    Flex Skin是Adobe Photoshop的一款扩展插件，主要用于设计和定制Adobe Flex应用程序的用户界面皮肤。这款插件使得在Photoshop中创建和编辑Flex皮肤变得更加便捷，从而提升了开发人员和UI设计师的工作效率。 首先，...

    flex windowsXP 皮肤

    总的来说，"flex windowsXP 皮肤"是一个让Flex应用具备Windows XP风格外观的解决方案，包括一个CSS样式表和一个包含相关皮肤类的SWC库。开发者可以利用这些资源轻松改变Flex应用的界面，使其具有传统桌面操作系统的...

    Flex实时加载Skin

    在Flex开发中，皮肤（Skin）是用户界面组件的重要组成部分，它定义了组件的外观和交互样式。实时加载Skin是一种优化用户体验和提高应用灵活性的技术。本文将深入探讨Flex实时加载Skin的概念、方法以及相关的技巧。 ...

    Flex4 自定义组件皮肤小结

    首先，我们要理解Flex4的皮肤类层次结构。核心的皮肤基类是`spark.components.supportClasses.Skin`，所有自定义皮肤都应该继承这个类。皮肤由多个部分组成，如状态、部件（Part）和图形元素（Graphic Element）。每...

Magicbox
Global site tag (gtag.js) - Google Analytics