Flexed toolkit组件库之CForm介绍

Flexed toolkit是一个简单易用的flex组件库。主页的地址是http://code.google.com/p/flexedtoolkit/。本文主要讲解其中的一个form组件CForm的用法。

 

开发中需要很多的form表单，虽然flex组件库中已经包含form组件但是form组件的功能太简单了，例如：表单项按2列排放，重置，得到表单的数据等，都需要自己写很长的代码。再一次感谢Flexed toolkit的作者为我们提供了CForm组件来解决这些问题。

CForm组件的原理是根据XML中的信息动态创建flex组件，优点在于：布局、验证等都可以是自动的，程序员可以把更多的精力放在业务逻辑上。

 下面举个简单的例子是讲下CForm组件的使用方法：

1.导入cform.swc。

2.编写一个basic.xml文件，问价内容如下：

 

<?xml version="1.0" encoding="utf-8"?>
<cform columns="2" vgap="5" igap="1">
	<group label="用户信息" column="1">
		<formitem>
			<field id="fname" label="姓名">
				<widget type="text" default="韩敬诺"/>
			</field>
		</formitem> 
		<formitem>
			<field id="age" label="年龄">
				<widget type="stepper" default="26" min="1" max="200"/>
			</field>
		</formitem>
		<formitem>
			<field id="gender" label="性别">
				<widget type="radiogroup">
					<item data="male" label="男" selected="true"/>
					<item data="female" label="女"/>
				</widget>
			</field>
		</formitem>
		<formitem>
			<field id="bday" label="生日">
				<widget type="date" showtime="true"/>
			</field>
		</formitem>
		<formitem>
			<field id="alive" label="婚否">
				<widget type="checkbox" selected="false"/>
			</field>
		</formitem>
	</group>
	<group label="其他信息" column="2">
		<formitem>
			<field id="address" label="Email">
				<widget type="textarea" default="[e-mail]"/>
			</field>
		</formitem>
	</group>
</cform>

 

3.在Application的初始化方法中添加以下内容

 

   

 import flexed.widgets.form.CForm;
 public var cf:CForm;

 

 

private function init():void{
    var str:String="basic.xml";
    cf=new CForm();
    cf.widgetsFile=str;
    cf.init();
    box.addChild(cf);
}

 

以上是用as3创建的 也可以用mxml来创建cform组件。

<flexed:CForm id="cfrm" widgetsFile="basic.xml" 
             verticalCenter="0"  
             verticalScrollPolicy="auto" horizontalCenter="0"  
             horizontalScrollPolicy="off"
             width="400" height="100%"/>

 

注意：cform此时并不会创建，需要手动调用它的init()方法。

 

来看下效果吧

 

 

cFormValidation是表单验证函数。

例如以下是验证数字和空置的验证函数。

private function validateForm(id:String, value:Object, values:Object):ValidationResult{
			var result:ValidationResult = new ValidationResult(false);
			if(id == "fname" || id == "txtFName"){
				var rxpNumber:RegExp = /\d/g
				var match:Array = null;
					match = (value as String).match(rxpNumber);
				
				if(match.length != 0)
					result = new ValidationResult(true,null,"","No numbers allowed in this field!!!");
			}else if(id == "txtCoName"){
				if(value == "" || value == null)
					 result = new ValidationResult(true,null,"","You HAVE to enter a company name!");
			}
			return result;
		}

 

getData(false) 得到cform的data值 如果参数是false则得到所有值，如果为空则得到修改过的值。

 

resetCForm()将表单置空。

 

setData(values:Object);为表单赋值。

 

getWidget("WidgetID").getUIComponent() 访问cform组件里面的内部组件。

 

createCFormFromXML(new XML());从一个XML对象创建CForm。

 

 

附件是例子的源代码。