Flex 4中Spark组件利用Skin Class外观设计(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:Path winding="nonZero" data="M0.5 35.5L0.5 4.5C0.5 2.29102 2.29102 0.5 4.5 0.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>
