馮 鈞,盛震宇,唐志賢
(河海大學(xué) 計(jì)算機(jī)與信息學(xué)院,江蘇 南京211100)
良好的界面可以提升系統(tǒng)人機(jī)友好性,并使用戶的操作簡便舒適。這是因?yàn)?,界面是用戶對軟件的直觀感受[1],它的好壞直接影響到用戶體驗(yàn)。根據(jù)統(tǒng)計(jì),在開發(fā)一個(gè)軟件的過程中,界面部分的代碼占總代碼量的一半左右[2],且系統(tǒng)運(yùn)行中有近一半的時(shí)間在執(zhí)行界面程序。目前,隨著信息化的進(jìn)程,軟件系統(tǒng)規(guī)模繼續(xù)擴(kuò)大,所以界面開發(fā)成本也勢必成倍增加[3]。因此,高效地開發(fā)軟件界面成為提高整個(gè)軟件開發(fā)效率的關(guān)鍵。
為了解決此類問題,界面工程設(shè)計(jì)和自動生成模型[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)證集成到一起。同時(shí),如果采用XML描述界面元素,界面描述過于靈活,缺乏統(tǒng)一的描述標(biāo)準(zhǔn)。
隨著Web技術(shù)的發(fā)展,基于B/S結(jié)構(gòu)設(shè)計(jì)的軟件系統(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è)計(jì)出完整的數(shù)據(jù)約束關(guān)系,同時(shí)將界面生成與輸入驗(yàn)證集成在一起。
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ī)范的同時(shí)還可以靈活的修改XML Schema元素,以增強(qiáng)其描述能力。同時(shí),由于XML Schema具有驗(yàn)證XML文檔的功能,以其作為界面描述語言可以很好的將界面生成及數(shù)據(jù)驗(yàn)證集成起來。
本文針對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é)果。
XML Schema對界面的描述主要分成3個(gè)部分:界面框架描述、數(shù)據(jù)對象描述、控件樣式描述。
(1)界面框架描述
XML Schema本身是樹型結(jié)構(gòu),所以其結(jié)構(gòu)可以對界面的框架做很好的詮釋。通常根節(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支持自定義屬性,所以用戶可以定義一些特殊的界面屬性,增強(qiáng)其可擴(kuò)展性。一個(gè)系統(tǒng)框架描述如下:
xml version屬性描述版本聲明,encoding屬性描述字符編碼格式。<xs:schema>標(biāo)簽用來定義整個(gè)文檔的根元素,根元素里面可以嵌套基本元素的定義、簡單或復(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ù)對象描述
每個(gè)控件對應(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語言描述,將所有的描述文檔組織起來就成為了樣式模板庫。
Web界面以HTML語言為載體,嵌入了其它服務(wù)器腳本語言。生成界面的過程,就是要生成一段描述界面的HTML代碼。本文所提的方法中,控件的樣式主要由樣式模板庫中的模板決定,所以先根據(jù)XML Schema轉(zhuǎn)換成界面的HTML界面框架和基本控件,再根據(jù)模板庫的信息修改控件的樣式。
(1)界面框架及控件的生成流程
圖2描述了界面框架及控件的生成流程:系統(tǒng)首先讀取XML Schema文件,定位到待生成界面的根節(jié)點(diǎn),然后按照深度優(yōu)先遍歷的順序訪問其下每一個(gè)子節(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è)計(jì)方式設(shè)計(jì)的。如果有特殊需求,可以根據(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)中模板屬性定義了界面中控件的模板編號,此時(shí)只要按照對應(yīng)模板中的定義修改控件的樣式即可。為了使界面生成更加靈活,在XML Schema中也加入了style屬性用于直接描述控件的樣式。若既引用了模板,又定義了style屬性,則先按模板樣式設(shè)置各控件的屬性,再按照style屬性單獨(dú)修改某些控件的樣式。
由于界面是根據(jù)XML Schema生成的,且XML Sche-ma本身具有驗(yàn)證XML文檔的功能,所以對于界面輸入數(shù)據(jù)的驗(yàn)證就非常方便。本文提出的驗(yàn)證方法具體如下:當(dāng)界面生成后,用戶在界面上輸入信息,然后由系統(tǒng)根據(jù)生成該界面的XML Schema的格式將用戶填寫的信息封裝成一個(gè)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)證的集成。
由于軟件系統(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)時(shí),先根據(jù)需求去相應(yīng)庫中查詢,提取有用的文檔或文檔片段,對它們稍加修改則可以適用于新的系統(tǒng),大大提高了開發(fā)效率。
基于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界面時(shí),對所描述的系統(tǒng)和界面均在描述文檔中記錄了其名稱及關(guān)鍵字。查詢XML Schema時(shí),系統(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界面 (界面代碼)。軟件界面生成模塊同時(shí)負(fù)責(zé)管理樣式模板庫并通過瀏覽器解析界面代碼顯示在屏幕上,由用戶進(jìn)行輸入,最后將輸入信息連同界面信息一起傳至數(shù)據(jù)驗(yàn)證模塊。
數(shù)據(jù)驗(yàn)證模塊將界面的填寫信息根據(jù)其XML Schema的結(jié)構(gòu)生成一份XML文檔并驗(yàn)證,將驗(yàn)證結(jié)果顯示在界面上,返回給用戶。
本文所述方法的一個(gè)界面生成實(shí)例如圖4所示,輸入驗(yàn)證實(shí)例如圖5所示。
圖4 界面生成實(shí)例
圖5 界面驗(yàn)證實(shí)例
生成界面所對應(yīng)的XML Schema片段如下:
模板023的描述如下:
本文所提出的基于XML Schema的 Web界面生成方法,以XML Schema作為界面描述語言,根據(jù)FDP模型實(shí)現(xiàn)界面的自動生成,同時(shí)提出了相應(yīng)的界面生成算法。本文的這種方法可以較為規(guī)范的描述Web界面,實(shí)現(xiàn)界面的高效生成,解決界面代碼的復(fù)用問題,界面樣式豐富,可擴(kuò)展性強(qiáng)。同時(shí),由于以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ì)算機(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ì)算機(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è)計(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),侯仁剛,田青華.支持界面自動生成的模型研究 [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). [郭愛平,張立群,羅莉.基于MVC模式的界面自動生成 [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ù)綁定的用戶界面自動生成模型[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ì)算機(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ì)算機(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). [曹靜,樊景博,劉愛軍.基于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.