基于XML Schema的Web界面生成方法

冯 钧，盛震宇，唐志贤

（河海大学 计算机与信息学院，江苏 南京211100）

0 引 言

良好的界面可以提升系统人机友好性，并使用户的操作简便舒适。这是因为，界面是用户对软件的直观感受［1］，它的好坏直接影响到用户体验。根据统计，在开发一个软件的过程中，界面部分的代码占总代码量的一半左右［2］，且系统运行中有近一半的时间在执行界面程序。目前，随着信息化的进程，软件系统规模继续扩大，所以界面开发成本也势必成倍增加［3］。因此，高效地开发软件界面成为提高整个软件开发效率的关键。

为了解决此类问题，界面工程设计和自动生成模型［4］的方法成为软件开发者关注的热点。到目前为止，界面自动生成领域已经有了一些研究：文献 ［3］采用XML来描述界面元素，实现了界面的快速生成；文献 ［5］利用MVC模型各模块的分离特性来实现界面高效生成；文献［6］使用GUI4J模型实现了数据与界面的绑定。这些文献所采用的方法都在一定程度上提高了界面的开发速度。但是，它们所提出的界面生成方法不够具体，缺乏样式库，没有很好的将界面生成和输入验证集成到一起。同时，如果采用XML描述界面元素，界面描述过于灵活，缺乏统一的描述标准。

随着Web技术的发展，基于B／S结构设计的软件系统正迅速普及［7］。但是目前并没有专门的 Web系统界面生成方法。本文针对B／S结构的系统提出了基于XML Schema的Web界面生成方法，以XML Schema作为界面描述语言，以FDP模型作为界面生成框架，并建立了Schema文档库和样式模板库，能够实现界面元素的精确定位和布局，根据用户需求设计出完整的数据约束关系，同时将界面生成与输入验证集成在一起。

1 XML Schema概述

XML （extensible markup language）是国际组织 W3C（world wide web consortium）制 定 的 一 种 可 扩 展 标 记 语言［8］。与HTML类似的，XML具有结构明确、语义自定义、平台无关性等特点［9］，目前成为主流的平台交换语言。DTD和XML Schema都是用来约束和规范XML文档的［10］，但是通常认为XML Schema很快就会替代DTD在大多数的网络应用程序中被广泛使用［11］。因为XML Schema针对将来的额外内容是可扩展的，其内容比DTD丰富，作用也更大。XML Schema是以XML语言编写而成的，支持数据类型，支持名称空间 （namespaces）等［12］。它可以对XML数据进行更好的描述与约束。

鉴于XML Schema的优越性，本文以XML Schema作为Web界面描述语言，一方面借用其中的标准格式，形成一套规范的界面描述方式；另一方面，借助于其可拓展性，在规范的同时还可以灵活的修改XML Schema元素，以增强其描述能力。同时，由于XML Schema具有验证XML文档的功能，以其作为界面描述语言可以很好的将界面生成及数据验证集成起来。

2 Web界面生成方法

2.1 FDP模型

本文针对Web界面的生成方法抽象出了FDP模型，F（function）是功能模型，D （data）是数据模型，P（presentation）是界面的表示模型。图1所示的是界面自动生成模型的体系结构。

图1 FDP界面生成模型

图1中，功能模型来源于功能需求，主要使用UML类图来表达描述，并通过分析用户的界面需求来确定界面功能、界面框架、界面之间的关系以及界面与数据关系的需求。功能模型和界面模型共同形成了系统的框架结构。数据模型是界面数据描述的抽象，它由数据流图来表达描述，主要用来确定界面中的数据需求，数据之间的关系以及界面对数据的约束。功能模型和数据模型共同形成了系统中的数据对象。界面模型由界面模板表达描述，主要处理界面元素的可视形式显示和界面布局问题，它需要考虑具体界面表示语言的特征，加以合适的描述。

XML Schema描述文档将由功能模型、数据模型和界面模型共同形成，然后再由界面生成引擎根据描述文档生成相应的Web界面代码，并通过浏览器显示给用户。用户在得到界面后便可以进行输入，输入完成后还需要进行输入验证并返回验证结果。

2.2 界面的XML Schema描述

XML Schema对界面的描述主要分成3个部分：界面框架描述、数据对象描述、控件样式描述。

（1）界面框架描述

XML Schema本身是树型结构，所以其结构可以对界面的框架做很好的诠释。通常根节点作为系统的描述性节点，不与界面信息直接联系，里面定义了整个系统的一些信息。根节点下面的第一层子节点用于描述子系统信息，子系统节点下的第一层子节点用于描述各个界面的信息，界面子节点下的子节点就用于描述界面信息了。由于XML Schema支持自定义属性，所以用户可以定义一些特殊的界面属性，增强其可扩展性。一个系统框架描述如下：

xml version属性描述版本声明，encoding属性描述字符编码格式。＜xs：schema＞标签用来定义整个文档的根元素，根元素里面可以嵌套基本元素的定义、简单或复合类型。根元素中xmlns：title属性描述了文档的名字，以后可以用于查找；xmlns：keywords属性描述该文档的关键词，便于以后的文档复用；xmlns：annotation属性描述了文档的一些注释信息；xmlns：pattern属性描述了引用模板样式；xmlns：attitudedefine描述文档中的自定义属性。文档中对系统、子系统及界面均有名称和关键词的记录，可以利用XPath或XQuery等查询。

（2）数据对象描述

每个控件对应一些输入值，将来用户在界面上的输入都需要通过这些控件完成。输入的数据本身是有类型及取值限制的，故需要对这些数据对象加以描述约束。XML Schema中元素的type属性定义了这些数据对象的数据类型，基本类型包括：字符串型、数值型、整型、布尔型、日期型等。除此之外还有枚举类型，该类型由＜xs：simpleType＞标签定义。如下所示：

＜xs：simpleType＞标签定义了枚举类型数据对象的信息。＜xs：restriction＞标签用来定义简单类型值的类型，base属性定义了类型，与元素中的type属性作用相同。＜xs：enumeration＞标签定义了枚举项，其中的value属性定义了值，id属性作为其唯一标识。＜xs：限定＞标签对简单类型做了限定，value属性具体描述了限定形式。除了基本类型、枚举类型外，一些复杂的数据类型可以由＜xs：complexType＞标签定义，其基本格式与框架定义相似。其中＜xs：sequence＞标签定义了该类型中元素出现的顺序。

（3）控件样式描述

系统框架中定义了界面的结构，所以控件的排列位置就被确定了。控件的样式由自定义属性styledefine：style定义，该属性值的基本格式如下：

styledefine：style＝”属性：值，属性：值，属性：值……”

属性包括控件的长宽、线框粗细、背景色、背景图片等。属性与值的定义方式与HTML语言中CSS的定义类似。除了用样式属性定义外，在界面节点中引入了模板属性，该属性的值为模板库中的模板编号，控件的样式也可以直接用模板中的定义方式来限定。样式模板采用XML语言描述，将所有的描述文档组织起来就成为了样式模板库。

2.3 XML Schema－to－HTML界面转换

Web界面以HTML语言为载体，嵌入了其它服务器脚本语言。生成界面的过程，就是要生成一段描述界面的HTML代码。本文所提的方法中，控件的样式主要由样式模板库中的模板决定，所以先根据XML Schema转换成界面的HTML界面框架和基本控件，再根据模板库的信息修改控件的样式。

（1）界面框架及控件的生成流程

图2描述了界面框架及控件的生成流程：系统首先读取XML Schema文件，定位到待生成界面的根节点，然后按照深度优先遍历的顺序访问其下每一个子节点，根据子节点的类型映射生成相应的控件。在映射生成过程中，若访问到＜xs：element＞类型节点，则生成输入框控件；若访问到＜xs：simpleType＞类型节点，则生成列表控件；若访问到＜xs：complexType＞类型节点，则生成表格控件。

其中，对于输入框及列表控件而言，由于其输入数据的类型较为丰富，为了满足其形式的需要，在映射过程中还要根据节点的inputtype属性生成满足实际需求的控件。表1列举了一些inputtype属性与实例间的映射关系。

表1中列举了部分属性与控件实例的映射关系，这些映射方式是按照目前Web界面的主流设计方式设计的。如果有特殊需求，可以根据样式属性进行调整。在算法中，针对inputtype属性按照表中的实例生成相应的HTML代码，从而完成界面框架及控件的生成。

（2）控件样式设置

当界面框架及控件生成后，就需要对界面和控件的样式做进一步处理，完成其样式要求。模板库中的模板描述了界面元素的样式属性，里面分别对不同控件的不同属性做了限制，模板由XML语言编写，一份模板定义如下：

图2 框架控件生成流程

模板中，patten标签下的第一层子元素定义了各种控件的样式，其中的属性length、width定义了该控件的长和宽，align定义了文本对齐方式。font标签定义了字体的属性，color定义了字体的颜色，size定义了大小、face定义了字体等。在界面节点中模板属性定义了界面中控件的模板编号，此时只要按照对应模板中的定义修改控件的样式即可。为了使界面生成更加灵活，在XML Schema中也加入了style属性用于直接描述控件的样式。若既引用了模板，又定义了style属性，则先按模板样式设置各控件的属性，再按照style属性单独修改某些控件的样式。

2.4 输入验证

由于界面是根据XML Schema生成的，且XML Sche－ma本身具有验证XML文档的功能，所以对于界面输入数据的验证就非常方便。本文提出的验证方法具体如下：当界面生成后，用户在界面上输入信息，然后由系统根据生成该界面的XML Schema的格式将用户填写的信息封装成一个XML文档。这样所产生的XML文档的结构与生成界面的Schema结构一致，可以用XML Schema直接进行验证，不需要再编写专门的验证程序。这样就方便地实现了界面生成和数据验证的集成。

2.5 文档复用

由于软件系统中很多情况下的代码是相似甚至相同的，所以复用技术一直是软件开发的关键。这里的复用当然也包括了界面代码的复用。XML Schema与XML语言语法相同，所以可以采用XML的查询语言XPath、XQuery等，快速的定位相同或相似的代码段，并将它们提取出来用于开发。为了实现XML Schema描述文档以及样式模板的复用，可以将所有的界面描述文档和样式模板描述文档分别组织成XML Schema文档库及样式模板库。当开发新系统时，先根据需求去相应库中查询，提取有用的文档或文档片段，对它们稍加修改则可以适用于新的系统，大大提高了开发效率。

3 界面生成方法的实现

3.1 系统实现

基于XML Schema的软件界面生成系统主要包括XML Schema管理模块、XML Schema解析模块、软件界面生成模块、数据验证模块、Schema文档库及界面模板库。系统各模块间的连接方式如图3所示。

XML Schema管理模块主要用于管理Schema文档库，对里面的Schema信息进行增删改查等。本文用XML Schema描述Web界面时，对所描述的系统和界面均在描述文档中记录了其名称及关键字。查询XML Schema时，系统将会根据用户输入的名称或关键字利用XPath或XQuery查询语句进行查询。

图3 界面生成系统

XML Schema解析模块负责将Schema管理模块传来的XML Schema文档解析，根据其框架结构生成界面的框架及控件，生成过程与本文前面所讲方法一致。当Schema文档解析完毕后，将所生成的HTML代码传至软件界面生成模块。

软件界面生成模块根据XML Schema中的样式信息到样式模板库中提取相应的模板，对HTML代码进行完善，最终生成完整的Web界面 （界面代码）。软件界面生成模块同时负责管理样式模板库并通过浏览器解析界面代码显示在屏幕上，由用户进行输入，最后将输入信息连同界面信息一起传至数据验证模块。

数据验证模块将界面的填写信息根据其XML Schema的结构生成一份XML文档并验证，将验证结果显示在界面上，返回给用户。

3.2 运行实例

本文所述方法的一个界面生成实例如图4所示，输入验证实例如图5所示。

图4 界面生成实例

图5 界面验证实例

生成界面所对应的XML Schema片段如下：

模板023的描述如下：

4 结束语

本文所提出的基于XML Schema的 Web界面生成方法，以XML Schema作为界面描述语言，根据FDP模型实现界面的自动生成，同时提出了相应的界面生成算法。本文的这种方法可以较为规范的描述Web界面，实现界面的高效生成，解决界面代码的复用问题，界面样式丰富，可扩展性强。同时，由于以XML Schema作为界面描述语言，对于用户通过界面输入的数据也可以方便的进行验证。下一步的研究工作将是把Web服务组合技术引入到本文所提出的方法中，提供适当的接口给其它系统，实现界面生成技术的共享。

［1］HUANG Hong，LIN Hui，WANG Ben.A GUI XML description method and tool development ［J］.Computer Applications and Software，2011，28 （10）：198－202 （in Chinese）.［黄洪，林辉，王奔.一种图形用户界面的XML描述方法与工具开发［J］.计算机应用与软件，2011，28 （10）：198－202.］

［2］FENG Wentang，HU Qiang，WANG Jiancheng.XML－based interface automatic generation ［J］.Application Research of Computers，2006，23 （9）：75－77 （in Chinese）. ［冯文堂，胡强，万建成.基于XML的界面自动生成 ［J］.计算机应用研究，2006，23 （9）：75－77.］

［3］HOU Yan’e，DANG Lanxue，WEI Dan.Design and imple－mentation of web user interface automatic generation tool ［J］.Journal of Henan University （Natural Science），2011，41（6）：641－644 （in Chinese）. ［侯彦娥，党兰学，魏丹.Web用户界面动态生成工具的设计与实现 ［J］.河南大学学报 （自然科学版），2011，41 （6）：641－644.］

［4］YANG Hebiao，HOU Rengang，TIAN Qinghua.Research on model supporting interface automatic generation ［J］.Computer Engineering，2010，36 （3）：79－82 （in Chinese）. ［杨鹤标，侯仁刚，田青华.支持界面自动生成的模型研究 ［J］.计算机工程，2010，36 （3）：79－82.］

［5］GUO Aiping，ZHANG Liqun，LUO Li.Interface automatic generation based on MVC model ［J］.Computer Engineering and Design，2007，28 （19）：4793－4795 （in Chinese）. ［郭爱平，张立群，罗莉.基于MVC模式的界面自动生成 ［J］.计算机工程与设计，2007，28 （19）：4793－4795.］

［6］ZHU Yonghua，WU Junjie，ZHANG Qian.Data－binding－supported model of user interface automatic generation ［J］.Computer Engineering，2011，37 （23）：52－53 （in Chinese）. ［朱永华，吴俊杰，张倩.支持数据绑定的用户界面自动生成模型［J］.计算机工程，2011，37 （23）：52－53.］

［7］REN Taiming.Software development technology based on B／S structure ［M］.Xidian University Publishing House，2006：2－4 （in Chinese）. ［任泰明.基于B／S结构的软件开发技术［M］.西安电子科技大学出版社，2006：2－4.］

［8］ZHANG Tao，YU Xueqin，WEI Shuangfeng.Research on the geographic information metadata model and storage mapping based on XML schema ［J］.Science of Surveying and Mapping，2007，32 （4）：113－115 （in Chinese）. ［张涛，于雪芹，危双丰.基于XML Schema的地理信息元数据模式及存储映射研究［J］.测绘科学，2007，32 （4）：113－115.］

［9］ZHANG Jianmei，TAO Shiqun.Structural integrity constraints for XML under DTD schema ［J］.Journal of Chinese Compu－ter Systems，2009，30 （11）：2233－2237 （in Chinese）.［张剑妹，陶世群.DTD模式下的XML结构完整性约束 ［J］.小型微型计算机系统，2009，30 （11）：2233－2237.］

［10］ZHANG Yan，ZHAI Xueming，HU Huawei.Storing XML documents in relational database based on DTD ［J］.Computer Engineering and Design，2008，29 （19）：5073－5076 （in Chinese）.［张艳，翟学明，胡华威.基于DTD在关系型数据库中存储XML文档 ［J］.计算机工程与设计，2008，29（19）：5073－5076.］

［11］CAO Jing，FAN Jingbo，LIU Aijun.Data exchange between heterogeneous databases based on XML schema ［J］.Science Technology and Engineering，2010，10 （24）：6060－6062 （in Chinese）. ［曹静，樊景博，刘爱军.基于XML Schema的数据库间信息交换技术 ［J］.科学技术与工程，2010，10 （24）：6060－6062.］

［12］Md Sumon Shahriar，Jixue L.On Defining Keys for XML［J］.Journal of the ACM，2010，5 （14）：7－14.