浏览 3428 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2008-07-21
9.1 认识数据绑定 使用数据绑定时,Flex 会自动把一个对象的数据复制,提供给另一个对象使用,提供数据一方称为数据源对象,使用数据的一方称为目标对象。当数据源对象的数据发生变化时,目标对象的数据会自动更新。
实质上,绑定的实现也是借助事件机制来完成的,当目标使用了数据绑定,目标对象就会侦听数据源的某一个固定事件。如果数据源改变,就派发事件,通知目标对象更新最新数据。当然这个过程都是由Flex来完成。 作为绑定的数据源对象,必须支持绑定--对象有派发改变事件的能力。 使用数据绑定的多数情况:
9.1.2 如何使用数据绑定
<?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> <?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> 标签来定义数据绑定: <?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:Model id="users"> <users> <user> <name>Peter Ent</name> <blogURL>http://weblogs.macromedia.com/pent</blogURL> <rss>http://weblogs.macromedia.com/pent/index.xml</rss> <pic>pic_1.png</pic> </user> </users> </mx:Model> <mx:Binding source="users.user.name" destination="name_txt.text" /> <mx:Binding source="users.user.blogURL" destination="blog_btn.label" /> <mx:Binding source="users.user.rss" destination="rss_btn.label" /> <mx:Binding source="users.user.pic" destination="pic.source" /> <mx:Binding source="users.user.blogURL" destination="pic.toolTip" /> <mx:Panel styleName="myPanel" x="74" y="78" width="327" height="309" layout="absolute" title="查看信息"> <mx:Image id="pic" x="10" y="19" width="277" height="76" scaleContent="true"/> <mx:Label id="name_txt" x="10" y="135" width="154"/> <mx:LinkButton id ="blog_btn" x="10" y="163" width="236" textAlign="left"/> <mx:LinkButton id="rss_btn" x="10" y="195" width="236" textAlign="left"/> </mx:Panel> </mx:Application>
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |