Flex 3 组件与数据间的双向绑定
2009-04-19 23:56
288 查看
最近才开始学Flex,感觉还真是一个很不错的东西!
关于数据与组件之间的绑定,自己研究了几天,外加其他几位大大的分享,才有所建树,至少是现在做的项目可以完成了。记录在这里,免得以后忘记了,也给初学者分享一下!
MyTest.xmxl
MyPanel.as
关于数据与组件之间的绑定,自己研究了几天,外加其他几位大大的分享,才有所建树,至少是现在做的项目可以完成了。记录在这里,免得以后忘记了,也给初学者分享一下!
MyTest.xmxl
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" styleName="panelControlBar" creationComplete="init()" xmlns:my="my.*" xmlns:ns1="*">
<mx:Panel x="10" y="10" width="546" height="489" layout="absolute">
<mx:TileList x="10" y="10" width="438" height="429" rowCount="5" columnCount="5" id="tile_list"
dataProvider="{arrayCon}">
<mx:itemRenderer>
<mx:Component>
<my:MyPanel title="{data.title}"
creationComplete="BindingUtils.bindProperty(data, 'good', this, 'good');
BindingUtils.bindProperty(data,'title',this,'title');">
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
]]>
</mx:Script>
</my:MyPanel>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
</mx:Panel>
<mx:Button x="10" y="510" label="show ArrayCollection" click="onClick()"/>
<mx:Script>
<![CDATA[
import mx.utils.ObjectProxy;
import mx.controls.Alert;
import mx.binding.utils.BindingUtils;
import my.MyPanel;
import mx.containers.Panel;
import mx.controls.Button;
import mx.collections.ArrayCollection;
[Bindable]
private var arrayCon:ArrayCollection=new ArrayCollection();
private function init():void {
for(var i:Number=0;i<9;i++) {
var op:ObjectProxy=new ObjectProxy();
op.title="Title";
op.good="123";
this.arrayCon.addItem(op);
}
}
private function onClick():void {
var str:String = "";
for (var i:int = 0; i < arrayCon.length; i++) {
var o:ObjectProxy=arrayCon.getItemAt(i) as ObjectProxy;
str += o.title + " "+o.good+" ";
}
mx.controls.Alert.show(str);
}
]]>
</mx:Script>
</mx:Application>
MyPanel.as
package my {
import flash.events.Event;
import flash.events.MouseEvent;
import mx.binding.utils.BindingUtils;
import mx.containers.Panel;
import mx.controls.Label;
public class MyPanel extends Panel {
private var _str:String="111";
public function MyPanel() {
super();
var label:Label=new Label();
label.text=_str;
BindingUtils.bindProperty(label,"text",this,"good");
this.addChild(label);
this.addEventListener(MouseEvent.CLICK,changeTitle);
}
private function changeTitle(evt:MouseEvent):void{
this.title="good";
this.good="study";
}
public function set good(str:String):void{//需要绑定的自定义属性
_str=str;
dispatchEvent(new Event("changeNIMAIPI"));
}
[Bindable(event="changeNIMAIPI")]
public function get good():String{
return _str;
}
}
}
相关文章推荐
- Flex对象与组件的数据动态双向绑定
- VUE 父子组件 双向数据绑定 购物车
- Flex 4双向数据绑定
- Vue父子组件数据双向绑定,子组件可修改props
- vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定
- Flex 4双向数据绑定
- Angular自定义组件实现数据双向数据绑定的实例
- jface databinding:可多选的widget List组件selection项目与java.util.List对象的双向数据绑定
- iview Table组件中Input数据双向绑定
- Vue2.0实现组件数据的双向绑定问题
- vue子组件改变父组件传递的prop值,sync实现数据双向绑定
- angular4自定义组件非input元素实现ngModel双向数据绑定
- vue2组件之间双向数据绑定问题
- Vue 2.0学习笔记:实现组件数据的双向绑定
- Angular:实现组件间双向数据绑定
- 【VUE】.NET实现Tree组件双向绑定数据(1)
- Vue使用.sync 实现父子组件的双向绑定数据问题
- vue父组件和子组件通过sync实现双向数据绑定
- 【VUE】.NET实现Tree组件双向绑定数据(3)-资源分配
- angular学习总结九——父组件与子组件数据的双向绑定