电子表单系列谈之三位一体的表单工具

向右看齐 2021-09-17 14:54 261阅读 0赞

袁永福( [http://www.xdesigner.cn][http_www.xdesigner.cn] ) 2007-8-15  
    我正在开发的表单工具是一种三位一体的表单工具( ![rar.bmp][] [点击下载其概念版本][Link 1])，它同时集成了对WinForm,HTML和XSLT的设计功能，使用它，对于同一个表单模板，无需修改即可生成WinForm表单，HTML表单和XSLT表单。  
**WinForm表单**  
    表单样式设计器是类似VS.NET的WinForm窗体设计器，保存的是表单元素的绝对坐标信息，因此比较容易根据表单模板来生成WinForm界面。表单元素类型和WinForm控件类型是一一对应的。处理起来比较简单。  
表单执行引擎根据表单设计来生成WinForm界面处理过程比较简单，首先使用表单文档对象模型加载表单设计文档，然后遍历该表单文档中所有的表单元素对象，针对每一个表单元素对象生成一个对应的WinForm控件，然后添加到一个容器中。  
    在生成WinForm界面时，表单执行引擎会加上便于用户使用的一些特性，比如会根据表单元素在设计界面中的从左到右从上到下的顺序设置各个WinForm控件的焦点属性。生成文本标签时，若文本标签后面的某个数据输入框具有文本链接则将生成的文本标签控件绑定到这个数据输入框上，当用点击文本标签控件时就会设置焦点到该数据输入框，其行为类似HTML文档中的Label元素。  
    生成了WinForm界面并投入运行时，表单引擎会监控用户输入的表单数据，若用户修改了表单数据，则就检查表单文档中的表单元素之间的关联信息列表，根据需要执行表单元素依赖关系和表单元素数值表达式，以达到表单的动态特性。  
用户保存数据时，表单引擎会遍历整个表单WinForm界面的控件收集表单数据，并根据各个表单元素的数据引用属性指定的XPath属性将表单数据填充到一个XML文档中，然后向应用系统提供这个包含数据的XML文档。而应用系统就可以利用这个XML文件进行后续处理，比如保存或更新数据库。  
    由于表单工具生成的表单设计文档是采用XML格式，因此其他非.NET的应用系统可以根据这个XML文档动态加载生成各种类型的WinForm控件，动态生成表单界面，这样就扩大了表单工具在C/S系统中的应用范围。  
  
**Html表单**  
    表单样式设计器虽然采用控件拖拽式的设计用户体验，使用绝对坐标来设置表单元素的位置，但表单引擎仍然可以根据表单文档生成HTML文档。

**HTML排版样式**  
    HTML文档中的表单元素可以使用绝对坐标定位方式，即在元素的style属性中添加”position:absolute ; left:xxx px ; top:xxx px”，这样可以使用绝对坐标方式进行HTML元素的定位。这样可以比较方便的根据表单文档生成HTML文档，但这种简单的处理是不完善的。可能带来以下几个缺点。

1.  使用绝对坐标定位的表单会严重干扰表单工具和应用系统的集成。在应用系统中，表单界面一般是作为应用系统界面的一部分进行显示，应用系统界面上还有很多不属于表单工具的HTML元素，使用绝对坐标定位的表单元素很容易和非表单元素之间相互覆盖，使得应用系统的界面无法使用。
2.  使用绝对坐标定位的HTML表单代码难于修改。在少数情况下，表单工具生成的HTML表单需要手工微调，若采用绝对坐标定位则修改表单元素HTML代码比较困难。
3.  无法实现某些表单页面的动态特效。若表单文档中存在表单元素依赖关系，则一些表单 元素的可用状态依赖其他表单元素的状态。表单工具可以做到一种特效，使得某些元素的可见状态依赖其他表单元素。若采用绝对坐标定义，当某些元素由于依赖关系而导致不可见时，用户界面可能出现大片空白，影响用户界面的美观。

为解决上述问题，表单工具会生成流式排版的HTML表单，生成的HTML代码是很简洁的，没有使用 “position:absolute”来使用绝对定位表单元素。  
    表单文档中使用绝对坐标来定位表单元素，但HTML文档却采用流式排版样式，这两种排版样式是截然不同的，表单工具内部采用特殊的算法将绝对坐标排版方式转化为流式排版样式，并针对IE浏览器进行了优化，然后针对每一个表单元素生成对应的HTML元素。经过测试，这种处理方法生成的HTML文档显示样式和表单的设计样式非常接近。从而解决了绝对坐标方式带来的问题。  
    在表单元素中有一个特殊的表单元素类型，那就是单/复选框按钮组。这种表单元素，包含了若干个单/复选框。在设计时这个表单元素是作为一个整体来编辑的，在生成的WinForm表单中也是作为一个整体创建的。但在输出HTML表单则需要将内部项目拆开分散输出，从而生成若干个<input type=”radio”>或<input type=”checkbox” >，而且这些项目有可能不是连续的输出。

**HTML页面动态效果**  
    HTML表单中也要实现和WinForm表单中一样效果的表单元素依赖关系和数值表达式，这需要依赖JavaScript脚本来实现。因此表单工具在生成HTML表单式需要随之输出维护表单动态效果的JavaScript脚本。  
    一般的可以表单工具可以根据表单文档的元素关系信息列表，针对每一个表单元素，拼凑出一段JavaScript脚本，然后绑定到HTML元素的事件属性中。比如可以在<input type=text>元素的onblur事件添加处理表单式的代码，在<input type=checkbox>元素的onclick 属性中添加处理表单元素依赖关系的代码。这样生成的HTML文档中夹杂着大量的JavaScript脚本。这样可以实现HTML表单的动态特效，但仍有不足。其主要缺点有

1.  大大加大了生成的HTML文档的大小，生成的HTML代码比较臃肿，难于阅读和处理，可能导致应用系统加载大型表单速度缓慢。
2.  在少数情况下，开发人员需要手工修改表单HTML文档来进行微调，若HTML文档中充斥着大量的不成片的JavaScript代码，则阅读和修改HTML文档比较困难。

根据通常的编程规范，不应当大量出现功能相同的程序代码。而表单HTML代码中出现大量的重复相同功能的JavaScript脚本代码，不符合通常的编程规范，这种JavaScript代码维护困难，不利用手工集中修改。  
    为了解决这些问题，应当尽量减少HTML文档中生成的JavaScript脚本。而且将JavaScript脚本要实现的功能提取出来，编写通用的JavaScript脚本并单独保存到一个外部的js文件。这样HTML文档中使用<script src=xxxx >来引用通用的JavaScript脚本。此外还利用HTML文档的不严格的特性，将某些控制信息保存在HTML元素中扩展属性中。  
    在这种思路下，报表工具生成的HTML表单时，在一些HTML元素上追加某些扩展属性，例如使用 idlist 扩展属性来说明指定的编号的元素和该项目进行绑定，表单工具还使用了通用的JavaScript函数来统一实现HTML表单动态效果。这样生成的HTML文档中没有多少JavaScript代码，生成的HTML代码非常简洁，体积小，而且便于阅读和修改；而且由于JavaScript代码集中在一起，因此维护方便。

**浏览器兼容性说明**  
    经过测试，表单工具生成的HTML表单可以在IE6.0中正常运行，能实现自动的表单元素依赖关系以及表单内表达式运算。但在Firefox2.0中，能正常显示表单界面，但没有任何动态特性，无法执行表单元素依赖关系和表单内表达式运算，可能是由于Firefox只支持标准的HTML，不支持扩展属性而导致的。因此建议使用表单工具的客户端浏览器应当为IE6.0或更高版本，若表单中没有定义元素依赖关系或表达式是可以使用其他浏览器。  
    XSLT表单是基于HTML表单的，因此这个浏览器兼容性说明同样适用于XSLT表单。

**XSLT表单**  
表单工具还能生成XSLT表单，这个功能的基础是HTML表单。XSLT表单首先是标准的XSLT文档。表单文档的数据可以保存为XML文档。而使用表单工具生成的XSLT表单，可以利用这个数据XML文档执行XSLT转化，生成用于显示数据的HTML文档。  
比如某个表单，生成的数据XML文档片断为

< XFormValue  Name ="DataBaseDemo2" >   
    < Employees >   
       < Address > 复兴门 245 号 </ Address >   
       < BirthDate > 1968-12-8 </ BirthDate >   
       < City > 北京 </ City >   
    </ Employees >   
 </ XFormValue >

则表单设计时定义了一个文本框，它的数据引用为Employees/Address，则表单工具为这个文本框生成的XSLT片断为

< input  type ="text"   >   
    < xsl:attribute  name ="value" >   
       < xsl:value-of  select ="Employees/Address"   />   
    </ xsl:attribute >   
 </ input >

将这个XML文档片断和XSLT片断进行XSLT转化，则会生成字符串

< input  type =”text”  value =”复兴门  245 号”  >

这个字符串就是标准的HTML代码，这段HTML代码在浏览器中就能显示一个包含数据的文本输入框。  
在应用程序中，将表单数据XML文档和XSLT表单进行XSLT转化，即可生成已经包含数据的HTML页面。这个过程包含的三个技术，XML,XSLT,HTML都是国际标准，是跨语言跨平台的技术，因此表单工具通过HTML表单和XSLT表单为其他的非.NET的B/S系统提供了支持，比如asp，Java，PHP等等。  
    表单工具能针对文本框，单/复选框，单/复选框按钮组，列表框和下拉列表输出XSLT代码。从而构造出非常灵活的XSLT表单。  
    在实际应用中，可以由表单工具事先设计好表单，并生成HTML表单和XSLT表单，保存在应用系统的指定位置，比如某个目录或者数据库中，而应用系统在从指定位置加载HTML表单或XSLT表单，这样就能在应用系统中使用表单工具设计出来的表单。如此这样，基于.NET的表单工具可以和其他使用任何技术（包括asp，Jsp，J2ee，php等等）的B/S系统进行协同工作，将表单工具在B/S系统的中应用范围扩展到最大。  
  
下一篇谈谈表单数据的处理。

[http_www.xdesigner.cn]: http://www.xdesigner.cn/
[rar.bmp]: http://www.xdesigner.cn/icon/rar.bmp
[Link 1]: http://www.xdesigner.cn/yuansform/formdemo.zip