Extjs表单生成器

背景

随着Extjs的不断成熟,它也在不断的被开发人员所接受和使用。Extjs是一个完全的UI框架,它自带的控件已经能很好的满足日常开发的需要,并且它底层仍是以html和样式为基础,在不满意需求特殊需求的情况,我们也非常方便的进行扩展。所以,我一贯的态度是,要使用extjs就要用的彻底,UI部分应该完全使用Extjs来实现,完全摈弃传统的ASP.NET前台模式。当然,现在也有一些把Extjs封装成ASP.NET Server Control的实现,如:cooliteExtAspNet

Extjs的UI框架完全托管了表单的布局,让我们在处理表单布局的时候变成非常的轻松和方便。开发人员在不关心HTML和样式的情况下,通过JSON代码就可以生成和控制风格统一的表单,并且可以大大减少开发人员对UI设计人员的依赖。但是通过JSON来生成表单,却会带来另一个非常大的难题,那就是设计一个表单通常需要编写几百行,甚至几千的Javascript代码,在目前缺少一个充分设计支持的Javascript IDE的情况下,这是一个相当大的负担,只要缺少一个豆号,可能会花费你大量的时间来进行调试,这是一个非常严重的问题。由于通过JSON代码来生成UI,这让Web表单的可视化设计变成了一种可能,只要让设计器生成描述表单的JSON代码即可。但目前仍然没有一个成熟的,可用的可视化表单设计器。另一方面,由于在管理系统中,所有的表单基本都是采用同一个布局,是可以被模式化的。所以以一种结构化的方式来描述表单,通过表单生成引擎解析结构化的表单描述数据,生成JSON代码,在客户端进行相应的处理即可大大减轻开发的压力,同时提高开发效率。

基本原理

Extjs表单生成器的想法就是在这样的背景下产生的,并且得到了实际项目的验证是可行,取得了很好的效果。Extjs表单生成器的基本原理是:定义表单定义元数据(可以是XML,也可以保存在数据库中),通过一个解析器来解析这些元数据生成所需的表单JSON脚本(分为两种,Grid和Detail表单),然后由经过MVC控制器,输出JSON对象,在客户端接收生成表单,并进行数据查询操作。生成的表单所需查询的数据来源和数据提交目标,都在表单元数据定义中说明。标准有的四种操作:

  1. QueryUrl,列表查询的目标地址。
  2. DetailsUrl,查看详细表单数据。
  3. SubmitUrl,提交添加或更新数据。
  4. DeleteUrl,删除数据的地址。

定义了这四种标准后,基本上就可以满足普通的增,删,改,查的操作。每一个Url地址,对应的就是一个MVC的Action。

实现

元数据格式

元数据包括表单定义和字段定义,对应的接口分别为:ISchema和IColumn。ISchema包含IColumn,而IColumn也可以分组(对应的Extjs控件是FieldSet),因为两个接口都继承自IColumnContainer接口,对应类图:

FormMetaData元数据的来源,可以是XML文件,也可以是定义在数据库中。在这里,我们默认实现是将元数据保存在XML文件中。

服务器端

服务器端的入口是FormController,它是一个标准MVC控制器。构建FormController需要提供以下组件的实例:

  1. ITreeNodeProvider,生成导航树的提供者。默认是XmlTreeNodeProvider,导航树菜单由adminNavigate.config提供。在构建时需要提供ITreeNodeChecker,这是控制导航树结点是否显示的权限控制器。
  2. IGeneratorFactory,用于获得表单生成器的工厂,在构建IGeneratorFactory里可能需要提供ISchemaProvider,用于提供表单元数据。这里默认实现是XmlSchemaProvider。

这些实例的依赖关系可通常IOC依赖注入,也可以静态指定。FormController的三个Action的作用分别是:输出Extjs工作平台,构建导航菜单,生成表单。

客户端

客户端部分是需要对生成的表单进行一些后期处理。其中重要的部分是定义表单基类,这些基类是定义了表单的基本组成部分,比如Toolbar,按钮等。同时为了提高灵活性,还可能针对不同的表单,定义不同的表单类指定到表单元数据。

使用

生成器默认使用XML提供者,开发人员要创建表单里,只需要在Schema目录下定义一个符合ExtForm.xsd规格的xml文件。打开xml文件,设置Schemas属性为:Extform.xsd,即在设计XML文件时出现智能提示:

Extform

表单定义后,编写对应的Controller完成数据的增,删,改,查。

写在最后

本文介绍到这里,发现条理很不清楚。可能是太久没有发现技术博客,生疏了吧。如果兴趣,请从这里下载源码,看源码比看文章会清楚的多。随便说一下,Extjs表单生成器是Kooboo Cms的基础组件之一,在Kooboo CMS中的所有表单都是通过这个生成器来生成的,你也可以通过Kooboo CMS来了解更多的表单生成器的使用。

posted @ 2009-08-18 11:23  汉卿  Views(2439)  Comments(1Edit  收藏  举报