Flex 4 中Spark组件利用SkinClass外观设计
原文:http://ctwen.iteye.com/blog/654848
?
1.Flex 4 默认为Spark主题，Spark组件的外观设计与之前相比也变得更简单高效。
Spark组件都不包含可视外观属性，所有这类信息都包含在外观文件SkinClass中。
SkinClass借助 FXG和状态语法完成组件的交互式设计，其使用MXML编写新的外观文件。
在组件中则通过skinClass属性来应用相关外观文件，
?
如：<s:Button label="myButton"?skinencoding="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/mx"
alpha.disabled="0.7">
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<s:filters>
<s:DropShadowFilter alpha="0.5" distance="1.2" quality="2" excludeFrom="down"/>
</s:filters>
<s:Rect id="myMain" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="0x5bc1e9" color.over="0xcfc851" color.down="0xb19600"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x001fa4" weight="1"/>
</s:stroke>
</s:Rect>
<s:Rect id="myTop" radiusX="4" radiusY="4" top="1" right="1" left="1" height="50%">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF" alpha="0.7"/>
<s:GradientEntry color="0xFFFFFF" alpha="0.2"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Labeltext="myButton" verticalCenter="2" horizontalCenter="0"?textAlign="center" fontWeight="bold"?color="0x131313"color.over="0x0150ad" color.down="0x0150ad"/>
</s:Skin>
?
效果如下图：
2.SkinClass借助 FXG和状态语法完成组件的交互式设计。
FXG也有类似提取公共方法的功能，其实现依靠Library标签。
比如设计中用到好多处外观相同的“竖线”，不过摆放的位置不同，当然不用每用到一处就写一遍相似度达99%的代码，使用FXG的Library标签就可以将其提取简化。
直接把“竖线”代码放在<fx:Library/>中，设好其id，下面用到处使用<fx:id x="..." y="..."/>进行调用便可。
?
以下是本人写的一个简单实例：
<?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/mx">
<fx:Library>
<fx:Definition name="fg">
<s:Group alpha="0.5">
<s:Line x="1" xFrom="0.5" xTo="0.5" yTo="34">
<s:stroke>
<s:SolidColorStroke color="#ffffff" caps="none" weight="1" joints="miter" miterLimit="4"/>
</s:stroke>
</s:Line>
<s:Line xFrom="0.5" xTo="0.5" yTo="34">
<s:stroke>
<s:SolidColorStroke color="#000000" caps="none" weight="1" joints="miter" miterLimit="4"/>
</s:stroke>
</s:Line>
</s:Group>
</fx:Definition>
</fx:Library>
<s:states>
<s:State name="normal"/>
</s:states>
<s:filters>
<s:DropShadowFilter alpha="0.5" angle="90" distance="1.7" quality="2"/>
</s:filters>
<s:Pathwinding="nonZero" data="M0.5 35.5L0.5 4.5C0.5 2.29102 2.29102 0.5 4.50.5L730.5 0.5C732.709 0.5 734.5 2.29102 734.5 4.5L734.5 35.5" >
<s:fill>
<s:LinearGradient x="367.5" y="35.5" scaleX="35" rotation="-90">
<s:GradientEntry color="#00738c" ratio="0"/>
<s:GradientEntry color="#49b7d3" ratio="0.04"/>
<s:GradientEntry color="#366cad" ratio="0.96"/>
<s:GradientEntry color="#bfeffb" ratio="1"/>
</s:LinearGradient>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="#001fa4" caps="none" weight="1" joints="miter" miterLimit="4"/>
</s:stroke>
</s:Path>
<fx:fg x="465" y="1"/>
<fx:fg x="600" y="1"/>
</s:Skin>
?
效果如下图：
?
3.SkinClass借助FXG和状态语法完成组件的交互式设计。
FXG对于复杂的图形会生成多而繁琐的代码，这时还不如使用一张透明的PNG图片代替来得“划算”。
当然SkinClass中也有插入图片的标签，就是<s:BitmapImage/>。其插入图片非常方便，也可随意缩放、旋转等。
?
以下是本人写的一个简单实例：
?
<?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/mx"alpha.disabled="0.7"><s:states><s:State name="up"/><s:State name="over"/><s:State name="down"/><s:State name="disabled"/></s:states> <s:BitmapImage scaleX="0.35" scaleY="0.35" width="64" height="64" source="@Embed('search.png')"/></s:Skin>Rect矩形（圆角矩形），以下是基本的一些属性：
width <length>: 矩形的宽度。
height <length>: 矩形的高度。
radiusX <length>: 圆角矩形，圆角在X轴椭圆半径的弯道，此值四舍五入。
radiusY <length>: 圆角矩形，圆角在y轴椭圆半径的弯道，此值四舍五入。
rotation <Number>: 旋转角度，正数为顺时针，负数为逆时针。
scaleX <Number>: x轴缩放，1为100%。
scaleY <Number>: y轴缩放，1为100%。
visible <Boolean>: 可见性。
Ellipse椭圆（圆形），以下是基本的一些属性：
width <length>: 椭圆的宽度。
height <length>: 椭圆的高度。
rotation <Number>: 旋转角度，正数为顺时针，负数为逆时针。
scaleX <Number>: x轴缩放，1为100%。
scaleY <Number>: y轴缩放，1为100%。
visible <Boolean>: 可见性。
Line直线，以下是基本的一些属性：
xFrom <Number>: X轴起点，默认为0。
yFrom <Number>: y轴起点，默认为0。
xTo <Number>: X轴终点，默认为0。
yTo <Number>: y轴终点，默认为0。
rotation <Number>: 旋转角度，正数为顺时针，负数为逆时针。
scaleX <Number>: x轴缩放，1为100%。
scaleY <Number>: y轴缩放，1为100%。
alpha <Number>: 不透明度，1为100%。
visible <Boolean>: 可见性。
?
FXG的复杂图形使用Path来绘制。
以下是一个尖角向下的红色三角形的绘制（其主要通过节点坐标来绘制）：
?
<Path data="M 0 0 L 100 0 L 50 100 Z">
??? <fill>
??????? <SolidColor color="#FF0000"/>
??? </fill>
</Path>
?
P.S. data中M表示起始位置，Z表示返回到起始位置。
