flex 数据绑定之理解
来源:互联网 发布:淘宝苏哥游戏是黑key吗 编辑:程序博客网 时间:2024/05/16 18:24
之前写了《 flex 事件之理解》和《 flex meta tag 之理解》,本想是为写本文 flex 数据绑定之理解做铺垫的,谁知网上已有 flex 数据绑定之理解很好的文章,如下:
http://www.cnblogs.com/nianshi/archive/2010/05/19/1739407.html , FLEX 数据绑定 (1)
http://www.cnblogs.com/nianshi/archive/2010/05/19/1739409.html , FLEX 数据绑定 (2)
http://www.cnblogs.com/nianshi/archive/2010/05/19/1739411.html , FLEX 数据绑定 (3)
因此,已无再详片大论 flex 绑定理解之需要,但是鉴于上述 3 篇文章稍显混论,看起来不是那么通俗易懂,为此,我简单的补充了一个 demo ,并且作简单归纳总结。
1、 flex 绑定通常有 3 中实现方式,即 FLEX 数据绑定 (1) 所述的 {} 绑定、 fx : binding 和 as 代码实现 ( BindingUtils , ChangeWatcher );
2、 flex 绑定分单、双向绑定,默认情况下都是单向绑定;
3、 flex 绑定最常见的编写方式就是 [Bingable] 元标签及 {} 的引用;
4、 flex 绑定基于事件,只不过 [Bingable] 等同于 [Bindable(event="propertyChange")] 而已;
5、 flex 绑定可以基于简单的变量、也可基于复杂的对象、方法和事件;
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
下述为 flex 3 种绑定方式实现的一个简单 demo 。
<?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 " minWidth=" 955 " minHeight=" 600 "
creationComplete="initWatcher()" >
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.binding.utils.ChangeWatcher ;
import mx.events.FlexEvent;
public function updateMyString(val:String): void {
p3_target.text = val.toUpperCase();
}
public function mySetterBinding(event:FlexEvent): void {
var watcherSetter:ChangeWatcher =
BindingUtils.bindSetter(updateMyString, p3_source, "text" );
}
public function initWatcher(): void {
ChangeWatcher .watch(p4_source, "text" , watcherListener);
}
public function watcherListener(event:Event): void {
p4_target.text=p4_source.text.toUpperCase();
}
]]>
</fx:Script>
<fx:Binding source=" p2_source.text " destination=" p2_target.text " />
<s:Panel x=" 9 " y=" 6 " width=" 462 " height=" 70 " title=" 大括号绑定 " id=" panel1 " >
<s:Label x=" 6 " y=" 10 " text=" source: " />
<mx:TextInput id=" p1_source " text=" Enter text here " x=" 50 " y=" 4 " />
<s:Label x=" 259 " y=" 10 " text=" target: " />
<mx:Text id=" p1_target " text=" { p1_source.text.toUpperCase() } " x=" 307 " y=" 4 " />
</s:Panel>
<s:Panel x=" 9 " y=" 84 " width=" 462 " height=" 98 " title=" mx:binding " id=" panel2 " >
<s:Label x=" 6 " y=" 10 " text=" source: " />
<mx:TextInput id=" p2_source " text=" Enter text here " x=" 50 " y=" 4 " />
<s:Label x=" 259 " y=" 10 " text=" target: " />
<mx:Text id=" p2_target " text="" x=" 307 " y=" 4 " />
<s:Label x=" 7 " y=" 43 " text=" fx:binding 等同于 BindingUtils.bindProperty(p2_target,'text',p2_source,'text'); " />
</s:Panel>
<s:Panel x=" 9 " y=" 190 " width=" 462 " height=" 70 " title=" actionscript binding , bindSetter " id=" panel3 " >
<s:Label x=" 6 " y=" 10 " text=" source: " />
<mx:TextInput id=" p3_source " text=" Enter text here " x=" 50 " y=" 4 " />
<s:Label x=" 259 " y=" 10 " text=" target: " />
<mx:Text id=" p3_target " text="" x=" 307 " y=" 4 " initialize="mySetterBinding(event);" />
</s:Panel>
<s:Panel x=" 9 " y=" 272 " width=" 462 " height=" 70 " title=" actionscript binding , changewatcher " id=" panel0 " >
<s:Label x=" 6 " y=" 10 " text=" source: " />
<mx:TextInput id=" p4_source " text=" Enter text here " x=" 50 " y=" 4 " />
<s:Label x=" 259 " y=" 10 " text=" target: " />
<mx:Text id=" p4_target " text="" x=" 307 " y=" 4 " />
</s:Panel>
</s:Application>
- flex 数据绑定之理解
- flex之数据绑定
- Flex中数据绑定
- Flex中数据绑定。
- flex 数据绑定
- Flex 数据绑定不出数
- Flex数据绑定大全
- Flex 数据绑定
- flex数据绑定
- Flex数据绑定
- Flex-数据绑定
- Flex中的数据绑定
- flex - 数据绑定
- Flex数据绑定
- flex数据绑定
- flex数据绑定
- Flex 学习之路之七 数据绑定
- flex---->数据绑定、数据列表
- struts2 OGNL表达式
- 我得意地笑: 搞定了, 哈哈 如何读取Thermo Scientific Nicolet Omnic *.spa二进制格式的谱图文件中的数据
- 访问iis元数据库失败的解决方法
- 移动互联网发展模式分析
- 关闭Zend Framework模板自动分发
- flex 数据绑定之理解
- 输入一个字符串 打印出每个字符出现的次数
- Linux网卡驱动开发总结
- NASM汇编笔记
- The value for the useBean class attribute is invalid 问题
- .NET基础学习:经典水晶报表设计三则
- Linux_shell_文件安全与权限(03)
- WGUI初始化与窗口创建
- 张宏涛:读书增加人生阅历(转载)