项目中使用的样式表绑定类如下:
package utils
{
import mx.binding.utils.ChangeWatcher;
import mx.styles.IStyleClient;
/**
* Flex的绑定功能为我们的日常提供很多的方便
* 但是Flex只提供了属性的绑定类->BindingUtils;
* 如果要实现绑定控件的Style还要自己用ChangeWatcher去侦听事件
* 有了StyleBindingUtils这一切将变的简单
* StyleBindingUtils封装了ChangeWatcher进行了Style的绑定实现,
* 为您的开发提供了更多方便和快捷
* @author bailonggang
*/
public class StyleBindingUtils
{
public function StyleBindingUtils()
{
}
public static function bindStyle(
site:IStyleClient, prop:String,
host:Object, chain:Object,
commitOnly:Boolean = false):ChangeWatcher
{
var w:ChangeWatcher =
ChangeWatcher.watch(host, chain, null, commitOnly);
if(w != null )
{
var assign:Function = function(event:*):void
{
site.setStyle(prop, w.getValue());
}
w.setHandler( assign );
assign(null);
}
return w;
}
}
}
测试页面如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.graphics.Stroke;
import mx.graphics.IStroke;
import utils.StyleBindingUtils;
/**
* 定义一个Stroke, 默认颜色为0x333333
*/
private var borderStroke:Stroke = new Stroke(0x333333, 0, 1);
private function init():void
{
/**
* 进行绑定:把container的borderColor样式属性绑定到borderStroke的color属性上
*/
StyleBindingUtils.bindStyle(container, "borderColor", borderStroke, "color");
}
private function changeHandler():void
{
/**
* 设置borderStroke的color属性
* 被绑定对象会联运变化
*/
borderStroke.color = borderColor.selectedColor;
}
]]>
</mx:Script>
<mx:Canvas width="200" height="200" id="container" borderThickness="2" borderStyle="solid"/>
<mx:FormItem label="borderColor:">
<mx:ColorPicker id="borderColor" change="changeHandler()"/>
</mx:FormItem>
</mx:VBox>
分享到:
相关推荐
关于flex 的样式css。。。可以自定义控件样式。。css源码。
里边包含4个工具,Flex3样式:可以图形化调整样式,自动生成CSS代码,相当方便。有俩个FLEX2图形计算工具。还有一个是用FLEX做的简单涂鸦版。都是好东西,就不多介绍了,觉得好的话别忘了顶下。
Flex样式生成工具
flex页面跳转及数据绑定的方法,flex页面跳转及数据绑定的方法
Flex3样式设计工具4in1.rarFlex3样式设计工具4in1.rarFlex3样式设计工具4in1.rar
flex样式设计器
支持同时上传多个文件,和设置文件过滤 绑定进度条和用于显示进度信息的Text控件
用于模仿HTML的CSS样式表中的背景重复显示功能
flex的属性的整理,可以直接使用类名进行组合实现flex布局。项目的属性,order,flex-grow,flex-shrink,flex-basis,flex.需要在项目中添加对应的样式
在FLEX中使用样式方法 2 一 .使用本地样式定义 2 二、使用外部样式表 3 三、使用内联样式 4 四、使用setStyle()方法 4 五、脚本方法 4 Application组件样式属性 5 panel组件样式属性 5 color文本颜色 6 TabNavigator...
Flex各种控件,样式生成工具(定制各种Flex按钮网页css样式),可视化操作,自动生成css代码。适合界面开发者使用,实现快速开发。
博文链接:https://hacker47.iteye.com/blog/235758
flex数据绑定的原理
Flex3 css样式代码自动生成 Flex3StyleExplorer
Flex3 StyleExplorer 样式生成器
用数据动态绑定XML,然后实现flex中树的绑定
flex的css样式设置,介绍有关flex的各类css样式设置,比如application,panel,hbox等
flex 嵌入外部文字样式,弥补flex内部字体不足的缺憾
Flex3中用到的工具类包,含有json类,在flex3中用到json的话,这个包很有用哦,src为源码,lib中为swc文件
单元二 CSS3样式表端基础前Web单元2-7 定位之Flex布局2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用...