BlueDavy之技术Blog

在上篇中简单的描述了下在我现在开发的东西中关于元数据的设计，在这篇中将结合目前实际的系统的截图来说明关于元数据的具体定义、 UI 方面的控制以及基于 RIA 和元数据的系统实现。

图一

上图红色部分即为一个完整的数据集组件，可以看到该数据集组件中包含了数据集操作、显示字段以及显示数据几个部分，这几个部分都是通过用户所配置的元数据来进行展示的，从这些部分我们可以看出需要定义的元数据有：

1、  数据集组件所绑定的查询语句

需要通过此查询语句获取到相应的数据。

2、  数据集组件所绑定的操作

需要通过这个来决定这个数据集组件到底拥有哪些操作，同时对于每种操作也需要定义更为细致的元数据，如分页就需要定义每页的记录数。

3、  数据集组件的显示字段

需要通过这个来定义在数据集组件中需要显示出的字段的名称。

4、  数据集组件的显示方式

需要通过这个来定义数据集组件到底是以显示表格、单选表格、多选表格、单选树还是多选树等方式来展现。

其实还有另外一部分元数据也是需要的，就是查询所得的 PO 的元数据，这个是系统通过 Hibernate Metadata 来获取得到的，还有为控制整个显示形式的 css 文件，如不配置则采用显示控件 ( 树、表格等 ) 默认的 css 。

我们继续操作下去，点击新增，进入到维护的页面，如下：

图二

上图中表达了在数据集组件中关于维护信息的元数据的基本配置需求：

1、  数据集的维护字段

用户需要定义维护字段的元数据，当然，用户也可以不配置转而交给系统自动生成，但系统自动生成的话则必然会变成类似 username ， userdesc 什么的东西。

2、  维护字段所绑定的交互组件

用户可为维护字段绑定交互组件，交互就象我在上篇文章中讲述的一样，分为三种类型：下拉、弹出和链接类型。其中下拉和弹出没什么说的，链接则是在 html 中 a href 基础上的扩展，通过指定 target 的方式实现的一种扩展， target 可是页面的任意一个元素。

每种交互组件都只是一个容器而已，容器中放置的是一个数据集组件，从上图可以看出，这个下拉交互组件中绑定的数据集组件非常简单，和我们图一中看到的是不一样的， ^_^ ，其实就是少配了一些元数据。

隐性的元数据方面在目前我所做的系统中还有一个是可配置字段的关联字段，例如部门负责人这个字段是关联到部门这个字段上的，需要根据用户所选择的部门来过滤显示部门的负责人。

经过上面的分析，已经基本可以看出系统中的元数据的定义，下面来看看是怎么样基于 RIA 以及这些元数据来实现系统的：

图一中对应的源文件如下所示：

< span  id =_COMPONENTTEST__NEWACTION_CONTAINER ></ span > &nbsp;

< span  id =_COMPONENTTEST__UPDATEACTION_CONTAINER ></ span > &nbsp;

< span  id =_COMPONENTTEST__DELETEACTION_CONTAINER ></ span > &nbsp;

< span  id =_COMPONENTTEST__TABLE_CONTAINER ></ span >

< span  id =_COMPONENTTEST__PAGENAVACTION_CONTAINER ></ span >

< script >

 

     var  lifecycle = new  ComponentLifecycle();

    lifecycle.load( " _COMPONENTTEST_ " );

 

</ script >

可以看到是通过一段javascript来完成数据集组件的加载的，而之上所定义的span则代表着数据集组件中相关元素的容器，用于控制数据集组件中元素的布局。

简要的描述系统的处理流程，就可以看出是如何基于 RIA 以及元数据去完成数据集组件的显示的，至于数据集组件的操作后一步再细说。

1、  ComponentLifecycle.load 通过 DWR 调用后台的数据集组件服务。

2、  数据集组件服务根据数据集标识 ( 也就是上面 load 中的参数 ) 获取数据集组件的元数据，当然，这些元数据就包括我上面所分析的那些元数据，根据其中的绑定的查询语句的元数据去获取实际的数据 ( 当然，这步中还会出现根据参数获取、分页获取等情况 ) 。

3、  在获取了实际数据后，将实际数据以及元数据共同放入一个数据集组件对象中，并将此对象返回至页面。

4、  此时，在 ComponentLifecycle 中定义的回调方法便开始执行，这个时候我将得到的这个 component 对象传递给了 ComponentView ，由 ComponentView 来完成数据集的显示。

5、  此时 ComponentView 便会通过 component 获取所绑定的显示控件 ( 如树、表格等 ) ，调用其中的组装 html 片断的方法来获取数据集组件显示的 html 片断。

6、  后台的显示控件此时就结合元数据以及实际数据来完成 html 片断的组装 (Velocity 模板的方式 ) 。

7、  前台 ComponentView 在得到这个 html 片断后将其对应的放入相应的容器中，完成数据集组件的显示。

经过这样的一个过程数据集组件就展现在眼前了，应该说，在拥有了完整数据集组件元数据定义的情况下，这步看起来也不是那么的困难。

接下来看看数据集操作的实现，就拿上面的新增来说，同样的方式，在后台新增的元数据中将有一个对应的构造新增按钮所绑定的 js 的模板，在显示数据集操作时对应的会执行这段 js ，将新增按钮的 onclick 事件绑定到事件管理器中已注册的新增事件上， ^_^….

新增按钮的 onclick 事件触发时将通过事件管理器来实现响应，在目前这步我所做的就是清空当前页面中当前数据集组件的显示容器中的内容，同时开始根据元数据组装新增页面，这步页面的组装过程和上面基本相同，通过调用更新动作元数据中组装 html 片断的方法来获取 html ，之后由前台负责将它放入相应的容器中进行显示。

至于交互组件其实也是同样的，根据字段所绑定的交互组件的情况在后台形成字段 onclick 事件所绑定的交互组件的 script ， ^_^

上面的描述没有提及的是关于数据集维护具体是怎么实现的，这一步我现在的做法是采用工作单元模式，页面在进行新增、编辑、删除等维护操作时均为注册到工作单元中，提交的时候则根据 Hibernate Metadata 结合工作单元组装为 xml ，将此 xml 提交至后台由 xstream 转化为相应的后台的 UnitOfWork 对象，之后提交此 UnitOfWork 对象即可。

不知道这样的描述是不是够清楚，但可以看出，元数据是实现这块最为重要的部分，元数据的表达决定了数据集组件的显示以及操作是否能够达到用户的期望，其他的关键要素则仍然是遵循 web 页面的结构、行为和显示三点，结构由后台结合元数据、实际数据以及 Velocity 模板来完成、行为采用 js 方式实现，由后台完成将其绑定到对应的元素上，显示则采用 css 进行控制。

可以看到，在这样的一个设计中，数据集组件仅为页面的部分元素而已，在这样的情况下 UI Design 会不受控制，在 UI Design 形成了 html 后，只需要将其中相关的动态部分的元素进行替换，而且仍然是 html 的形式，一定程度上保证了 html 的纯洁性，当然，在后一步采用附加 xml 描述 html 元素的情况下就可以完全保证 html 的纯洁性了，在那样的情况下，即使 UI 的布局以及设计大大改变也不会对 UI 集成带来什么工作量。

当然，在上面的设计还有非常多需要考虑的因素，象开发人员如何自定义自己的数据集组件的操作，如对于信息显示的数据集组件，通常需要有审核的功能，而这个在框架中是不提供的，开发人员如何嵌入形成自己的这块是很重要的部分。

希望大家多多交流， ^_^……