Flex 4中Skin Class外观设计

 

Lesson 1 Start

 

Flex 4 默认为Spark主题，Spark组件的外观设计与之前相比也变得更简单高效。

Spark组件都不包含可视外观属性，所有这类信息都包含在外观文件SkinClass中。

SkinClass借助 FXG和状态语法完成组件的交互式设计，其使用MXML编写新的外观文件。

在组件中则通过skinClass属性来应用相关外观文件，如：<s:Button label="myButton" skinClass="myButtonSkin"/>。

 

以下是一个简单的ButtonSkinClass：

<?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: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:Label text="myButton" verticalCenter="2" horizontalCenter="0"  textAlign="center" fontWeight="bold" color="0x131313" color.over="0x0150ad" color.down="0x0150ad"/>

</s:Skin>

 

效果如下图：

 

 

Lesson 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"