Web表現(xiàn)層的Client端設(shè)計(jì)模式探討 (zhuan)
本文著重討論的是具有RIA特征的Web應(yīng)用。例如目前比較流行的的Ajax類Web應(yīng)用。傳統(tǒng)的基于純HTML的Web應(yīng)用不在本文討論之列。
隨著Ajax的升溫,開發(fā)人員逐漸對(duì)Web應(yīng)用中的各種UI控件和開發(fā)框架開始有了越來(lái)越濃厚的興趣。目前所知的這方面的控件集或開發(fā)框架可以說(shuō)是并不鮮見。筆者將這些產(chǎn)品大致分為兩個(gè)大類:離散控件集型和數(shù)據(jù)模型驅(qū)動(dòng)型。這兩個(gè)詞大家應(yīng)該很陌生,因?yàn)樗麄兌际潜扇俗栽斓摹?br />
離散控件集型 - 此類產(chǎn)品以提供一系列相對(duì)獨(dú)立的界面控件為主要目的。控件的類型比較全面,例如搭建Web應(yīng)用常見的各種Grid、Tree、Menu、ToolBar、Window等。不過(guò)此類產(chǎn)品一般不會(huì)過(guò)多的考慮界面中的數(shù)據(jù)和操作邏輯的封裝,至多只會(huì)提供相對(duì)簡(jiǎn)單的靜態(tài)數(shù)據(jù)綁定*。我認(rèn)為此類產(chǎn)品的主要出發(fā)點(diǎn)是改善Web應(yīng)用的界面表現(xiàn)能力,同時(shí)借助自帶的SDK提供一種更加規(guī)范的開發(fā)模式。
目前我所知的大部分產(chǎn)品似乎都屬于這一類別。例如: backbase、qooxdoo、NetAdventage、bindows等。
Backbase實(shí)例中心:
http://www.backbase.com/demos/explorer
數(shù)據(jù)模型驅(qū)動(dòng)型 - 此類產(chǎn)品除了要提供一組比較好用的UI控件集之外,更會(huì)提供對(duì)界面中數(shù)據(jù)模型的管理功能。其UI控件以數(shù)據(jù)敏感控件為主。數(shù)據(jù)敏感控件可以通過(guò)于數(shù)據(jù)模型的綁定來(lái)實(shí)現(xiàn)對(duì)表現(xiàn)層中數(shù)據(jù)的展示和控制。這種數(shù)據(jù)綁定可成為動(dòng)態(tài)數(shù)據(jù)綁定*。可以說(shuō)這一類產(chǎn)品的主要出發(fā)點(diǎn)除改善Web應(yīng)用的界面表現(xiàn)能力外,也非常注重提供一種快速開發(fā)的模式。
好的數(shù)據(jù)模型驅(qū)動(dòng)型的開發(fā)框架應(yīng)該首先包含離散控件集中的各種功能,它事實(shí)上是一種相對(duì)于單純的UI控件集而言更高層次的抽象。
這種模式其實(shí)在以前CS下非常常見,例如VB、Delphi等RAD開發(fā)工具提交數(shù)據(jù)庫(kù)應(yīng)用開發(fā)模式都屬于這種類型。不過(guò)到了BS下人們似乎都忘記這種開發(fā)模式。可能是因?yàn)椴粔蛞姸嘧R(shí)廣,目前筆者所知的此類產(chǎn)品只有dorado。
dorado的示例中心:
http://sample.bstek.com
對(duì)于上面提到的兩種數(shù)據(jù)綁定方式的解釋如下:
靜態(tài)數(shù)據(jù)綁定 – 是指在控件可以根據(jù)指派給他的數(shù)據(jù)源(往往是XML數(shù)據(jù)源或簡(jiǎn)單的數(shù)組)自動(dòng)的提取并展示其中的數(shù)據(jù)。這種提取過(guò)程是主動(dòng)完成的,當(dāng)提取過(guò)程結(jié)束后控件無(wú)法繼續(xù)感知數(shù)據(jù)源中數(shù)據(jù)的變化。這事實(shí)上是從控件到數(shù)據(jù)源的拉模式(Pull Mode)。
動(dòng)態(tài)數(shù)據(jù)綁定 – 是指將控件以觀察者的角色注冊(cè)到數(shù)據(jù)源(往往是經(jīng)過(guò)封裝的私有對(duì)象)中。數(shù)據(jù)源成為被觀察者。當(dāng)數(shù)據(jù)源中的數(shù)據(jù)或狀態(tài)發(fā)生改變時(shí)會(huì)主動(dòng)通知所有觀察者(即綁定的控件),然后再由控件自動(dòng)提取數(shù)據(jù)完成展現(xiàn)的更新。這樣一旦綁定建立以后控件就可以實(shí)時(shí)的體現(xiàn)數(shù)據(jù)源中的最新變化。如果用戶利用這些控件對(duì)數(shù)據(jù)或狀態(tài)做了改變,那么這種改變自然也會(huì)通過(guò)數(shù)據(jù)源再實(shí)時(shí)的通知給所有其它相關(guān)的控件。
?
回到關(guān)于離散控件集型和數(shù)據(jù)模型驅(qū)動(dòng)型的討論。這兩種開發(fā)框架都有這自己的適用面。筆者認(rèn)為離散控件集型的開發(fā)框架更加適合與一些像論壇這樣更加注重展現(xiàn)的應(yīng)用。而對(duì)于那些具有明顯數(shù)據(jù)庫(kù)應(yīng)用特性的的Web應(yīng)用(例如MIS類應(yīng)用),則數(shù)據(jù)模型驅(qū)動(dòng)型的開發(fā)框架更能發(fā)揮它的優(yōu)勢(shì)。
得出以上結(jié)論的原因是我認(rèn)為數(shù)據(jù)模型驅(qū)動(dòng)型的開發(fā)框架能夠使開發(fā)人員將更多的精力投入到界面所需要實(shí)現(xiàn)的更能當(dāng)中,至少在制作頁(yè)面的前期階段不必太多的關(guān)注界面的表現(xiàn)形式。同時(shí)如果能夠?qū)⒏嗟慕缑娌僮鬟壿嫹庋b到數(shù)據(jù)模型對(duì)象中,就可以保證在后期當(dāng)最終用戶提出界面的修改要求時(shí),開發(fā)人員可以用更小的代價(jià)來(lái)完成對(duì)界面的重構(gòu)。
讓我們來(lái)具體分析兩個(gè)場(chǎng)景:
場(chǎng)景1:一個(gè)用慣了CS應(yīng)用的用戶要求開發(fā)一個(gè)界面來(lái)維護(hù)公司目前擁有的所有書籍。為了方便的完成對(duì)所有書籍的CRUD操作,用戶希望以一個(gè)Grid控件來(lái)完成所有這些操作,同時(shí)用戶希望能夠在界面批量的完成一系列C、U、D操作之后一次性的對(duì)數(shù)據(jù)進(jìn)行保存。每本書籍都有一個(gè)由系統(tǒng)自動(dòng)分配的編碼作為主鍵,因此用戶不需要看到書籍的編碼。
分析:如果我們現(xiàn)在只有一個(gè)離散的Grid控件。要完成上述功能我們還需要做以下一些工作:
可見如果使用一個(gè)離散的Grid控件來(lái)制作這個(gè)界面,我們還必須要做不少工作。如果我們能夠選擇一個(gè)數(shù)據(jù)模型驅(qū)動(dòng)型的開發(fā)框架,上面提到的很多功能框架中往往已經(jīng)具備。開發(fā)人員要做的往往只是聲明好一個(gè)數(shù)據(jù)模型然后把它跟Grid關(guān)聯(lián)起來(lái)。如果您以前使用過(guò)VB或Delphi這一類開發(fā)功能,應(yīng)該不難想像這個(gè)過(guò)程。
場(chǎng)景2:想像一個(gè)用戶信息的錄入界面,如下圖。使用者需要輸入用戶的身份證,由于什么證的號(hào)碼中包含了很多信息,系統(tǒng)完全有可能從其中解析出出生日期和性別這樣的信息。因此為了方便錄入,我們可以讓表單中的出生日期和性別這兩個(gè)欄位支持自動(dòng)填入缺省值的功能,只要用戶錄入了身份證號(hào)碼,就可以馬上自動(dòng)填充上述兩個(gè)欄位。
?
在基于離散控件的編程方式中,我們需要知道身份證、出生日期、性別這三個(gè)編輯框的id,并針對(duì)他們進(jìn)行編程。其代碼形式可能如下:






在基于數(shù)據(jù)模型驅(qū)動(dòng)型框架的編程方式中,我們并不需要關(guān)注界面上擺放了什么控件,只需要知道關(guān)注如何操作數(shù)據(jù)模型對(duì)象。其代碼形式可能如下:







可見在這種開發(fā)模式中我們的代碼幾乎完全針對(duì)數(shù)據(jù)模型展開,當(dāng)我們?yōu)閐mUser中的brithday和sex賦值后,相應(yīng)的數(shù)據(jù)敏感控件會(huì)立刻自動(dòng)顯示出這些的數(shù)據(jù)。這樣的編程模式可以讓代碼有高度的一致性,當(dāng)我們制作復(fù)雜的用戶界面時(shí),可以不需要記住諸多的控件id。
進(jìn)一步假設(shè)。如果用戶有一天覺得這樣的界面并不方便對(duì)多筆數(shù)據(jù)進(jìn)行方便的維護(hù),而要求對(duì)界面進(jìn)行如下調(diào)整。在刪除原先的表單,利用一個(gè)Grid控件來(lái)對(duì)用戶信息進(jìn)行維護(hù)。
如果我們的編程方式是基于離散控件的,那么我們不可避免的要對(duì)先前編寫那段代碼做一些調(diào)整了。我需要將那段代碼移植到表格當(dāng)中。
但是如果我們的編程方式是基于數(shù)據(jù)模型驅(qū)動(dòng)型框架的,那么我們要做的只是將界面上的表單刪掉,然后在放置一個(gè)與現(xiàn)有數(shù)據(jù)模型綁定的Grid控件。至于那段代碼,它完全不需要做任何變動(dòng)。
綜上可見,在MIS類Web應(yīng)用的表現(xiàn)層開發(fā)方面。數(shù)據(jù)模型驅(qū)動(dòng)型的開發(fā)框架可以為開發(fā)人員帶來(lái)更多的實(shí)惠。不知道隨著時(shí)間的推移這一類的開發(fā)框架會(huì)不會(huì)豐富起來(lái)?
http://61.151.239.187/dorado5/new-feature/brich.jsp
這個(gè)界面上既有表格又有表單、還有一個(gè)工具條。本來(lái)都是不相關(guān)的控件,但是由于它們綁定了同一個(gè)數(shù)據(jù)模型,所以在操作時(shí)它們會(huì)時(shí)刻保持同步。
?
posted on 2006-09-04 19:25 都市淘沙者 閱讀(322) 評(píng)論(0) 編輯 收藏 所屬分類: JSP/PHP