基于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.