Lesson 1 Start
Flex 4 默认为Spark主题,Spark组件的外观设计与之前相比也变得更简单高效。
Spark组件都不包含可视外观属性,所有这类信息都包含在外观文件SkinClass中。
SkinClass借助 FXG和状态语法完成组件的交互式设计,其使用MXML编写新的外观文件。
在组件中则通过skinClass属性来应用相关外观文件,如:<s:Button label="myButton" skinClass="myButtonSkin"/>。
以下是一个简单的ButtonSkinClass:
效果如下图:
Lesson 2
SkinClass借助 FXG和状态语法完成组件的交互式设计。
FXG也有类似提取公共方法的功能,其实现依靠Library标签。
比如设计中用到好多处外观相同的“竖线”,不过摆放的位置不同,当然不用每用到一处就写一遍相似度达99%的代码,使用FXG的Library标签就可以将其提取简化。
直接把“竖线”代码放在<fx:Library/>中,设好其id,下面用到处使用<fx:id x="..." y="..."/>进行调用便可。
以下是一个简单实例:
效果如下图:
Lesson 3
SkinClass借助FXG和状态语法完成组件的交互式设计。
FXG对于复杂的图形会生成多而繁琐的代码,这时还不如使用一张透明的PNG图片代替来得“划算”。
当然SkinClass中也有插入图片的标签,就是<s:BitmapImage/>。其插入图片非常方便,也可随意缩放、旋转等。
以下是一个简单实例:
Lesson 4
FXG的基本形状有三种,矩形(圆角矩形)、椭圆(圆形)、直线。
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表示返回到起始位置。
Lesson 5
FXG使用fill对图形本体进行上色,使用stroke对图形边框进行上色,而fill(填充)和stroke(画笔)有三种上色方法:
fill — SolidColor(色块),RadialGradient(径向渐变),LinearGradient(线性渐变)。
stroke — SolidColorStroke(实线),RadialGradientStroke(径向渐变),LinearGradientStroke(线性渐变)。
以下是一个简单的例子:
效果如下:
Lesson 6
FXG中常用的效果滤镜有7个:
GlowFilter(单色发光滤镜)
BlurFilter(模糊滤镜)
DropShadowFilter(阴影滤镜)
BevelFilter(斜角滤镜)
GradientGlowFilter(彩色发光滤镜)
GradientBevelFilter(彩色斜角滤镜)
ColorMatrixFilter(色彩响应矩阵滤镜)
以下是一个简单的例子:
效果如下:
Lesson 7 End
刚开始做skinClass设计时往往会为一个小模块设计一个skinClass并把其用到的所有组件和逻辑都放进skinClass内,外部只要传入模块所需的数据和处理模块所抛出的事件就行。这样设计看似简单快速,使用起来也比较方便,skinClass似乎能完成所有的事了。
但是如果把这个skinClass去掉,那么这个小模块就只有一个白板了,因为所有的组件和逻辑都在skinClass中,再想想下次如果要做皮肤扩展,那就要重写一个庞大的skinClass了(其中的很多组件和逻辑代码都是重复的)。
其实组件和skinClass是可以分开设计的,先设计一个默认皮肤的小模块,让其能单独运行;再写skinClas将其HostComponent指定到要应用此皮肤的小模块,可以在skinClass的creationComplete事件处理中使用hostComponent.XXXid 得到小模块下的子组件,再用setStyle("skinClass", Class(XXX))对子组件进行skinClass的设置。
这样就可以把组件和skinClass分开了,也可以很方便地进行皮肤扩展。
下面来看一个例子:
程序结构如图
程序通过skin_test中的button来更换Box的main_skin,再在main_skin中对Box里的小组件进行a_skin的设置。
包skin_1,skin_2,skin_3就是三套皮肤。
skin_test.mxml
Box.mxml
skin_1.main_skin.mxml
skin_1.a_skin.mxml
skin_2和skin_3包里的main_skin.mxml和a_skin.mxml只是color不同罢了。
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"> <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>
效果如下图:
Lesson 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>
Lesson 4
FXG的基本形状有三种,矩形(圆角矩形)、椭圆(圆形)、直线。
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表示返回到起始位置。
Lesson 5
FXG使用fill对图形本体进行上色,使用stroke对图形边框进行上色,而fill(填充)和stroke(画笔)有三种上色方法:
fill — SolidColor(色块),RadialGradient(径向渐变),LinearGradient(线性渐变)。
stroke — SolidColorStroke(实线),RadialGradientStroke(径向渐变),LinearGradientStroke(线性渐变)。
以下是一个简单的例子:
<?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>
效果如下:
Lesson 6
FXG中常用的效果滤镜有7个:
GlowFilter(单色发光滤镜)
BlurFilter(模糊滤镜)
DropShadowFilter(阴影滤镜)
BevelFilter(斜角滤镜)
GradientGlowFilter(彩色发光滤镜)
GradientBevelFilter(彩色斜角滤镜)
ColorMatrixFilter(色彩响应矩阵滤镜)
以下是一个简单的例子:
<?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>
效果如下:
Lesson 7 End
刚开始做skinClass设计时往往会为一个小模块设计一个skinClass并把其用到的所有组件和逻辑都放进skinClass内,外部只要传入模块所需的数据和处理模块所抛出的事件就行。这样设计看似简单快速,使用起来也比较方便,skinClass似乎能完成所有的事了。
但是如果把这个skinClass去掉,那么这个小模块就只有一个白板了,因为所有的组件和逻辑都在skinClass中,再想想下次如果要做皮肤扩展,那就要重写一个庞大的skinClass了(其中的很多组件和逻辑代码都是重复的)。
其实组件和skinClass是可以分开设计的,先设计一个默认皮肤的小模块,让其能单独运行;再写skinClas将其HostComponent指定到要应用此皮肤的小模块,可以在skinClass的creationComplete事件处理中使用hostComponent.XXXid 得到小模块下的子组件,再用setStyle("skinClass", Class(XXX))对子组件进行skinClass的设置。
这样就可以把组件和skinClass分开了,也可以很方便地进行皮肤扩展。
下面来看一个例子:
程序结构如图
程序通过skin_test中的button来更换Box的main_skin,再在main_skin中对Box里的小组件进行a_skin的设置。
包skin_1,skin_2,skin_3就是三套皮肤。
skin_test.mxml
<?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" skinClass="skin_3.main_skin"/> </s:VGroup> </s:Application>
Box.mxml
<?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>
skin_1.main_skin.mxml
<?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>
skin_1.a_skin.mxml
<?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>
skin_2和skin_3包里的main_skin.mxml和a_skin.mxml只是color不同罢了。
发表评论
-
Flex4 利用 Blazeds上传文件
2011-10-12 21:53 1233用Flex做业务经常会碰到各种类型的文件上传,如FTP上传 ... -
felx的Alert组件
2011-10-12 21:54 1116Flex中为我们提供 ... -
Flex 3 如何生成swc文件
2011-10-19 22:56 1046... -
Oracle——distinct的用法
2013-02-21 08:12 840distinct这个关键字来过滤掉多余的重复记录只保留一条,但 ... -
Flex和amfphp配置注意事项
2011-10-03 22:54 0使用Remoting的过程中,遇到问题,这里对可能出现问题的地 ...
相关推荐
在Flex 4中,皮肤(Skin)是一种强大的机制,用于改变和定制UI组件的外观和交互体验。本文将深入探讨FLEX4中的皮肤系统,特别是SparkSkin类,并通过实例展示如何创建和应用自定义皮肤。 1. SparkSkin的介绍: ...
在Flex4中,皮肤定制是UI设计的重要组成部分,它允许开发者根据需求自定义组件的外观和交互效果。本主题主要围绕`SparkSkin`类和`Skin`类展开,这两类在Flex4的皮肤定制中扮演着核心角色。 **SparkSkin介绍** `...
### Flex4中头部背景图片的Accordion知识点解析 在Flex4框架中,开发人员经常需要创建具有高度定制化外观的应用程序组件。本篇文章将基于提供的文件信息深入探讨如何在Flex4中实现一个拥有自定义头部背景图片的...
在Flex4中,Adobe引入了新的皮肤系统,称为Spark Skin系统,旨在提供更高效、更灵活的UI设计能力。本篇文章将详细介绍如何利用Flex4中的Spark Skin进行控件样式的自定义。 #### 二、Spark Skin与Skin类的关系 在...
在Flex4中,皮肤(skin)是一种用于控制UI组件外观的设计模式,允许开发者和设计师定制组件的视觉表现,而不必触及组件的核心功能代码。这不仅提高了开发效率,还实现了设计与逻辑的分离,使得UI设计更加灵活且易于...
在Flex 4中,实现了更加强大的皮肤机制,允许开发者更加灵活地定制组件外观。对于背景平铺而言,我们可以直接通过CSS样式来轻松实现。 ```as sample: (ʽед).sample { backgroundImage: Embed(source="assets/bg...
4. **Skin Class** 每个Flex组件都有一个与之关联的皮肤类,这个类定义了组件的外观。开发者可以通过继承已有的皮肤类并重写其属性来创建新的皮肤。 5. **MXML与ActionScript皮肤** - **MXML皮肤**:使用MXML语法...
### FLEX4的皮肤制作教程 #### 一、SparkSkin介绍 ...综上所述,SparkSkin和Skin是Flex 4中非常重要的概念,它们提供了强大的工具来定制UI组件的外观。通过理解和掌握这些技术,可以显著提升应用程序的用户体验。
在Flex4中实现这样的组件通常涉及到两个主要部分:组件类(Component Class)和皮肤类(Skin Class)。我们将深入探讨这两个方面以及如何通过源码文件`ImageButton.as`和`ImageButtonSkin.mxml`来理解这一过程。 ...
在实际应用中,可能会涉及到CSS样式表、皮肤类(Skin Class)以及XML配置文件的调整,以确保主题能够正确地应用于各个组件。 总之,"精选30款flex主题"提供了丰富的设计选项,使Flex开发者能够轻松定制他们的应用...
- SparkSkin是Adobe Flex 4 (Gumbo)框架中的一个关键类,用于自定义用户界面(UI)组件的外观。它提供了一种机制,允许开发者通过XML或者ActionScript对控件的外观进行高度定制。 - SparkSkin类位于`spark.skins`...
Flex 4中的图形技术是其最强大的特性之一,它允许开发者创建复杂的矢量图形、动态图形以及各种高级视觉效果。这部分内容主要涉及以下几个方面: 1. **基本图形元素**:介绍了Flex 4中如何绘制简单的图形元素,如...
在Flex4中,我们可以轻松地自定义Accordion的头部样式,例如设置一个图片作为背景。 #### 示例分析: 1. **样式定义**:通过`<fx:Style>`标签来定义Accordion头部的样式,并使用`headerStyleName`属性将其应用于...
Flex中的按钮组件是用户界面(UI)设计中不可或缺的部分,可以实现丰富的交互效果和多种视觉样式。 一、Flex按钮组件基础 Flex提供了Button组件,它是基础的点击触发元素。在MXML中,我们可以直接创建一个按钮实例...
Flex Skinning机制是Adobe Flex框架中的一个重要特性,它允许开发者为UI组件自定义外观和行为,从而实现应用程序的独特设计和交互体验。通过深入理解并实践Flex Skinning,开发者可以更灵活地控制用户界面的视觉样式...
在Flex中,皮肤是决定组件外观和交互的重要元素,它允许开发者自定义组件的视觉样式,以满足特定的设计需求。 首先,我们需要理解Flex中的皮肤类层次结构。Flex的皮肤系统基于MXML和ActionScript,主要由以下几类...
- 样式表(CSS)和皮肤类(Skin Class)可以独立于组件代码定义,实现外观的可复用和可扩展性。 7. **模块化开发**: - Flex支持模块化,可以将大型应用程序拆分为多个模块,按需加载,提高启动速度。 - Module ...
SWF文件可以存储所有样式,然后在项目中引用,如`<mx:Style source="flex_skin.css"/>`。 四、行为对象与动画效果 1. 行为对象是事件和动画效果的组合,例如`...
在Flex开发过程中,皮肤(skin)的设计和加载是一项重要的工作。皮肤决定了应用程序的外观和风格,能够显著提升用户体验。然而,在实际应用中,特别是当皮肤文件较大时,可能会遇到一个问题:在皮肤加载完成之前,...
在Flex开发中,皮肤(Skin)是用户界面(UI)组件外观的重要组成部分,它定义了组件的视觉元素和布局。Flex允许开发者自定义组件的皮肤,以满足特定的设计需求或品牌风格。本教程将深入探讨如何使用ActionScript 3...