`
zean
  • 浏览: 19184 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

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

    博客分类:
  • Flex
阅读更多

 如题,以下代码展示如何讲界面的表单域的值自动归集到指定对象,以及如何用指定对象自动填充表单域,思路很简单,但用起来挺方便的,代码结构不算好,但挺稳定的,所以也懒得去重构了。

简单的说下原理:

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;
		}
	}
}

 

 

 

 

分享到:
评论

相关推荐

    Flex文本框自动提示

    这种功能在各种应用程序中非常常见,如搜索引擎、在线表单和数据输入界面,可以显著提高用户输入的效率和准确性。 首先,我们要了解Flex的基础。Flex是一个开源的开发框架,主要用于构建富互联网应用程序(Rich ...

    Flex 使用 Cairngorm 框架与java进行数据交互

    前台FLex工程(单独工程Cairngorm)使用Cairngorm框架与后台java工程(FLexToJava)进行数据交互。功能点: ①flex提交表单保存到数据库; ②flex向后台请求,后台返回List集合,flex将集合填充到combox 附带:...

    Flex自动完成源代码[类似Google搜索自动完成功能].zip

    这个压缩包“Flex自动完成源代码[类似Google搜索自动完成功能].zip”包含了一个实现自动完成功能的Flex组件,这在许多Web应用中都非常常见,如搜索引擎、表单输入等,能够提升用户体验,帮助用户快速找到或输入目标...

    flex 简单的增删改查 另外添加checkbox grid

    3. 修改(Edit):用户点击Grid中的某一行进行编辑,表单会自动填充该行的数据,用户修改后保存到模型中。 4. 查找(Search):可以提供搜索框让用户输入关键字,然后过滤Grid显示匹配的数据。 四、Checkbox组件 ...

    一个很漂亮的表单样式,用div+css实现

    在网页设计中,表单是不可或缺的元素,用于收集用户信息、进行数据交互。本示例提供了一种“很漂亮的表单样式”,它利用了HTML的`div`元素结合CSS来构建美观的布局,并通过JavaScript实现了一些炫酷的交互效果。下面...

    纯CSS实现漂亮的表单

    在网页设计中,表单是不可或缺的元素,用于收集用户信息、进行数据交互等。纯CSS实现的漂亮表单不仅可以提升用户体验,还能让网站看起来更加专业和美观。本篇文章将深入探讨如何使用CSS来创建一个既简洁又具有吸引力...

    flex生成pdf全套

    7. **高级功能**:除了基础操作,AlivePDF还支持表单字段、链接、元数据等更复杂的PDF功能。 学习这个资源,你将能够掌握如何在Flex项目中集成AlivePDF库,创建交互式的PDF文档,以及处理用户数据的导出。在实际...

    CSS学生档案表单样式代码.zip

    在CSS(层叠样式表)领域,创建美观且功能丰富的学生档案表单是常见的任务,尤其是在Web开发中。...同时,结合JavaScript,还可以实现更高级的功能,如动态验证、自动填充和数据提交,进一步优化用户界面和交互流程。

    jquery高级注册表单.zip

    此外,HTML5的离线存储和Web存储(如localStorage)功能,还可以帮助我们保存用户数据,实现表单的自动填充。 CSS在美化和布局注册表单方面起着关键作用。通过使用CSS3选择器,我们可以精准地定位并样式化每个表单...

    H5表单美化

    4. 内外边距与填充:`padding`和`margin`可以控制元素内部空间和外部空间,调整表单元素的布局。 5. 自定义伪类:CSS3的伪类选择器如`:hover`, `:focus`, `:active`等,可以使表单元素在不同状态下呈现不同的样式,...

    HTML表单CSS

    HTML表单是网页设计中不可或缺的一部分,用于收集用户输入的数据。CSS(层叠样式表)在美化和控制这些表单元素的布局上起着至关重要的作用。本主题将深入探讨如何使用CSS来定制HTML表单的`button`、`checkbox`和`...

    swift-OC实现的使用“flex布局”的表格控件

    在集成OCExcelView到自己的项目时,开发者可以参考示例项目的代码,学习如何创建表格、填充数据、响应用户交互等。同时,理解Flex布局的基本原理也很重要,这有助于更好地利用OCExcelView的特性,创造出适应性强、...

    Flex PDF文档

    LiveCycle提供了一套API,使得Flex应用能够动态生成、填充表单和转换PDF文档。PDFLib则是一个独立的库,支持在多种编程环境中创建PDF。 3. **PDF组件**:Flex中有一些组件用于展示和交互PDF,如PDFViewer组件,它...

    Flex 3 组件实例与应用(2009版)

    通过以上对《Flex 3 组件实例与应用》一书中提到的各类组件的介绍,我们可以看出Flex 3提供的组件不仅涵盖了基本的UI需求,还包括了高级的交互、数据展示和验证等功能。这使得开发者能够在构建复杂的应用程序时更加...

    Flex4视频教程_03-02使用文本组件.rar

    - Flex4的强大的数据绑定功能使得文本组件的值可以与应用程序的数据模型直接关联,当数据模型变化时,文本内容会自动更新。 通过这个Flex4视频教程,学习者将掌握如何有效地利用这些文本组件创建吸引人的用户界面...

    Flex编写交互代码

    在Flex中,当用户与应用程序中的组件进行交互时,这些组件会广播各种类型的事件,例如点击(`click`)、鼠标滑过(`rollOver`)或鼠标离开(`rollOut`)。为了能够响应这些事件,开发人员需要为每个事件定义相应的...

    《Flex 3 组件实例与应用(2009版)》(PDF)

    《Flex 3 组件实例与应用(2009版)》是一本深入解析Adobe Flex 3框架下组件使用与实践的专业书籍。本书由Dason精心整理于2009年2月,全面覆盖了Flex 3中的各种控件、容器、数据可视化组件以及效果、视图状态和过渡...

    flex css5+html5 2.zip

    4. `&lt;input type="date"&gt;`等新的表单控件简化了数据输入。 5. Web存储API(如`localStorage`和`sessionStorage`)允许在浏览器中持久化数据。 6. Geolocation API允许获取用户的地理位置信息。 7. Web Workers线程...

    flex3的cookbook书籍完整版dpf(包含目录)

    第一章.Flex与ActionScript基础(3) 1.1节.用FlexBuilder创建Flex项目 1.2节.用FlexBuilder创建Flex库项目 1.3节.创建ActionScript项目 1.4节.在FlexBuilder中设置MXML编译器选项 1.5节.在FlexBuilder外部编译Flex...

    flex quick starts 中文版(翻译by dreamer)

    - **Form**:按照标准表单格式排列子组件,常用于创建数据输入表单。 - **ApplicationControlBar**:通常位于Application容器的顶部边缘,包含提供全局导航和程序命令的组件。 - **ControlBar**:放置于Panel或...

Global site tag (gtag.js) - Google Analytics