如何在Flex 4中定制皮肤样式
2010-09-09 14:20
363 查看
2010-09-09 14:07:04
Flex 4中新增的组件/皮肤分离的架构(即Spark架构)是相当不错的。但是如果你想为皮肤增加一个可配置的样式,那么这个样式必须定义在组件之上。例如,如果你想在组件Button上新增加一个背景色的样式,那么你需要首先新建一个带有背景色样式的Button组件:
然后,再创建一个新的使用背景色(backgroundcolor)样式的Button Skin文件:
这之后,你就可以使用新Button组件和相应的皮肤了。
我们之所以不得不创建一个新的包含背景色这个样式的Button基类,是因为我们没有其它的方法可以在MXML文件里设置背景色这个样式。当然,我们可以通过CSS或者setStyle()来设置背景色。但是,要知道,Button组件根本就没有背景色(backgroundColor)这个样式,因此,如果我们没有创建SButton类,然后试着在MXML文件里给一个Button组件设置backgroundColor属性,那么在编译的时候就会出错。
于是,我想到了一个巧妙的方法,可以不用上面提到的方法(创建一个包含新样式属性的类来实现MXML中样式设置)来设置皮肤样式。这个方法的思想是这样的,样式应定义在skin文件里,然后我们就可以在MXML中通过使用基本组件的属性来设置样式。要实现这个一个想法,我们还需要做另外一件事:为UIComponent增加一个名为“style”的属性。
通过style属性,我们可以获得样式设置的字串,那么又应如何实现style里传过来的样式设置呢?这里,我只是从语法上分析这个HTML-ish风格的字符串,然后调用了setStyle函数。
有趣的是,我正在组件上调用setStyle函数,但是由于皮肤继承了主组件(Host Component)的皮肤样式,皮肤也就获得了样式。这也意味着样式并不真的需要定义在皮肤上,只需要用在皮肤上就可以了。再次使用上面提到的例子,这里使用新的方法,我是这样设置Button组件的背景色的:
这里,我并不需要定义新的Button类(如:SButton)就可以设置Button的背景色样式了。下面是一个更复杂的例子,里面应用了更多的样式。
例子里所有的Button都使用相同的皮肤和Spark Button组件。例子的源代码可以从on github获得。
(原文:http://www.jamesward.com/2010/07/30/how-to-define-styles-on-skins-in-flex-4/ )
Flex 4中新增的组件/皮肤分离的架构(即Spark架构)是相当不错的。但是如果你想为皮肤增加一个可配置的样式,那么这个样式必须定义在组件之上。例如,如果你想在组件Button上新增加一个背景色的样式,那么你需要首先新建一个带有背景色样式的Button组件:
package { import spark.components.Button; [Style(name="backgroundColor", type="uint", format="Color")] public class SButton extends Button{ } }
然后,再创建一个新的使用背景色(backgroundcolor)样式的Button Skin文件:
<?xml version="1.0"?> <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <fx:Script> import mx.utils.ColorUtil; </fx:Script> <s:states> <s:State name="up"/> <s:State name="over"/> <s:State name="down"/> </s:states> <s:Rect width="100%" height="100%"> <s:fill> <s:SolidColor color="{getStyle('backgroundColor')}" color.over="{ColorUtil.adjustBrightness2(getStyle('backgroundColor'), 64)}" color.down="{ColorUtil.adjustBrightness2(getStyle('backgroundColor'), -32)}" /> </s:fill> </s:Rect> <s:Label id="labelDisplay" paddingBottom="3" paddingLeft="3" paddingRight="3" paddingTop="6"/> </s:SparkSkin>
这之后,你就可以使用新Button组件和相应的皮肤了。
我们之所以不得不创建一个新的包含背景色这个样式的Button基类,是因为我们没有其它的方法可以在MXML文件里设置背景色这个样式。当然,我们可以通过CSS或者setStyle()来设置背景色。但是,要知道,Button组件根本就没有背景色(backgroundColor)这个样式,因此,如果我们没有创建SButton类,然后试着在MXML文件里给一个Button组件设置backgroundColor属性,那么在编译的时候就会出错。
于是,我想到了一个巧妙的方法,可以不用上面提到的方法(创建一个包含新样式属性的类来实现MXML中样式设置)来设置皮肤样式。这个方法的思想是这样的,样式应定义在skin文件里,然后我们就可以在MXML中通过使用基本组件的属性来设置样式。要实现这个一个想法,我们还需要做另外一件事:为UIComponent增加一个名为“style”的属性。
通过style属性,我们可以获得样式设置的字串,那么又应如何实现style里传过来的样式设置呢?这里,我只是从语法上分析这个HTML-ish风格的字符串,然后调用了setStyle函数。
有趣的是,我正在组件上调用setStyle函数,但是由于皮肤继承了主组件(Host Component)的皮肤样式,皮肤也就获得了样式。这也意味着样式并不真的需要定义在皮肤上,只需要用在皮肤上就可以了。再次使用上面提到的例子,这里使用新的方法,我是这样设置Button组件的背景色的:
<s:Button label="backgroundColor = #ff0000" style="backgroundColor: #ff0000" mce_style="backgroundColor: #ff0000" skinClass="SButtonSkin"/>
这里,我并不需要定义新的Button类(如:SButton)就可以设置Button的背景色样式了。下面是一个更复杂的例子,里面应用了更多的样式。
例子里所有的Button都使用相同的皮肤和Spark Button组件。例子的源代码可以从on github获得。
(原文:http://www.jamesward.com/2010/07/30/how-to-define-styles-on-skins-in-flex-4/ )
相关文章推荐
- Flex中如何利用tabStyleName, firstTabStyleName, lastTabStyleName和selectedTabTextStyleName样式,定制自己的TabNavigator
- 如何使用FLEX皮肤(转)
- 如何使用那套优雅天蓝风格的Flex皮肤
- 积少成多Flash(9) - Flex 3.0 布局控件, 样式(css), 皮肤(skin)
- Flex中如何通过设置GridLines对象的horizontalAlternateFill样式交错显示LineSeries图表背景颜色的例子
- 如何在flex中实现自定义鼠标样式呢?
- Flex中如何通过itemRollOverColor和itemSelectionColor样式给列图ColumnChart设置选中/未选颜色的例子
- FLEX工程动态如何切换皮肤
- Flex中如何给depthColors样式设置一个颜色数组给树Tree控件不同层设置不同颜色的例子
- Flex中如何通过downArrowSkin和upArrowSkin样式设置NumericStepper控件的上下箭头Skin的例子
- WebSphere Portal 6.x 主题和皮肤定制:实战(一)如何创建、部署、使用自定义主题
- WSS3SDK之:如何定制快速启动的显示样式
- Flex中如何利用backgroundDisabledColor和disabledOverlayAlpha样式,在一个容器的enabled属性为false时添加一个覆盖层
- Flex中如何利用headerStyleName样式,设置Accordion容器的fillAlphas, fillColors以及selectedFillColors等反显颜色
- Flex中如何通过strokeWidth, strokeColor和shadowColor样式,创建一个自定义风格的HRule或VRule
- Flex中如何通过borderColor样式设置DateField控件边框颜色的例子
- 如何更改CSDN博客高亮代码皮肤的样式,使博客看起来更有范(推荐)
- InstallShield 如何去掉左下角的商标/去掉定制皮肤的商标
- Flex中如何利用canDropLabels样式,移除图表中一些水平轴线上标签
- 积少成多Flash(9) - Flex 3.0 布局控件, 样式(css), 皮肤(skin)