`
kv0002
  • 浏览: 8694 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

Flex对象与组件的数据动态双向绑定

阅读更多
用于Flex中Entity对象与Display对象之间的数据双向动态绑定,支持TextInput、DateField、ComboBox。

package controller.utils{
	import com.ericfeminella.collections.HashMap;
	import com.ericfeminella.collections.IMap;
	
	import flash.display.DisplayObject;
	import flash.utils.describeType;
	
	import mx.binding.utils.BindingUtils;
	import mx.binding.utils.ChangeWatcher;
	import mx.events.PropertyChangeEvent;
	import mx.utils.ObjectProxy;
	
	/**
	 * @Description: BindingHelper
	 * @author Lyon
	 */
	public class BindingHelper{
		/**
		 * 目前支持的绑定组件类型 
		 */		
		private static const typeMap: Object = {	'mx.controls::TextInput' : 'text',
																		'mx.controls::DateField' : 'selectedDate',
																		'mx.controls::ComboBox': 'selectedItem'
																		};		
		/**
		 * 存储监控对象的句柄
		 * key: entityObj
		 * value: ChangeWatcher
		 */		
		private static var handleList:IMap = new HashMap();
		
		/**  
         * 对象与组件的数据动态双向绑定  
         * @param entityObj   Entity Object
         * @param displayObj  MX控件
         * @param type       	 	控件类型,如:'mx.controls::TextInput'
         * @exclude					需要排除的property
         * @bidirectional      		是否做双向绑定(如果为false,那么只做entity到displayObject的绑定)
         * @param commitOnly
         */	
		public static function bidirectionalDataBind(
									entityObj:Object, 
									displayObj:DisplayObject,
									exclude:Array=null,
									bidirectional:Boolean=true,
									type:String='ALL',									
									commitOnly:Boolean = false):void{
			if(type == 'ALL'){
				for (var typeTmp:String in typeMap){
					bidirectionalDataBind(entityObj,displayObj,exclude,bidirectional,typeTmp,commitOnly);
				}
			}else{
				//通过反射机制取出当前MXML中的信息
				var instanceInfo:XML=flash.utils.describeType(displayObj);
				var properties:XMLList =instanceInfo..accessor.(@type==type);
				var tmpObj:ObjectProxy;
	//			trace(instanceInfo..accessor.(@type==type));
	
				var prop:String = BindingHelper.getSiteProp(type);
	
				for each(var propertyInfo:XML in properties){
					//此处取出的为textinput的id
				  	var proName:String = propertyInfo.@name;
				  	
				  	// 需要排除的property
				  	if(exclude != null && exclude.indexOf(proName) != -1){
				  		continue;
				  	}
				  	
				  	// 检查该property是否存在
				  	if(BeanUtils.checkPropertyExist(entityObj,proName) == false){
				  		continue;
				  	}
				  	
				  	try{
					  	// ComboBox
					  	if(type == 'mx.controls::ComboBox'){
					  		if(handleList.getValue(entityObj) == null){
					  			handleList.put(entityObj,new HandleObject(entityObj));
					  		}
					  		
							var cw:ChangeWatcher = ChangeWatcher.watch(entityObj,proName,setData);
							HandleObject(handleList.getValue(entityObj)).addChangeWatcher(proName,cw);
							
							BindingUtils.bindProperty(entityObj,proName,DisplayObject(displayObj[proName]),prop,commitOnly);
					  	}else{
					  		BindingUtils.bindProperty(DisplayObject(displayObj[proName]),prop,entityObj,proName,commitOnly);
							if(bidirectional == true)
								BindingUtils.bindProperty(entityObj,proName,DisplayObject(displayObj[proName]),prop,commitOnly);
					  	}
					 }catch(err:Error){
				  		trace(err.message);
				  	}
				}
			}
		}
		
		/** 
		 * 清空监控对象的句柄集合
		 */		
		public static function clean():void{
			if(handleList != null){
				for each(var ho:Object in handleList.getValues()){
					HandleObject(ho).clean();
				}
				
				handleList.clear();
			}
		}
		
		/**
		 * 监听ComboBox事件的变化
		 * @param obj
		 */
		private static function setData(obj:PropertyChangeEvent):void{
			if(obj.newValue == null){
				return;
			}
			var ho:HandleObject = handleList.getValue(obj.source);			
			var cw:ChangeWatcher = ho.getChangeWatcher(obj.property);
			
			if(obj.newValue is String){
				cw.unwatch();
				cw = ChangeWatcher.watch(obj.source,obj.property,setData);
				ho.addChangeWatcher(obj.property,cw);
				return;
			}else{	
				var code:Object = obj.newValue.code;
				obj.source[obj.property] = code;
			}
		}
		
		/**
		 * 返回组件TYPE对应的需要填充的属性名称 
		 * @param type
		 * @return 
		 */		
		private static function getSiteProp(type: String): String{
			for (var name:String in typeMap){
				if(name == type){
					return typeMap[name];
				}
			}
			return null;
		}
	}
}

import mx.binding.utils.ChangeWatcher;
import com.ericfeminella.collections.IMap;
import com.ericfeminella.collections.HashMap;
internal class HandleObject{
		private var entityObject:*;
		private var properityList:IMap;
		
		public function HandleObject(entityObject:*):void{
			this.entityObject = entityObject;
			properityList = new HashMap();
		}
		
		public function addChangeWatcher(propName:Object, cw:ChangeWatcher):void{
			properityList.put(propName,cw);
		}
		
		public function getChangeWatcher(propName:Object):ChangeWatcher{
			return properityList.getValue(propName);
		}
		
		public function clean():void{
			for each(var cw:Object in properityList.getValues()){
				ChangeWatcher(cw).unwatch();
			}
			
			properityList.clear();
		}
	}

package controller.utils{
	
	import com.adobe.serialization.json.JSON;
	
	import mx.collections.ArrayCollection;
	import mx.utils.ObjectUtil;
	import mx.utils.StringUtil;

	/**
	 * @Description: Object Utils
	 * @author Lyon
	 */
	public class BeanUtils{		
		/**
		 * 检查对象的property是否存在
		 * @param obj
		 * @param proName
		 * @return 
		 */		
		public static function checkPropertyExist(targetObj:*, proName:String):Boolean{
			if(targetObj as String 
					|| targetObj as int
					|| targetObj as Date
					|| targetObj as Number){
				return false;
			}
			
			var objInfo:Object = ObjectUtil.getClassInfo(targetObj);
			for each(var name:String in objInfo.properties){
				if(name == proName){
					return true;
				}
			}
			
			return false;
		}
分享到:
评论

相关推荐

    flex数据绑定的原理

    在Flex开发中,数据绑定(Data Binding)是一种强大的机制,它允许UI组件的状态与应用程序的数据模型之间自动同步。数据绑定的原理是通过监听数据源的变化,并自动更新与之绑定的UI组件,反之亦然,从而简化了代码并...

    FLEX资源——FLEX数据绑定专题(中文PDF)

    文档可能讲解如何通过数据绑定与这些服务交互,获取和更新远程数据。 7. **实用案例与最佳实践**:实际开发中的例子和最佳实践将帮助读者更好地理解和应用数据绑定,避免常见错误,并优化性能。 8. **问题排查与...

    flex企业应用开发笔记-数据绑定

    在Flex企业应用开发中,数据绑定是连接UI组件与数据模型的重要机制,使得视图能够自动反映模型的变化,反之亦然。这篇笔记主要探讨的是如何在Flex中实现数据绑定,以及其在实际应用中的作用。 数据绑定是Flex框架的...

    FLEX数据绑定专题

    例如,通过使用Bindable元标签或Bindable类修饰符,可以实现输入控件(如TextInput)与数据模型间的双向绑定: ```mxml ``` 在Flex中,数据绑定是提高开发效率、简化代码的关键特性。结合Java后端,开发者可以...

    flex数据绑定 pdf

    5. **数据绑定与MVC模式**:Flex中的数据绑定与Model-View-Controller(MVC)设计模式的关系,如何通过数据绑定实现MVC的分离关注点。 6. **实用示例**:提供具体的Flex项目实例,展示如何在实际开发中应用数据绑定...

    FLEX数据绑定四种方式

    `<mx:Binding>`标签提供了一种更为灵活的数据绑定方式,它可以定义更复杂的绑定逻辑,包括双向绑定等高级功能。 **使用方法** 假设有一个名为`sourceVar`的变量和一个名为`targetLabel`的Label组件,可以使用`...

    Flex Bind数据绑定实例代码

    Flex Bind数据绑定是Adobe Flex应用程序开发中的核心特性,它允许开发者在用户界面组件和应用程序模型之间建立动态连接,实现数据的自动同步。这种强大的功能极大地简化了编程逻辑,特别是处理用户交互和数据更新时...

    flex 数据绑定 dataGrid.rar

    3. **双向绑定**:双向数据绑定允许数据在源对象和目标对象之间流动。常见于输入控件,如文本框,当用户输入时,数据会自动更新到源对象。 4. **表达式语法**:`<s:property attribute="{sourceProperty}" />`,...

    flex数据绑定

    数据绑定是Flex开发中的核心概念,它允许UI组件与应用程序数据之间建立动态的连接,使得当数据发生变化时,界面可以自动更新,反之亦然。这种特性极大地简化了开发者的工作,提高了代码的可维护性和效率。 标题...

    Flex 数据绑定

    在Flex中,数据绑定是一种声明性编程方式,通过简单的语法就能实现双向绑定,即模型变化时更新视图,用户交互改变视图时更新模型。 2. 声明式数据绑定 在Flex中,数据绑定通常使用`=`, `:`或`{}`符号来表示。例如,...

    FLEX 数据绑定专题一(转)

    本文将深入探讨“FLEX数据绑定”这一专题,它是一种强大的机制,允许视图与模型之间的自动同步,使得开发者能够更加专注于业务逻辑而不是繁琐的同步操作。本文是系列文章的第一部分,主要介绍数据绑定的基本概念、...

    flex 时间组件(time)

    Time组件可以与其他数据模型进行双向数据绑定,以实现视图和模型之间的同步。例如,可以将TimePicker的`selectedTime`属性与应用程序的数据模型关联起来。 5. 扩展和自定义: 如果标准的Time组件无法满足需求,...

    flex Twaver组件使用

    当`DataBox`中的数据发生变化时,这些变化会自动反映到与其关联的所有视图组件上,实现了数据和视图的双向绑定。 总的来说,TWaver Flex组件是构建富互联网应用的强大工具,它简化了图形界面的开发,提高了数据管理...

    flex数据交互_方式

    Flex提供了两种类型的数据绑定:单向绑定和双向绑定。单向绑定意味着数据只能从模型流向视图,而双向绑定则允许数据在模型和视图之间双向流动,使得数据更新更加灵活和实时。 例如,在一个简单的Flex应用程序中,一...

    flex显示数据库数据

    Flex是一种基于Adobe Flash Player或Adobe AIR运行时的开源框架,用于构建富...这个过程涉及的技术点包括Flex组件使用、Java数据库操作、Web服务集成以及数据绑定等,对于开发富互联网应用程序来说是非常关键的技能。

    FLEX数据传输与交互

    四、数据绑定与状态管理 1. 数据绑定:FLEX中的数据绑定是其强大功能之一,它允许UI组件的属性自动反映模型数据的变化,反之亦然。这简化了UI与数据模型之间的同步工作。 2. Model-View-Controller(MVC):FLEX...

    flex 官方文档 中文教程

    4. **Flex组件** Flex提供了大量预定义的UI组件,如按钮、标签、列表、面板等,开发者可以通过这些组件快速搭建用户界面。每个组件都有丰富的属性和方法,可自定义样式和行为。 5. **布局管理** Flex支持多种布局...

    flex简单实例。flex比较简单的 组件特效,对初学者有很大帮助

    2. **数据绑定**:Flex支持双向数据绑定,这意味着组件的属性可以直接与数据模型关联,当数据变化时,组件会自动更新,反之亦然。 3. **事件处理**:通过添加事件监听器,可以响应用户的交互操作,如点击按钮、拖动...

Global site tag (gtag.js) - Google Analytics