Web界面模型的設(shè)計(jì)與實(shí)現(xiàn)

周紅志,張寶玉

（阜陽(yáng)師范學(xué)院 信息工程學(xué)院，安徽 阜陽(yáng) 236041）

Web界面模型的設(shè)計(jì)與實(shí)現(xiàn)

周紅志,張寶玉

（阜陽(yáng)師范學(xué)院 信息工程學(xué)院，安徽 阜陽(yáng) 236041）

目前MVC模式已經(jīng)成為Web應(yīng)用系統(tǒng)的架構(gòu)主流，針對(duì)MVC模式中的表示層，提出一種分層的Web界面模型.該模型主要是對(duì)MVC模式中的表示層再進(jìn)行分層，把界面元素結(jié)構(gòu)、界面元素的表示和行為分層設(shè)計(jì)；采用XML標(biāo)簽方式來(lái)描述界面構(gòu)件，用界面構(gòu)件來(lái)表現(xiàn)界面元素，在表示層采用CSS和數(shù)據(jù)庫(kù)結(jié)合的方式存儲(chǔ)數(shù)據(jù)，在行為層采用JavaScrip技術(shù)和DOM技術(shù)相結(jié)合實(shí)現(xiàn)系統(tǒng)與用戶的交互.結(jié)果表明，這種設(shè)計(jì)思想能很好的實(shí)現(xiàn)界面描述、數(shù)據(jù)和事件的分離.

MVC；Web界面模型；分層

1 引言

在傳統(tǒng)的Web界面中，瀏覽器中看到的網(wǎng)頁(yè)，是由結(jié)構(gòu)、表示和行為這三層信息構(gòu)成的一個(gè)共同體，所以在大多數(shù)的Web應(yīng)用系統(tǒng)中，呈現(xiàn)給用戶的界面都是一樣的.隨著網(wǎng)絡(luò)的廣泛應(yīng)用，Web應(yīng)用系統(tǒng)使用面越來(lái)越大，使用者也越來(lái)越多，用戶會(huì)對(duì)系統(tǒng)提出諸多的要求，用戶由于職責(zé)和工作領(lǐng)域不同也會(huì)提出一些個(gè)性化的服務(wù)，需要的界面也就不同.目前，MVC技術(shù)被用于許多的web框架模型中，較好地解決了模型中存在的交叉問(wèn)題，有效地改變網(wǎng)頁(yè)的基本模式存在的業(yè)務(wù)邏輯和表現(xiàn)難以分離的情況.本文提出的一種通用的分層設(shè)計(jì)方案，解決了現(xiàn)實(shí)開發(fā)中Web界面表示數(shù)據(jù)和界面元素緊密耦合的現(xiàn)象.

2 Web界面模型

2.1 Web界面模型的可定制性

Web界面模型的可定制是為了滿足用戶對(duì)界面的個(gè)性化需求，按照業(yè)務(wù)流程模式進(jìn)行設(shè)計(jì)的界面模型[1].將窗體的結(jié)構(gòu)、表示和行為分離開來(lái)是模型的描述采用的主要結(jié)構(gòu)思想.結(jié)構(gòu)層描述界面的各個(gè)元素及其屬性的集合，包括控制管理和合法性檢查等，表示層描述界面元素的表示，即采用何種控制部件和響應(yīng)何種事件，行為層是界面元素對(duì)事件做出的反應(yīng)，即用戶通過(guò)對(duì)界面元素的操作改變表示層信息.Web界面模型如圖1所示：

2.1.1 Web界面模型結(jié)構(gòu)層

結(jié)構(gòu)層為Web界面模型的信息層，用于對(duì)具體的用戶界面組件的描述.例如：對(duì)下拉框組件定義其屬性，綁定具體的數(shù)據(jù).這種分層可以實(shí)現(xiàn)界面顯示的設(shè)備獨(dú)立性，因?yàn)椴煌脑O(shè)備可以定義不同的顯示樣式，在不改變內(nèi)容的情況下，同樣的界面元素可以在不同的設(shè)備中顯示.

圖1 Web界面模型結(jié)構(gòu)圖

2.1.2 Web界面模型表示層

Web界面模型表示層是給顯示信息的提供一個(gè)層次.表示層提供結(jié)構(gòu)層界面元素的顯示風(fēng)格，對(duì)每一個(gè)界面元素定義顯示樣式，而且也為不同的顯示設(shè)備和軟件的形式，提供不同的顯示方式.例如，對(duì)一個(gè)從Web界面，可以分別定義其在PC瀏覽器、手機(jī)、PDA等中的顯示樣式.

2.1.3 Web界面模型行為層

Web界面模型行為層負(fù)責(zé)定義用戶界面的事件，即界面應(yīng)如何應(yīng)對(duì)事件.用戶在操作Web界面時(shí)會(huì)產(chǎn)生一些事件，比如右擊事件、單擊事件、雙擊事件等.傳統(tǒng)的Web界面技術(shù)通常采用的是數(shù)據(jù)同步的交互方式.比如：用戶點(diǎn)擊頁(yè)面上的按鈕，觸發(fā)的請(qǐng)求被提交到Web服務(wù)器，Web服務(wù)器接收請(qǐng)求后，與數(shù)據(jù)庫(kù)服務(wù)器交換數(shù)據(jù)，再將交換過(guò)后的數(shù)據(jù)或頁(yè)面返回給用戶.用戶從發(fā)出請(qǐng)求到得到響應(yīng)這段時(shí)間中，瀏覽器大多處于等待的狀態(tài)，造成了資源的浪費(fèi).而Ajax技術(shù)為用戶的請(qǐng)求提供相當(dāng)大的靈活性，相當(dāng)于在客戶端和服務(wù)器間增加了一個(gè)引擎，用戶操作與服務(wù)器就能實(shí)現(xiàn)異步刷新，增強(qiáng)界面的交互性[9].利用這種技術(shù)，在可定制的Web界面中，隨著用戶事件的改變，界面元素可以重新布局，且行為層可以改變表示的層數(shù)據(jù)，并能實(shí)時(shí)刷新瀏覽器界面內(nèi)容.

2.2 WEB界面模型設(shè)計(jì)

界面模型主要由界面元素，數(shù)據(jù)和事件組成[5].

數(shù)據(jù)主要包括界面表示數(shù)據(jù)和業(yè)務(wù)數(shù)據(jù)等，其來(lái)源比較廣泛，有關(guān)系數(shù)據(jù)庫(kù)，XML數(shù)據(jù)，CSS文件等.因此需要一個(gè)統(tǒng)一的數(shù)據(jù)網(wǎng)關(guān)來(lái)處理.事件包括業(yè)務(wù)事件和界面控制事件，由一個(gè)統(tǒng)一的控制器來(lái)處理.

2.2.1 數(shù)據(jù)網(wǎng)關(guān)

數(shù)據(jù)網(wǎng)關(guān)是基于服務(wù)的數(shù)據(jù)交換中間件，為異構(gòu)系統(tǒng)之間的數(shù)據(jù)整合提供數(shù)據(jù)服務(wù)，能按照一定的格式表示數(shù)據(jù)類型、屬性、操作、參數(shù)等.來(lái)自不同的關(guān)系數(shù)據(jù)庫(kù)、XML數(shù)據(jù)和應(yīng)用程序的中間結(jié)果等各類異構(gòu)數(shù)據(jù)，可以使用相同的方式來(lái)訪問(wèn)和更新.表示層界面元素的顯示需要表示數(shù)據(jù)，界面元素的業(yè)務(wù)內(nèi)容需要業(yè)務(wù)數(shù)據(jù)，它們都可以通過(guò)統(tǒng)一的數(shù)據(jù)網(wǎng)關(guān)存取底層數(shù)據(jù)，而不必關(guān)心數(shù)據(jù)的位置.

2.2.2 控制器

控制器負(fù)責(zé)處理用戶輸入事件，例如點(diǎn)擊鼠標(biāo)和敲擊鍵盤，然后決定是否把這些事件轉(zhuǎn)化成對(duì)模型或視圖的改變.控制器分為兩類：表示層控制器和業(yè)務(wù)處理控制器.表示層控制器：邏輯關(guān)系的定義、界面內(nèi)部功能的完成、界面元素的初始化，界面組件生命周期的控制、界面元素的處理如自定義事件等.業(yè)務(wù)處理控制器：主要處理后臺(tái)業(yè)務(wù)，從表示層控制器中接受事件，在業(yè)務(wù)規(guī)則基礎(chǔ)上，處理相應(yīng)的模塊.數(shù)據(jù)網(wǎng)關(guān)接受其傳回的數(shù)據(jù)結(jié)果，表示層控制器接受其生成的中間事件.

2.3 Web界面模型實(shí)現(xiàn)的策略

2.3.1 Web界面模型結(jié)構(gòu)層

結(jié)構(gòu)層通常使用標(biāo)記語(yǔ)言描述，例如XML，HTML，XHTML等，使用標(biāo)簽顯示界面元素.標(biāo)簽描述界面元素及內(nèi)容的語(yǔ)義，不同的界面元素對(duì)應(yīng)不同的標(biāo)簽.為了實(shí)現(xiàn)界面定制，設(shè)計(jì)了基于元數(shù)據(jù)的界面構(gòu)件，使用XML標(biāo)簽描述界面組件，用界面組件表示界面元素.

2.3.2 Web界面模型表示層

在表示層通過(guò)層疊樣式表（Cascading Style Sheet）技術(shù)控制相同元素在不同頁(yè)面的樣式，這樣能簡(jiǎn)化代碼并且便于維護(hù).采用CSS下載數(shù)據(jù)，用數(shù)據(jù)庫(kù)存儲(chǔ)表示層數(shù)據(jù)和用戶定制信息中，把通用界面數(shù)據(jù)存放在CSS文件中，實(shí)現(xiàn)數(shù)據(jù)的分離，提高訪問(wèn)界面數(shù)據(jù)的速度.

2.3.3 Web界面模型行為層

行為層使用Javascript技術(shù)和DOM方法.

文檔對(duì)象模型（DOM）是用于HTML和XML文檔的編程接口，它提供一種結(jié)構(gòu)化的方法.以層次結(jié)構(gòu)組織的節(jié)點(diǎn)或信息片斷的集合的方式來(lái)解析文檔.利用Javascript和DOM可以掌控、操縱和創(chuàng)建動(dòng)態(tài)的界面元素，實(shí)現(xiàn)行為層與表示層的交互.

2.3.4 數(shù)據(jù)網(wǎng)關(guān)

數(shù)據(jù)網(wǎng)關(guān)實(shí)現(xiàn)數(shù)據(jù)的統(tǒng)一訪問(wèn).在數(shù)據(jù)網(wǎng)關(guān)中，采用相同的方式來(lái)表示來(lái)自不同數(shù)據(jù)庫(kù)的各類異構(gòu)數(shù)據(jù)，采用樹狀結(jié)構(gòu)描述數(shù)據(jù)對(duì)象的屬性和操作.比如：XML文檔采用SAX和DOM解析器實(shí)現(xiàn)對(duì)數(shù)據(jù)的讀?。籆SS文件采用字符串的正則表達(dá)式技術(shù)讀取文件中的樣式數(shù)據(jù).

數(shù)據(jù)網(wǎng)關(guān)設(shè)計(jì)的接口類屏蔽了訪問(wèn)的底層差異，對(duì)上提供統(tǒng)一的數(shù)據(jù)訪問(wèn)接口.只要實(shí)現(xiàn)這個(gè)接口類，就可擴(kuò)展數(shù)據(jù)網(wǎng)關(guān)，從而實(shí)現(xiàn)對(duì)其他數(shù)據(jù)的讀取訪問(wèn).

2.3.5 控制器

控制器主要采用Javascript和Ajax技術(shù)，Javascript技術(shù)實(shí)現(xiàn)構(gòu)件的初始化和對(duì)事件的接收處理、請(qǐng)求的分發(fā)等，與后臺(tái)業(yè)務(wù)的交互使用Ajax技術(shù)實(shí)現(xiàn).控制器功能的實(shí)現(xiàn)都在一個(gè)Javascript庫(kù)，控制器中供各個(gè)頁(yè)面繼承使用的接口都在Javascript庫(kù)做了抽象說(shuō)明.

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

用戶界面與實(shí)際需求相對(duì)應(yīng)，是經(jīng)常變化的，采用三層結(jié)構(gòu)模式將業(yè)務(wù)處理與顯示分離，使應(yīng)用更具有拓展性，增強(qiáng)其個(gè)性化特征.

〔1〕李小將，胡正國(guó).嵌入式軟件系統(tǒng)界面可定制模型[J].西北工業(yè)大學(xué)學(xué)報(bào)，2001，19(3)：418-421.

〔2〕張文波基于任務(wù)模型的用戶界面自動(dòng)生成研究 [D].濟(jì)南：山東大學(xué)計(jì)算機(jī)科學(xué)技術(shù)學(xué)院，2007.

〔3〕戚艷軍，李繼玲.圖形界面開發(fā)語(yǔ)言XIJL應(yīng)用研究[J].計(jì)算機(jī)技術(shù)與發(fā)展，2007，17(3)：233-235．

〔4〕馮仕紅.基于設(shè)計(jì)特征和參數(shù)化的工程化界面設(shè)計(jì)模式研究[D].山東大學(xué)：計(jì)算機(jī)軟件與理論，2008.

〔5〕趙祺，黃罡．一種基于Web的服務(wù)組裝構(gòu)件模型[J].計(jì)算機(jī)科學(xué)與探索，2008，2(4)：378-388．

〔6〕辛剛，王清心.基于Ajax的Java Web應(yīng)用的研究與開發(fā)[J].山西電子技術(shù)，2010(1)：57-58.

〔7〕申利民，李偉偉.基于構(gòu)件的柔性Web用戶界面模型[J].計(jì)算機(jī)應(yīng)用研究，2011(3)：25-26．

〔8〕熊文，熊淑華．Ajax技術(shù)在Web2.0網(wǎng)站設(shè)計(jì)中的應(yīng)用研究[J].計(jì)算機(jī)技術(shù)與發(fā)展，2012(3)：42-43.

TP.11.13

A

1673-260X（2013）02-0023-02

阜陽(yáng)師范學(xué)院科研項(xiàng)目資助（2011FSKJ15）