Flex学习笔记_09 数据绑定_概念、使用

相关文章:  

• Flex学习笔记_09 数据绑定_运用实例
• Flex学习笔记_05 使用容器控制界面布局_03动态布局、导航容器、表单布局

推荐圈子: flex
更多相关推荐

<script type="text/javascript"></script>

9.1 认识数据绑定

9.1.1 数据绑定的概念

    使用数据绑定时，Flex 会自动把一个对象的数据复制，提供给另一个对象使用，提供数据一方称为数据源对象，使用数据的一方称为目标对象。当数据源对象的数据发生变化时，目标对象的数据会自动更新。
    实质上，绑定的实现也是借助事件机制来完成的，当目标使用了数据绑定，目标对象就会侦听数据源的某一个固定事件。如果数据源改变，就派发事件，通知目标对象更新最新数据。当然这个过程都是由Flex来完成。

    作为绑定的数据源对象，必须支持绑定--对象有派发改变事件的能力。

使用数据绑定的多数情况：

• 将后台数据（通过Web Service 或 Remoting 方式得到的数据）绑定给控件
• 把控件数据绑定给后台通信对象，发送给后台服务端
• 后台返回数据和数据模型 进行绑定
• 组件或对象属性的数据绑定

9.1.2 如何使用数据绑定

将数据源对象房子大括号{}中，作为目标对象的值就可以了。
backgroundColor="{mColor.value.toString()}"

在{}中也可以使用AS：
text="{(Number(age_txt.text)>= 16)?'成年':'未成年'}"

 

Xml代码

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.     <mx:Style source="style.css" />      
4.     <mx:ColorPicker id="mColor" x="30" y="30"/>  
5.     <mx:Canvas styleName="box" id ="box" x="30" y="80" backgroundColor="{mColor.value.toString()}" width="200" height="172">  
6.     </mx:Canvas>      
7. </mx:Application>  

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Style source="style.css" />   
    <mx:ColorPicker id="mColor" x="30" y="30"/>
    <mx:Canvas styleName="box" id ="box" x="30" y="80" backgroundColor="{mColor.value.toString()}" width="200" height="172">
    </mx:Canvas>   
</mx:Application>

 
也可以使用函数：
scaleX="{doResize(scale)}"

定义scale 到时候使用了[Bindable]来使它具有绑定功能，[Bindable]是元标签的一种，专门用来定义绑定中的数据源对象，event事件名指当前数据源发生变化时，数据源所在对象派发的事件类型，可选的，默认：propertyChange ：
[Bindable]
[Bindabl(event="eventname")]

比如我们定义scale：
[Bindable]
private var scale:Number = 1;

Xml代码

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.     <mx:Style source="style.css" />  
4.     <mx:Script>  
5.         <![CDATA[  
6.             [Bindable]  
7.             private var scale:Number = 1;  
8.             internal function doResize(n:Number):Number{  
9.                 zoom.zoomWidthTo = n;  
10.                 zoom.play();  
11.                 return box.scaleX;  
12.             }  
13.         ]]>  
14.     </mx:Script>  
15.     <mx:Zoom id="zoom" originX="0" originY="0" target="{box}" />  
16.     <mx:HSlider id="slider" x="120" y="301" change="scale =slider.value" minimum="0" maximum="1"/>  
17.     <mx:Canvas id="box" styleName="box" x="100" y="56" scaleX="{doResize(scale)}" width="200" height="200">  
18.     </mx:Canvas>  
19. </mx:Application>  

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Style source="style.css" />
    <mx:Script>
        <![CDATA[
            [Bindable]
            private var scale:Number = 1;
            internal function doResize(n:Number):Number{
                zoom.zoomWidthTo = n;
                zoom.play();
                return box.scaleX;
            }
        ]]>
    </mx:Script>
    <mx:Zoom id="zoom" originX="0" originY="0" target="{box}" />
    <mx:HSlider id="slider" x="120" y="301" change="scale =slider.value" minimum="0" maximum="1"/>
    <mx:Canvas id="box" styleName="box" x="100" y="56" scaleX="{doResize(scale)}" width="200" height="200">
    </mx:Canvas>
</mx:Application>

 

使用<mx:Binding> 标签来定义数据绑定：
<mx:Binding source="users.user.blogURL" destination="pic.toolTip" />
其中source指定数据源，destination指定目标对象的属性，两者的数据类型必须相同

Xml代码

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.     <mx:Style source="style.css" />  
4.       
5.     <mx:Model id="users">  
6.         <users>  
7.          <user>  
8.             <name>Peter Ent</name>  
9.             <blogURL>http://weblogs.macromedia.com/pent</blogURL>  
10.             <rss>http://weblogs.macromedia.com/pent/index.xml</rss>  
11.             <pic>pic_1.png</pic>  
12.           </user>  
13.         </users>  
14.     </mx:Model>  
15.     <mx:Binding source="users.user.name" destination="name_txt.text" />  
16.     <mx:Binding source="users.user.blogURL" destination="blog_btn.label" />  
17.     <mx:Binding source="users.user.rss" destination="rss_btn.label" />  
18.     <mx:Binding source="users.user.pic" destination="pic.source" />  
19.       
20.     <mx:Binding source="users.user.blogURL" destination="pic.toolTip" />  
21.       
22.     <mx:Panel styleName="myPanel" x="74" y="78" width="327" height="309" layout="absolute" title="查看信息">  
23.         <mx:Image id="pic" x="10" y="19" width="277" height="76" scaleContent="true"/>  
24.         <mx:Label id="name_txt" x="10" y="135" width="154"/>  
25.         <mx:LinkButton id ="blog_btn" x="10" y="163" width="236" textAlign="left"/>  
26.         <mx:LinkButton id="rss_btn" x="10" y="195" width="236" textAlign="left"/>  
27.     </mx:Panel>  
28. </mx:Application>