flex4自定义皮肤

红太狼 2023-08-17 15:51 140阅读 0赞

**(注：现在flex4方面的讲解比较少，在网上发现了这么一篇样式的文章还不错，所以贴过来查时方便，也为大家提供一下浏览，呵呵。)**

**在Flex4新增加了一个包：spark.skins，这个包里面只有一个类：SparkSkin，而我们（非美工的程序员）通过这个class来实现任意自定义控件的样式。** 
通过上述关系可以得出如下的结论： 
1、SparkSkin是一个Group类型的容器。（它继承与Group） 
2、是全部Spark类的基础类，也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类） 
 
注意Skin，这个类是SparkSkin的父类，同时Skin继承与Group。 
 
Skin： 
是SparkSkin的父类，例如ButtonBarSkin就是Skin的子类，如果想要自定义这部分组件的样式，则需要使用Skin。 
 
SparkSkin： 
是全部Spark类的基础类，也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类。 
 
综上所述，用SparkSkin和Skin都可达到同样的效果。 
 
在Flex4中，我们只需要将这个button的样式继承与SparkSkin或者Skin，然后在其中加入一些想要的内容即可，请看以下代码： 
<?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="\#FFFF00“ color.over="\#00FF00" color.down="\#FF0000"/> 
</s:fill> 
<s:stroke> 
<s:SolidColorStroke color="0x00FFFF" /> 
</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("cn.xuedi.SelfButton"); 
    \} 
 
2、myButton.setStyle( "skinClass", Class(cn.xuedi.SelfButton)); 
 
3、<Button skinClass="cn.xuedi.SelfButton" /> 
 
其中skinClass也是Flex4里面新增加的一个类，其作用就是设定当前这个组件的Skin。 
 
主程序： 
<?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" 
backgroundColor="\#222222" > 
<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> 
 
\----------------------------------------------------------------------------------------- 
 
以上代码解释： 
 
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的外形，Flex4新增了一个matadata tag：HostComponent 
同时，Metadata也由原来的mx:变成了现在的fx，因为名称空间发生了改变。 
 
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。这是Flex4新增的一种功能，用State来描述状态。 
在Flex3的情况下，只能描述UI的不同状态，而在Flex4中，又赋予了State描述控件状态的功能。 
 
4、 
<s:Ellipse width="100%" height="100%"></s:Ellipse> 
含义： 
画一个圆形（椭圆形）的图形，而Ellipse也是Flex4新增一个包：spark.primitives里面的一个类。 
spark.primitives里面定义了一些图形，例如：Ellipse、Rect、Path、Line等类。同样根据这些类名就可以得出是做什么用的。 
 
5、 
<s:fill> 
   <s:SolidColor color="\#FFFF00" color.over="\#00FF00" color.down="\#FF0000"/> 
</s:fill> 
含义： 
设定填充的方式（SolidColor）填充颜色值FFFF00的颜色，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="FFFF00" color.over="\#00FF00" color.down="\#FF0000"/> 
   </s:fill> 
   <s:stroke> 
       <s:SolidColorStroke color="\#00FFFF" /> 
   </s:stroke> 
</s:Ellipse> 
含义： 
定义一个圆形（因为宽和高相等）然后填充一个0xFFFF00的颜色，并且设定鼠标移上、按下时的颜色值（color.over="\#00FF00" color.down="\#FF0000"） 
然后在定义一个边框，设定颜色为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，这也是Flex4新增加的一个类，专门用来设定当前皮肤的properties，请注意skinClass只适用于Spark包里面的可视化控件。 
 
以上就是通过继承SparkSkin、Skin和skinClass的方式很简单的实现自定义组件的皮肤。

下面的表格描述的是 spark.components 包中定义的 Spark容器：  
更多 Flex 示例，请访问 [http://www.slsay.com][http_www.slsay.com]

下面的表格描述的是 mx.core 和 mx.components 包中定义的 Spark容器：

<table> 
 <tbody> 
 <tr> 
 <td style="border:#ffffff;"> Container </td> 
 <td style="border:#ffffff;"> 类型 </td> 
 <td style="border:#ffffff;"> 说明 </td> 
 </tr> 
 <tr> 
 <td style="border:#ffffff;"> Accordion </td> 
 <td style="border:#ffffff;"> Navigator </td> 
 <td style="border:#ffffff;"> 在一系列的子 Panel 容器中组织信息。这些子 Panel 容器每次只能有一个被激活。 </td> 
 </tr> 
 <tr> 
 <td style="border:#ffffff;"> Application </td> 
 <td style="border:#ffffff;"> Layout </td> 
 <td style="border:#ffffff;"> 应用程序中的第一个容器，其默认布局方式为绝对布局 </td> 
 </tr> 
 <tr> 
 <td style="border:#ffffff;"> ApplicationControlBar </td> 
 <td style="border:#ffffff;"> Layout </td> 
 <td style="border:#ffffff;"> 展示提供全局导航及应用程序命令的构件的容器，可停靠在应用程序的顶部。 </td> 
 </tr> 
 <tr> 
 <td style="border:#ffffff;"> Box(HBox &amp; VBox) </td> 
 <td style="border:#ffffff;"> Layout </td> 
 <td style="border:#ffffff;"> 以统一的行列间隔展示内容。Adobe建议有可能的话尽量使用 Spark 容器来代替 Halo Box 容器。 </td> 
 </tr> 
 <tr> 
 <td style="border:#ffffff;"> Canvas </td> 
 <td style="border:#ffffff;"> Layout </td> 
 <td style="border:#ffffff;"> 必须确定其子元素的位置的时候需要定义的一种容器。Adobe建议有可能的话尽量使用带有BasicLayout属性的Spark容器来代替Halo Canvas容器。 </td> 
 </tr> 
 <tr> 
 <td style="border:#ffffff;"> ControlBar </td> 
 <td style="border:#ffffff;"> Layout </td> 
 <td style="border:#ffffff;"> 在Panel或者TilteWindow容器的底部放置控件的容器。 </td> 
 </tr> 
 <tr> 
 <td style="border:#ffffff;"> DividedBox(HDividedBox &amp; VDividedBox) </td> 
 <td style="border:#ffffff;"> Layout </td> 
 <td style="border:#ffffff;"> 以水平或者垂直的方式放置其子元素的一种容器，跟Box容器很像，除了它能够在其子元素中间插入了可可调节的分隔符。 </td> 
 </tr> 
 <tr> 
 <td style="border:#ffffff;"> Form </td> 
 <td style="border:#ffffff;"> Layout </td> 
 <td style="border:#ffffff;"> 以标准的表格格式来排列其子元素的一种容器。 </td> 
 </tr> 
 <tr> 
 <td style="border:#ffffff;"> Grid </td> 
 <td style="border:#ffffff;"> Layout </td> 
 <td style="border:#ffffff;"> 一行列单元格的方式排列其子元素，就像HTML中的Table。 </td> 
 </tr> 
 <tr> 
 <td style="border:#ffffff;"> Panel </td> 
 <td style="border:#ffffff;"> Layout </td> 
 <td style="border:#ffffff;"> 展示标题栏、标题、边框及其子元素。默认布局方式为绝对布局。Adobe建议如果可能的话尽量使用 Spark Panel，来代替 Halo Panel 容器。 </td> 
 </tr> 
 <tr> 
 <td style="border:#ffffff;"> TabNavigator </td> 
 <td style="border:#ffffff;"> Navigator </td> 
 <td style="border:#ffffff;"> 展示带若干标签的容器，是用户在不同的内容域中进行选择。 </td> 
 </tr> 
 <tr> 
 <td style="border:#ffffff;"> Tile </td> 
 <td style="border:#ffffff;"> Layout </td> 
 <td style="border:#ffffff;"> 定义一个将其子元素按多行或列来排列的布局。Adobe建议如果可能的话尽量使用带TileLayout的Spark容器，来代替Halo Tile容器。 </td> 
 </tr> 
 <tr> 
 <td style="border:#ffffff;"> TitleWindow </td> 
 <td style="border:#ffffff;"> Layout </td> 
 <td style="border:#ffffff;"> 展示一个带有标题栏、标题、边框、关闭按钮及其子元素的弹出式窗口。用户可以任意移动此容器。 </td> 
 </tr> 
 <tr> 
 <td style="border:#ffffff;"> ViewStack </td> 
 <td style="border:#ffffff;"> Navigator </td> 
 <td style="border:#ffffff;"> 定义一个每次只展示一个容器的容器栈。 </td> 
 </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/JPAORM/archive/2011/04/24/2509810.html

[http_www.slsay.com]: http://uh.9ria.com/link.php?url=http://www.slsay.com%2F