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

馮 鈞，盛震宇，唐志賢

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

0 引 言

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

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

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

1 XML Schema概述

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

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

2 Web界面生成方法

2.1 FDP模型

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

圖1 FDP界面生成模型

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

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

2.2 界面的XML Schema描述

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

（1）界面框架描述

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

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

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

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

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

（3）控件樣式描述

系統(tǒng)框架中定義了界面的結(jié)構(gòu)，所以控件的排列位置就被確定了?？丶臉邮接勺远x屬性styledefine：style定義，該屬性值的基本格式如下：

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

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

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

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

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

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

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

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

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

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

圖2 框架控件生成流程

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

2.4 輸入驗(yàn)證

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

2.5 文檔復(fù)用

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

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

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

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

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

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

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

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

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

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

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

模板023的描述如下：

4 結(jié)束語

本文所提出的基于XML Schema的 Web界面生成方法，以XML Schema作為界面描述語言，根據(jù)FDP模型實(shí)現(xiàn)界面的自動生成，同時提出了相應(yīng)的界面生成算法。本文的這種方法可以較為規(guī)范的描述Web界面，實(shí)現(xiàn)界面的高效生成，解決界面代碼的復(fù)用問題，界面樣式豐富，可擴(kuò)展性強(qiáng)。同時，由于以XML Schema作為界面描述語言，對于用戶通過界面輸入的數(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）.［黃洪，林輝，王奔.一種圖形用戶界面的XML描述方法與工具開發(fā)［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)，萬建成.基于XML的界面自動生成 ［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用戶界面動態(tài)生成工具的設(shè)計與實(shí)現(xiàn) ［J］.河南大學(xué)學(xué)報 （自然科學(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)，侯仁剛，田青華.支持界面自動生成的模型研究 ［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）. ［郭愛平，張立群，羅莉.基于MVC模式的界面自動生成 ［J］.計算機(jī)工程與設(shè)計，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ù)綁定的用戶界面自動生成模型［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)的軟件開發(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ù)模式及存儲映射研究［J］.測繪科學(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ī)系統(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ù)庫中存儲XML文檔 ［J］.計算機(jī)工程與設(shè)計，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）. ［曹靜，樊景博，劉愛軍.基于XML Schema的數(shù)據(jù)庫間信息交換技術(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.