馮 鈞，盛震宇，唐志賢

（河海大學(xué) 計(jì)算機(jī)與信息學(xué)院，江蘇 南京211100）

0 引 言

良好的界面可以提升系統(tǒng)人機(jī)友好性，并使用戶(hù)的操作簡(jiǎn)便舒適。這是因?yàn)椋缑媸怯脩?hù)對(duì)軟件的直觀(guān)感受［1］，它的好壞直接影響到用戶(hù)體驗(yàn)。根據(jù)統(tǒng)計(jì)，在開(kāi)發(fā)一個(gè)軟件的過(guò)程中，界面部分的代碼占總代碼量的一半左右［2］，且系統(tǒng)運(yùn)行中有近一半的時(shí)間在執(zhí)行界面程序。目前，隨著信息化的進(jìn)程，軟件系統(tǒng)規(guī)模繼續(xù)擴(kuò)大，所以界面開(kāi)發(fā)成本也勢(shì)必成倍增加［3］。因此，高效地開(kāi)發(fā)軟件界面成為提高整個(gè)軟件開(kāi)發(fā)效率的關(guān)鍵。

為了解決此類(lèi)問(wèn)題，界面工程設(shè)計(jì)和自動(dòng)生成模型［4］的方法成為軟件開(kāi)發(fā)者關(guān)注的熱點(diǎn)。到目前為止，界面自動(dòng)生成領(lǐng)域已經(jīng)有了一些研究：文獻(xiàn) ［3］采用XML來(lái)描述界面元素，實(shí)現(xiàn)了界面的快速生成；文獻(xiàn) ［5］利用MVC模型各模塊的分離特性來(lái)實(shí)現(xiàn)界面高效生成；文獻(xiàn)［6］使用GUI4J模型實(shí)現(xiàn)了數(shù)據(jù)與界面的綁定。這些文獻(xiàn)所采用的方法都在一定程度上提高了界面的開(kāi)發(fā)速度。但是，它們所提出的界面生成方法不夠具體，缺乏樣式庫(kù)，沒(méi)有很好的將界面生成和輸入驗(yàn)證集成到一起。同時(shí)，如果采用XML描述界面元素，界面描述過(guò)于靈活，缺乏統(tǒng)一的描述標(biāo)準(zhǔn)。

隨著Web技術(shù)的發(fā)展，基于B／S結(jié)構(gòu)設(shè)計(jì)的軟件系統(tǒng)正迅速普及［7］。但是目前并沒(méi)有專(zhuān)門(mén)的 Web系統(tǒng)界面生成方法。本文針對(duì)B／S結(jié)構(gòu)的系統(tǒng)提出了基于XML Schema的Web界面生成方法，以XML Schema作為界面描述語(yǔ)言，以FDP模型作為界面生成框架，并建立了Schema文檔庫(kù)和樣式模板庫(kù)，能夠?qū)崿F(xiàn)界面元素的精確定位和布局，根據(jù)用戶(hù)需求設(shè)計(jì)出完整的數(shù)據(jù)約束關(guān)系，同時(shí)將界面生成與輸入驗(yàn)證集成在一起。

1 XML Schema概述

XML （extensible markup language）是國(guó)際組織 W3C（world wide web consortium）制 定 的 一 種 可 擴(kuò) 展 標(biāo) 記 語(yǔ)言［8］。與HTML類(lèi)似的，XML具有結(jié)構(gòu)明確、語(yǔ)義自定義、平臺(tái)無(wú)關(guān)性等特點(diǎn)［9］，目前成為主流的平臺(tái)交換語(yǔ)言。DTD和XML Schema都是用來(lái)約束和規(guī)范XML文檔的［10］，但是通常認(rèn)為XML Schema很快就會(huì)替代DTD在大多數(shù)的網(wǎng)絡(luò)應(yīng)用程序中被廣泛使用［11］。因?yàn)閄ML Schema針對(duì)將來(lái)的額外內(nèi)容是可擴(kuò)展的，其內(nèi)容比DTD豐富，作用也更大。XML Schema是以XML語(yǔ)言編寫(xiě)而成的，支持?jǐn)?shù)據(jù)類(lèi)型，支持名稱(chēng)空間 （namespaces）等［12］。它可以對(duì)XML數(shù)據(jù)進(jìn)行更好的描述與約束。

鑒于XML Schema的優(yōu)越性，本文以XML Schema作為Web界面描述語(yǔ)言，一方面借用其中的標(biāo)準(zhǔn)格式，形成一套規(guī)范的界面描述方式；另一方面，借助于其可拓展性，在規(guī)范的同時(shí)還可以靈活的修改XML Schema元素，以增強(qiáng)其描述能力。同時(shí)，由于XML Schema具有驗(yàn)證XML文檔的功能，以其作為界面描述語(yǔ)言可以很好的將界面生成及數(shù)據(jù)驗(yàn)證集成起來(lái)。

2 Web界面生成方法

2.1 FDP模型

本文針對(duì)Web界面的生成方法抽象出了FDP模型，F(xiàn)（function）是功能模型，D （data）是數(shù)據(jù)模型，P（presentation）是界面的表示模型。圖1所示的是界面自動(dòng)生成模型的體系結(jié)構(gòu)。

圖1 FDP界面生成模型

圖1中，功能模型來(lái)源于功能需求，主要使用UML類(lèi)圖來(lái)表達(dá)描述，并通過(guò)分析用戶(hù)的界面需求來(lái)確定界面功能、界面框架、界面之間的關(guān)系以及界面與數(shù)據(jù)關(guān)系的需求。功能模型和界面模型共同形成了系統(tǒng)的框架結(jié)構(gòu)。數(shù)據(jù)模型是界面數(shù)據(jù)描述的抽象，它由數(shù)據(jù)流圖來(lái)表達(dá)描述，主要用來(lái)確定界面中的數(shù)據(jù)需求，數(shù)據(jù)之間的關(guān)系以及界面對(duì)數(shù)據(jù)的約束。功能模型和數(shù)據(jù)模型共同形成了系統(tǒng)中的數(shù)據(jù)對(duì)象。界面模型由界面模板表達(dá)描述，主要處理界面元素的可視形式顯示和界面布局問(wèn)題，它需要考慮具體界面表示語(yǔ)言的特征，加以合適的描述。

XML Schema描述文檔將由功能模型、數(shù)據(jù)模型和界面模型共同形成，然后再由界面生成引擎根據(jù)描述文檔生成相應(yīng)的Web界面代碼，并通過(guò)瀏覽器顯示給用戶(hù)。用戶(hù)在得到界面后便可以進(jìn)行輸入，輸入完成后還需要進(jìn)行輸入驗(yàn)證并返回驗(yàn)證結(jié)果。

2.2 界面的XML Schema描述

XML Schema對(duì)界面的描述主要分成3個(gè)部分：界面框架描述、數(shù)據(jù)對(duì)象描述、控件樣式描述。

（1）界面框架描述

XML Schema本身是樹(shù)型結(jié)構(gòu)，所以其結(jié)構(gòu)可以對(duì)界面的框架做很好的詮釋。通常根節(jié)點(diǎn)作為系統(tǒng)的描述性節(jié)點(diǎn)，不與界面信息直接聯(lián)系，里面定義了整個(gè)系統(tǒng)的一些信息。根節(jié)點(diǎn)下面的第一層子節(jié)點(diǎn)用于描述子系統(tǒng)信息，子系統(tǒng)節(jié)點(diǎn)下的第一層子節(jié)點(diǎn)用于描述各個(gè)界面的信息，界面子節(jié)點(diǎn)下的子節(jié)點(diǎn)就用于描述界面信息了。由于XML Schema支持自定義屬性，所以用戶(hù)可以定義一些特殊的界面屬性，增強(qiáng)其可擴(kuò)展性。一個(gè)系統(tǒng)框架描述如下：

xml version屬性描述版本聲明，encoding屬性描述字符編碼格式。＜xs：schema＞標(biāo)簽用來(lái)定義整個(gè)文檔的根元素，根元素里面可以嵌套基本元素的定義、簡(jiǎn)單或復(fù)合類(lèi)型。根元素中xmlns：title屬性描述了文檔的名字，以后可以用于查找；xmlns：keywords屬性描述該文檔的關(guān)鍵詞，便于以后的文檔復(fù)用；xmlns：annotation屬性描述了文檔的一些注釋信息；xmlns：pattern屬性描述了引用模板樣式；xmlns：attitudedefine描述文檔中的自定義屬性。文檔中對(duì)系統(tǒng)、子系統(tǒng)及界面均有名稱(chēng)和關(guān)鍵詞的記錄，可以利用XPath或XQuery等查詢(xún)。

（2）數(shù)據(jù)對(duì)象描述

每個(gè)控件對(duì)應(yīng)一些輸入值，將來(lái)用戶(hù)在界面上的輸入都需要通過(guò)這些控件完成。輸入的數(shù)據(jù)本身是有類(lèi)型及取值限制的，故需要對(duì)這些數(shù)據(jù)對(duì)象加以描述約束。XML Schema中元素的type屬性定義了這些數(shù)據(jù)對(duì)象的數(shù)據(jù)類(lèi)型，基本類(lèi)型包括：字符串型、數(shù)值型、整型、布爾型、日期型等。除此之外還有枚舉類(lèi)型，該類(lèi)型由＜xs：simpleType＞標(biāo)簽定義。如下所示：

＜xs：simpleType＞標(biāo)簽定義了枚舉類(lèi)型數(shù)據(jù)對(duì)象的信息。＜xs：restriction＞標(biāo)簽用來(lái)定義簡(jiǎn)單類(lèi)型值的類(lèi)型，base屬性定義了類(lèi)型，與元素中的type屬性作用相同。＜xs：enumeration＞標(biāo)簽定義了枚舉項(xiàng)，其中的value屬性定義了值，id屬性作為其唯一標(biāo)識(shí)。＜xs：限定＞標(biāo)簽對(duì)簡(jiǎn)單類(lèi)型做了限定，value屬性具體描述了限定形式。除了基本類(lèi)型、枚舉類(lèi)型外，一些復(fù)雜的數(shù)據(jù)類(lèi)型可以由＜xs：complexType＞標(biāo)簽定義，其基本格式與框架定義相似。其中＜xs：sequence＞標(biāo)簽定義了該類(lèi)型中元素出現(xiàn)的順序。

（3）控件樣式描述

系統(tǒng)框架中定義了界面的結(jié)構(gòu)，所以控件的排列位置就被確定了。控件的樣式由自定義屬性styledefine：style定義，該屬性值的基本格式如下：

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

屬性包括控件的長(zhǎng)寬、線(xiàn)框粗細(xì)、背景色、背景圖片等。屬性與值的定義方式與HTML語(yǔ)言中CSS的定義類(lèi)似。除了用樣式屬性定義外，在界面節(jié)點(diǎn)中引入了模板屬性，該屬性的值為模板庫(kù)中的模板編號(hào)，控件的樣式也可以直接用模板中的定義方式來(lái)限定。樣式模板采用XML語(yǔ)言描述，將所有的描述文檔組織起來(lái)就成為了樣式模板庫(kù)。

2.3 XML Schema－to－HTML界面轉(zhuǎn)換

Web界面以HTML語(yǔ)言為載體，嵌入了其它服務(wù)器腳本語(yǔ)言。生成界面的過(guò)程，就是要生成一段描述界面的HTML代碼。本文所提的方法中，控件的樣式主要由樣式模板庫(kù)中的模板決定，所以先根據(jù)XML Schema轉(zhuǎn)換成界面的HTML界面框架和基本控件，再根據(jù)模板庫(kù)的信息修改控件的樣式。

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

圖2描述了界面框架及控件的生成流程：系統(tǒng)首先讀取XML Schema文件，定位到待生成界面的根節(jié)點(diǎn)，然后按照深度優(yōu)先遍歷的順序訪(fǎng)問(wèn)其下每一個(gè)子節(jié)點(diǎn)，根據(jù)子節(jié)點(diǎn)的類(lèi)型映射生成相應(yīng)的控件。在映射生成過(guò)程中，若訪(fǎng)問(wèn)到＜xs：element＞類(lèi)型節(jié)點(diǎn)，則生成輸入框控件；若訪(fǎng)問(wèn)到＜xs：simpleType＞類(lèi)型節(jié)點(diǎn)，則生成列表控件；若訪(fǎng)問(wèn)到＜xs：complexType＞類(lèi)型節(jié)點(diǎn)，則生成表格控件。

其中，對(duì)于輸入框及列表控件而言，由于其輸入數(shù)據(jù)的類(lèi)型較為豐富，為了滿(mǎn)足其形式的需要，在映射過(guò)程中還要根據(jù)節(jié)點(diǎn)的inputtype屬性生成滿(mǎn)足實(shí)際需求的控件。表1列舉了一些inputtype屬性與實(shí)例間的映射關(guān)系。

表1中列舉了部分屬性與控件實(shí)例的映射關(guān)系，這些映射方式是按照目前Web界面的主流設(shè)計(jì)方式設(shè)計(jì)的。如果有特殊需求，可以根據(jù)樣式屬性進(jìn)行調(diào)整。在算法中，針對(duì)inputtype屬性按照表中的實(shí)例生成相應(yīng)的HTML代碼，從而完成界面框架及控件的生成。

（2）控件樣式設(shè)置

當(dāng)界面框架及控件生成后，就需要對(duì)界面和控件的樣式做進(jìn)一步處理，完成其樣式要求。模板庫(kù)中的模板描述了界面元素的樣式屬性，里面分別對(duì)不同控件的不同屬性做了限制，模板由XML語(yǔ)言編寫(xiě)，一份模板定義如下：

圖2 框架控件生成流程

模板中，patten標(biāo)簽下的第一層子元素定義了各種控件的樣式，其中的屬性length、width定義了該控件的長(zhǎng)和寬，align定義了文本對(duì)齊方式。font標(biāo)簽定義了字體的屬性，color定義了字體的顏色，size定義了大小、face定義了字體等。在界面節(jié)點(diǎn)中模板屬性定義了界面中控件的模板編號(hào)，此時(shí)只要按照對(duì)應(yīng)模板中的定義修改控件的樣式即可。為了使界面生成更加靈活，在XML Schema中也加入了style屬性用于直接描述控件的樣式。若既引用了模板，又定義了style屬性，則先按模板樣式設(shè)置各控件的屬性，再按照style屬性單獨(dú)修改某些控件的樣式。

2.4 輸入驗(yàn)證

由于界面是根據(jù)XML Schema生成的，且XML Sche－ma本身具有驗(yàn)證XML文檔的功能，所以對(duì)于界面輸入數(shù)據(jù)的驗(yàn)證就非常方便。本文提出的驗(yàn)證方法具體如下：當(dāng)界面生成后，用戶(hù)在界面上輸入信息，然后由系統(tǒng)根據(jù)生成該界面的XML Schema的格式將用戶(hù)填寫(xiě)的信息封裝成一個(gè)XML文檔。這樣所產(chǎn)生的XML文檔的結(jié)構(gòu)與生成界面的Schema結(jié)構(gòu)一致，可以用XML Schema直接進(jìn)行驗(yàn)證，不需要再編寫(xiě)專(zhuān)門(mén)的驗(yàn)證程序。這樣就方便地實(shí)現(xiàn)了界面生成和數(shù)據(jù)驗(yàn)證的集成。

2.5 文檔復(fù)用

由于軟件系統(tǒng)中很多情況下的代碼是相似甚至相同的，所以復(fù)用技術(shù)一直是軟件開(kāi)發(fā)的關(guān)鍵。這里的復(fù)用當(dāng)然也包括了界面代碼的復(fù)用。XML Schema與XML語(yǔ)言語(yǔ)法相同，所以可以采用XML的查詢(xún)語(yǔ)言XPath、XQuery等，快速的定位相同或相似的代碼段，并將它們提取出來(lái)用于開(kāi)發(fā)。為了實(shí)現(xiàn)XML Schema描述文檔以及樣式模板的復(fù)用，可以將所有的界面描述文檔和樣式模板描述文檔分別組織成XML Schema文檔庫(kù)及樣式模板庫(kù)。當(dāng)開(kāi)發(fā)新系統(tǒng)時(shí)，先根據(jù)需求去相應(yīng)庫(kù)中查詢(xún)，提取有用的文檔或文檔片段，對(duì)它們稍加修改則可以適用于新的系統(tǒng)，大大提高了開(kāi)發(fā)效率。

3 界面生成方法的實(shí)現(xiàn)

3.1 系統(tǒng)實(shí)現(xiàn)

基于XML Schema的軟件界面生成系統(tǒng)主要包括XML Schema管理模塊、XML Schema解析模塊、軟件界面生成模塊、數(shù)據(jù)驗(yàn)證模塊、Schema文檔庫(kù)及界面模板庫(kù)。系統(tǒng)各模塊間的連接方式如圖3所示。

XML Schema管理模塊主要用于管理Schema文檔庫(kù)，對(duì)里面的Schema信息進(jìn)行增刪改查等。本文用XML Schema描述Web界面時(shí)，對(duì)所描述的系統(tǒng)和界面均在描述文檔中記錄了其名稱(chēng)及關(guān)鍵字。查詢(xún)XML Schema時(shí)，系統(tǒng)將會(huì)根據(jù)用戶(hù)輸入的名稱(chēng)或關(guān)鍵字利用XPath或XQuery查詢(xún)語(yǔ)句進(jìn)行查詢(xún)。

圖3 界面生成系統(tǒng)

XML Schema解析模塊負(fù)責(zé)將Schema管理模塊傳來(lái)的XML Schema文檔解析，根據(jù)其框架結(jié)構(gòu)生成界面的框架及控件，生成過(guò)程與本文前面所講方法一致。當(dāng)Schema文檔解析完畢后，將所生成的HTML代碼傳至軟件界面生成模塊。

軟件界面生成模塊根據(jù)XML Schema中的樣式信息到樣式模板庫(kù)中提取相應(yīng)的模板，對(duì)HTML代碼進(jìn)行完善，最終生成完整的Web界面 （界面代碼）。軟件界面生成模塊同時(shí)負(fù)責(zé)管理樣式模板庫(kù)并通過(guò)瀏覽器解析界面代碼顯示在屏幕上，由用戶(hù)進(jìn)行輸入，最后將輸入信息連同界面信息一起傳至數(shù)據(jù)驗(yàn)證模塊。

數(shù)據(jù)驗(yàn)證模塊將界面的填寫(xiě)信息根據(jù)其XML Schema的結(jié)構(gòu)生成一份XML文檔并驗(yàn)證，將驗(yàn)證結(jié)果顯示在界面上，返回給用戶(hù)。

3.2 運(yùn)行實(shí)例

本文所述方法的一個(gè)界面生成實(shí)例如圖4所示，輸入驗(yàn)證實(shí)例如圖5所示。

圖4 界面生成實(shí)例

圖5 界面驗(yàn)證實(shí)例

生成界面所對(duì)應(yīng)的XML Schema片段如下：

模板023的描述如下：

4 結(jié)束語(yǔ)

本文所提出的基于XML Schema的 Web界面生成方法，以XML Schema作為界面描述語(yǔ)言，根據(jù)FDP模型實(shí)現(xiàn)界面的自動(dòng)生成，同時(shí)提出了相應(yīng)的界面生成算法。本文的這種方法可以較為規(guī)范的描述Web界面，實(shí)現(xiàn)界面的高效生成，解決界面代碼的復(fù)用問(wèn)題，界面樣式豐富，可擴(kuò)展性強(qiáng)。同時(shí)，由于以XML Schema作為界面描述語(yǔ)言，對(duì)于用戶(hù)通過(guò)界面輸入的數(shù)據(jù)也可以方便的進(jìn)行驗(yàn)證。下一步的研究工作將是把Web服務(wù)組合技術(shù)引入到本文所提出的方法中，提供適當(dāng)?shù)慕涌诮o其它系統(tǒng)，實(shí)現(xiàn)界面生成技術(shù)的共享。

［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）.［黃洪，林輝，王奔.一種圖形用戶(hù)界面的XML描述方法與工具開(kāi)發(fā)［J］.計(jì)算機(jī)應(yīng)用與軟件，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）. ［馮文堂，胡強(qiáng)，萬(wàn)建成.基于XML的界面自動(dòng)生成 ［J］.計(jì)算機(jī)應(yīng)用研究，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）. ［侯彥娥，黨蘭學(xué)，魏丹.Web用戶(hù)界面動(dòng)態(tài)生成工具的設(shè)計(jì)與實(shí)現(xiàn) ［J］.河南大學(xué)學(xué)報(bào) （自然科學(xué)版），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）. ［楊鶴標(biāo)，侯仁剛，田青華.支持界面自動(dòng)生成的模型研究 ［J］.計(jì)算機(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）. ［郭愛(ài)平，張立群，羅莉.基于MVC模式的界面自動(dòng)生成 ［J］.計(jì)算機(jī)工程與設(shè)計(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ǐn)?shù)據(jù)綁定的用戶(hù)界面自動(dòng)生成模型［J］.計(jì)算機(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結(jié)構(gòu)的軟件開(kāi)發(fā)技術(shù)［M］.西安電子科技大學(xué)出版社，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的地理信息元數(shù)據(jù)模式及存儲(chǔ)映射研究［J］.測(cè)繪科學(xué)，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結(jié)構(gòu)完整性約束 ［J］.小型微型計(jì)算機(jī)系統(tǒng)，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）.［張艷，翟學(xué)明，胡華威.基于DTD在關(guān)系型數(shù)據(jù)庫(kù)中存儲(chǔ)XML文檔 ［J］.計(jì)算機(jī)工程與設(shè)計(jì)，2008，29（19）：5073－5076.］

［11］CAO Jing，F(xiàn)AN Jingbo，LIU Aijun.Data exchange between heterogeneous databases based on XML schema ［J］.Science Technology and Engineering，2010，10 （24）：6060－6062 （in Chinese）. ［曹靜，樊景博，劉愛(ài)軍.基于XML Schema的數(shù)據(jù)庫(kù)間信息交換技術(shù) ［J］.科學(xué)技術(shù)與工程，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.