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="hanjingnuo@163.com"/></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/gvar 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。
?
?
附件是例子的源代码。
?
?