论坛首页 编程语言技术论坛

Flex表单自动填充与表单数据自动收集

浏览 4408 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-08-13   最后修改:2011-08-13

 如题,以下代码展示如何讲界面的表单域的值自动归集到指定对象,以及如何用指定对象自动填充表单域,思路很简单,但用起来挺方便的,代码结构不算好,但挺稳定的,所以也懒得去重构了。
简单的说下原理:
1 收集表单数据,通过指定容器对象,对容器进行递归遍历,当发现是表单域时,判断对象是否有表单域名称相同的属性,如果有则将表单域的值设置到对象中。
2 同理重置表单和自动填充表单对1做反向操作就行,只是对下拉、radio等会自动定位判断。

问题:
1 当界面的表单值对应到多个对象时要自动封装怎么办,很简单,调用多次wrapperFormData(container:Object,bo:Object)就行。
2 当界面的表单值对应到多个对象时要自动填充怎么办,同样,调用多次fillForm(rec:Object,container:Object)就行。
支持flex3和flex4版本。

package xxx.service
{
	import mx.controls.CheckBox;
	import mx.controls.ComboBox;
	import mx.controls.DateField;
	import mx.controls.RadioButton;
	import mx.controls.RadioButtonGroup;
	import mx.controls.TextArea;
	import mx.controls.TextInput;
	import mx.core.Container;
	import mx.core.IVisualElementContainer;
	
	import spark.components.BorderContainer;
	import spark.components.CheckBox;
	import spark.components.ComboBox;
	import spark.components.DropDownList;
	import spark.components.RadioButton;
	import spark.components.RadioButtonGroup;
	import spark.components.TextArea;
	import spark.components.TextInput;

	/**
	 * 表单数据收集和填充服务
	 * 收集过程:通过遍历容器,提取容器种的表单控件,将表单控件的id与值作为对象的属性与值写入对象
	 * 赋值过程:通过遍历容器,提取容器种的表单控件,如果数据源中包含表单控件的id,则对该控件赋值
	 */
	public class FormParser
	{
		private static var _instance:FormParser=new FormParser();
		public function FormParser()
		{
		}
		public static function getInstance():FormParser
		{
			return _instance;
		}
		public function wrapperFormData(container:Object,bo:Object):void
        {
        	if(bo==null)
        	{
        		throw new Error("收集表单数据的对象不能为空!");
        	}
			var count:Number=container.numChildren;
        	for(var i:Number=0;i<count;i++)
        	{
				var obj:Object=container.getChildAt(i);
				if(isTextField(obj))
	        	{
	        		appendProperty(bo,obj,obj.text);
	        	}
	        	else if(isCheckBox(obj))
	        	{
	        		appendProperty(bo,obj,obj.selected?"1":"0");
	        	}
	        	else if(isRadioButton(obj))
	        	{
	        		if(obj.groupName!=null)
	        		{
	        			bo[obj.groupName]=obj.group.selectedValue;
	        			continue;
	        		}
	        		if(obj.selected)
	        		{
	        			appendProperty(bo,obj,obj.value);
	        		}
	        	}
	        	else if(isComboBox(obj))
	        	{
	        		var result:Object=(obj.selectedItem==null||obj.selectedItem is String||!obj.selectedItem.hasOwnProperty("data"))?null:obj.selectedItem.data;
	        		appendProperty(bo,obj,result);
	        	}
				else if(isDropDownList(obj))
				{
					var dr:DropDownList=obj as DropDownList;
					appendProperty(bo,obj,dr.selectedItem.data);
				}
	        	else if(isRadioButtonGroup(obj))
	        	{
	        		//取不到
	        	}
	        	else if(obj is Container||obj is IVisualElementContainer)
	        	{
	        		wrapperFormData(obj,bo);
	        	}
        	}
        }

        /***
        * 为对象增加指定属性和属性值

        */
        private function appendProperty(bo:Object,obj:Object,propertyValue:Object):void
        {
        	if(!obj.hasOwnProperty("id"))
        	{
        		return;
        	}
	        bo[obj["id"]]=propertyValue;
        }
        /***
        * 重置form中的项

        */
		public function resetForm(container:Object):void
        {
			var count:Number=container.numChildren;
			for(var i:Number=0;i<count;i++)
			{
				var obj:Object=container.getChildAt(i);
				if(isTextField(obj))
	        	{
	        		obj.text="";
	        	}
	        	else if(isCheckBox(obj))
	        	{
	        		obj.selected=false;
	        	}
	        	else if(isRadioButton(obj))
	        	{
	        		if(obj.groupName!=null)
	        		{
						obj.group.selectedValue=null;
	        			continue;
	        		}
	        		if(obj.groupName==undefined||obj.groupName=="")
	        		{
	        			obj.selected=false;
	        		}
	        	}
	        	else if(isComboBox(obj))
	        	{
	        		obj.selectedIndex=0;
	        	}
	        	else if(isRadioButtonGroup(obj))
	        	{
	   				obj.selectedValue=obj.getRadioButtonAt(1).value;
	        	}
				else if(isDropDownList(obj))
				{
					obj.selectedIndex=0;
				}
	        	else if(obj is Container|| obj is IVisualElementContainer)
	        	{
	        		resetForm(obj);
	        	}
        	}
        }
        /***
        * 根据对象填充表单
        */
        public function fillForm(rec:Object,container:Object):void
        {
        	if(rec==null)
        	{
        		throw new Error("指定的数据源为空!");
        	}
			var count:Number=container.numChildren;
			for(var i:Number=0;i<count;i++)
			{
				var obj:Object=container.getChildAt(i);
        		var name:String=getObjectName(rec,obj);
        		if(isFormControl(obj))
        		{
        			if(name==null)
        			{
        				continue;
        			}
        		}
        		var value:String=getValue(rec,name);
				if(isTextField(obj))
				{
	        		obj.text=value;
	        	}
	        	else if(isCheckBox(obj))
	        	{
	        		if(value=="1")
	        		{
	        			obj.selected=true;
	        		}
	        	}
	        	else if(isRadioButton(obj))
	        	{
	        		if(obj.groupName!=null)
	        		{
						obj.group.selectedValue=value;
	        		}
	        		else
	        		{
	        			 if(obj.data==value)
	        			 {
							 obj.selected=true;
	        			 }
	        		}
	        	}
	        	else if(isComboBox(obj)||isDropDownList(obj))
	        	{
	        		var source:Object=obj.dataProvider;
	        		var sel:Object=getItemByData(source,value);
	        		if(sel==null)
	        		{
						obj.selectedIndex=0;
	        		}
	        		else
	        		{
						obj.selectedItem=sel;
	        		}
        		}
        		else if(obj is Container||obj is IVisualElementContainer)
        		{
        			fillForm(rec,obj);
        		}
        	}
        }
    	private function getValue(rec:Object,name:String):String
		{
        	return name==null?"":rec[name];
		}
		private function getObjectName(rec:Object,obj:Object):String
		{
			var name:String=obj.hasOwnProperty("id")?obj.id:null;
			if(isRadioButton(obj)&&obj&&obj.groupName!=null)
			{
				name=obj.groupName;
			}
			if(rec.hasOwnProperty(name))
			{
				return name;
			}
			return null;
		}
		private function isFormControl(obj:Object):Boolean
		{
			if(isTextField(obj))
			{
				return true;
			}
			if(isCheckBox(obj)||isRadioButton(obj)||isComboBox(obj))
			{
				return true;
			}
			return false;
		}
		/**
		 * source Combox下拉列表数据源
		 * itemData 下拉数据源中某项的data属性值
		 * return itemData对应的item
		 */
		public function getItemByData(source:Object,itemData:Object):Object
		{
			if(source==null||itemData==null)
			{
				return null;
			}
			for each(var obj:Object in source)
			{
				if(obj.data==itemData)
				{
					return obj;
				}
			}
			return null;
		}
		
		private function isDropDownList(obj:Object):Boolean
		{
			return obj is DropDownList;
		}
		
		private function isRadioButtonGroup(obj:Object):Boolean
		{
			return obj is mx.controls.RadioButtonGroup||obj is spark.components.RadioButtonGroup;
		}
		private function isRadioButton(obj:Object):Boolean
		{
			return obj is mx.controls.RadioButton||obj is spark.components.RadioButton;
		}
		
		private function isComboBox(obj:Object):Boolean
		{
			return obj is mx.controls.ComboBox||obj is spark.components.ComboBox;
		}
		
		private function isCheckBox(obj:Object):Boolean
		{
			return obj is mx.controls.CheckBox||obj is spark.components.CheckBox;
		}
		
		private function isTextField(obj:Object):Boolean
		{
			if(obj is mx.controls.TextInput||obj is mx.controls.TextArea||obj is mx.controls.DateField||obj is spark.components.TextInput||obj is spark.components.TextArea)
			{
				return true;
			}
			return false;
		}
	}
}

 

   发表时间:2012-02-22  
就是一个数据集和表单的双向绑定而已
0 请登录后投票
论坛首页 编程语言技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics