Flex 4中Skin Class外观设计
Lesson 1 Start
Flex 4 默认为Spark主题,Spark组件的外观设计与之前相比也变得更简单高效。
Spark组件都不包含可视外观属性,所有这类信息都包含在外观文件SkinClass中。
SkinClass借助 FXG和状态语法完成组件的交互式设计,其使用MXML编写新的外观文件。
在组件中则通过skinClass属性来应用相关外观文件,如:<s:Button label="myButton" skinname="code"><?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"><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>
<?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>
<?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"> <s:VGroup horizontalCenter="0" verticalCenter="0" gap="21"> <s:HGroup gap="50"> <s:Rect width="100" height="100"> <s:fill> <s:LinearGradient> <s:GradientEntry color="#00cc00"/> <s:GradientEntry color="#ff4400"/> <s:GradientEntry color="#004488"/> </s:LinearGradient> </s:fill> </s:Rect> <s:Ellipse width="100" height="100"> <s:fill> <s:RadialGradient> <s:GradientEntry color="#00cc00"/> <s:GradientEntry color="#ff4400"/> <s:GradientEntry color="#004488"/> </s:RadialGradient> </s:fill> </s:Ellipse> <s:Rect width="100" height="100"> <s:fill> <s:SolidColor color="#bffaa00"/> </s:fill> </s:Rect> </s:HGroup> <s:HGroup gap="21"> <s:Ellipse width="100" height="100"> <s:stroke> <s:LinearGradientStroke weight="20"> <s:GradientEntry color="#00cc00"/> <s:GradientEntry color="#ff4400"/> <s:GradientEntry color="#004488"/> </s:LinearGradientStroke> </s:stroke> </s:Ellipse> <s:Rect width="100" height="100"> <s:stroke> <s:RadialGradientStroke weight="20"> <s:GradientEntry color="#00cc00"/> <s:GradientEntry color="#ff4400"/> <s:GradientEntry color="#004488"/> </s:RadialGradientStroke> </s:stroke> </s:Rect> <s:Ellipse width="100" height="100"> <s:stroke> <s:SolidColorStroke color="#ffaa00" weight="20"/> </s:stroke> </s:Ellipse> </s:HGroup> </s:VGroup></s:Skin>
<?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:Script> <![CDATA[ private const myMatrix:Array = [0.3, 0.59, 0.11, 0, 0, 0.3, 0.59, 0.11, 0, 0, 0.3, 0.59, 0.11, 0, 0, 0, 0, 0, 1, 0]; ]]> </fx:Script> <s:states> <s:State name="disabled" /> <s:State name="normal" /> </s:states> <s:VGroup fontSize="21" fontWeight="bold" color="#FFFFFF" gap="21" horizontalAlign="center"> <s:Group> <s:Label text="Simon_007"/> <s:filters> <!--单色发光滤镜--> <s:GlowFilter blurX="10" blurY="10" quality="3" strength="4" color="#ff7700"/> </s:filters> </s:Group> <s:HGroup gap="21"> <s:Group> <s:Label text="Simon_001"/> <s:filters> <!--模糊滤镜--> <s:BlurFilter blurX="3" blurY="3" quality="5"/> </s:filters> </s:Group> <s:Group> <s:Label text="Simon_002"/> <s:filters> <!--阴影滤镜--> <s:DropShadowFilter blurX="3" blurY="3" quality="3" strength="1" color="#000000" alpha="0.7" angle="70" distance="3"/> </s:filters> </s:Group> <s:Group> <s:Label text="Simon_003"/> <s:filters> <!--斜角滤镜--> <s:BevelFilter blurX="3" blurY="3" quality="5" angle="120" highlightColor="#00ff00" shadowColor="#00ff00"/> </s:filters> </s:Group> </s:HGroup> <s:HGroup gap="21"> <s:Group> <s:Label text="Simon_004"/> <s:filters> <!--彩色发光滤镜--> <s:GradientGlowFilter blurX="10" blurY="10" distance="0" > <s:GradientEntry color="#0000ff" alpha="0"/> <s:GradientEntry color="#0000ff"/> <s:GradientEntry color="#ff0000"/> <s:GradientEntry color="#00ff00"/> <s:GradientEntry color="#000000"/> </s:GradientGlowFilter> </s:filters> </s:Group> <s:Group> <s:Label text="Simon_005"/> <s:filters> <!--彩色斜角滤镜--> <s:GradientBevelFilter blurX="3" blurY="3" angle="120" quality="3"> <s:GradientEntry color="#0000ff"/> <s:GradientEntry color="#ff7700"/> <s:GradientEntry color="#00ff00"/> </s:GradientBevelFilter> </s:filters> </s:Group> <s:Group> <s:Label text="Simon_006" color="#ff0000"/> <s:filters> <!--色彩响应矩阵滤镜--> <!--将红色的 Simon_006 变为黑白--> <s:ColorMatrixFilter matrix="{myMatrix}"/> </s:filters> </s:Group> </s:HGroup> </s:VGroup></s:Skin>
<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*"> <fx:Script> <![CDATA[ import skin_1.main_skin; import skin_2.main_skin; import skin_3.main_skin; protected function button1_clickHandler(event:MouseEvent):void{ box.setStyle("skinClass", Class(skin_1.main_skin)); } protected function button2_clickHandler(event:MouseEvent):void{ box.setStyle("skinClass", Class(skin_2.main_skin)); } ]]> </fx:Script> <s:VGroup width="100" horizontalCenter="0" verticalCenter="0" horizontalAlign="center" gap="10"> <s:HGroup gap="21"> <s:Button label="skin1" click="button1_clickHandler(event)"/> <s:Button label="skin2" click="button2_clickHandler(event)"/> </s:HGroup> <local:Box id="box" skinname="code"><?xml version="1.0" encoding="utf-8"?><s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:HGroup left="10" right="10" top="10" bottom="10" gap="10"> <s:TextArea id="show" /> <s:TextArea id="input" /> </s:HGroup></s:SkinnableContainer>
<?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" creationComplete="skin1_creationCompleteHandler(event)"> <fx:Metadata> [HostComponent("Box")] </fx:Metadata> <fx:Script> <![CDATA[ import mx.events.FlexEvent; protected function skin1_creationCompleteHandler(event:FlexEvent):void{ hostComponent.show.setStyle("skinClass", Class(a_skin)); hostComponent.input.setStyle("skinClass", Class(a_skin)); } ]]> </fx:Script> <s:states> <s:State name="normal" /> <s:State name="disabled" /> </s:states> <s:Rect width="100%" height="100%"> <s:fill> <s:SolidColor color="#ff0000"/> </s:fill> </s:Rect> <s:Group id="contentGroup"/></s:Skin>
<?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:Metadata> [HostComponent("spark.components.TextArea")] </fx:Metadata> <s:states> <s:State name="disabled" /> <s:State name="normal" /> </s:states> <s:Rect width="100" height="100"> <s:fill> <s:SolidColor color="#ffff00"/> </s:fill> </s:Rect></s:Skin>