摘  要： 傳統(tǒng)的Web應(yīng)用開發(fā)會(huì)面對(duì)開發(fā)效率低下，疲于應(yīng)付用戶差異化需求，以及瀏覽器兼容等問題。Vaadin是一個(gè)用于創(chuàng)建互聯(lián)網(wǎng)富應(yīng)用程序的優(yōu)秀開源框架，其擁有種類豐富功能完善的UI界面組件庫，每個(gè)UI界面組件都帶有自身的事件監(jiān)聽機(jī)制以及數(shù)據(jù)綁定功能。同時(shí)Vaadin還擁有各種由GWT實(shí)現(xiàn)的控件，由于Vaadin前臺(tái)后臺(tái)都采用純Java語言實(shí)現(xiàn)，不用像傳統(tǒng)的Web開發(fā)寫Javascript代碼，這就很好地解決了傳統(tǒng)Web開發(fā)中所面臨的前臺(tái)后臺(tái)兼容性開發(fā)問題。
 關(guān)鍵詞： Web開發(fā)；Vaadin框架；RIA應(yīng)用程序；GWT

　現(xiàn)如今，基于瀏覽器端的Web程序已經(jīng)越來越盛行，用戶的桌面上，瀏覽器已經(jīng)變成人們與外界溝通的第一站。人們對(duì)于瀏覽器的要求已經(jīng)不僅僅限于信息的展現(xiàn)，而應(yīng)該是能完成各種復(fù)雜的需求和有著完善功能的RIA應(yīng)用程序的承載體。傳統(tǒng)的Web開發(fā)模式效率比較低下，可復(fù)用率低，這給Web開發(fā)的技術(shù)人員和機(jī)構(gòu)帶來了前所未有的挑戰(zhàn)，本文著眼于對(duì)Vaadin Web開發(fā)框架的前端性的研究，探討一種效率高，優(yōu)秀的RIA Web應(yīng)用開發(fā)方式，并且讓開發(fā)人員從繁瑣的前臺(tái)工作中解脫出來，滿足用戶差異化復(fù)雜化的需求。
1 研究的背景與目的意義
1.1 Web開發(fā)目前狀況
　瀏覽器富應(yīng)用程序的越來越盛行，使得瀏覽器不再僅僅是人們信息交流溝通的工具，而是能滿足用戶各種需求的RIA應(yīng)用程序的載體，用戶對(duì)B/S架構(gòu)的瀏覽器應(yīng)用要求越來越高，但復(fù)雜的RIA應(yīng)用程序會(huì)給開發(fā)人員帶來很多重復(fù)性的工作，而且前臺(tái)和程序開發(fā)人員之間的配合也存在較大的阻礙[1]。
1.2 研究的目的
　探討Vaadin Web開發(fā)技術(shù)對(duì)解決傳統(tǒng)Web程序開發(fā)中后臺(tái)開發(fā)人員和前臺(tái)開發(fā)之間要相互制約，相互影響，溝通困難的解決方案，以及對(duì)Web程序模型層，視圖層的分成開發(fā)模式的研究。
2 Vaadin Web開發(fā)框架
2.1 Vaadin簡(jiǎn)介、開發(fā)環(huán)境配置以及基本開發(fā)技術(shù)
　Vaadin是一款開源產(chǎn)品，使用Apache V2許可協(xié)議，由芬蘭的IT Mill公司開發(fā)，IT Mill公司發(fā)布的2006版本名為IT Mill Toolkit，該版本包含了一項(xiàng)全新的技術(shù)，基于Ajax的表現(xiàn)層引擎，可以讓客戶端與服務(wù)器端的通信變得更簡(jiǎn)單。
　2009年，IT Mill公司為了避免命名上的混淆，用芬蘭民間傳說中的一種神話生物，是女神也是一種山嶺馴鹿的神話祖先名Vaadin作為全新的名字發(fā)布了其第六個(gè)版本。
　Vaadin是一個(gè)用于創(chuàng)建互聯(lián)網(wǎng)富應(yīng)用程序的優(yōu)秀開源框架，其擁有種類豐富功能完善的UI界面組件庫，每個(gè)UI界面組件都帶有自身的事件監(jiān)聽機(jī)制以及數(shù)據(jù)綁定功能。同時(shí)Vaadin還擁有各種由GWT實(shí)現(xiàn)的控件，由于Vaadin前臺(tái)后臺(tái)都采用純Java語言實(shí)現(xiàn)，不用像傳統(tǒng)的Web開發(fā)前臺(tái)需要Javascript實(shí)現(xiàn)。Vaadin有客戶端組件和服務(wù)器端組件兩套UI組件，客戶端組件是由服務(wù)器端組件驅(qū)動(dòng)的，當(dāng)客戶端組件與服務(wù)器端組件綁定之后，通過事件監(jiān)聽機(jī)制，服務(wù)器端可以方便快捷地處理客戶端UI的事件。
　Vaadin是通過GWT的原理對(duì)界面進(jìn)行CSS渲染的，它所有的CSS代碼都是由Java代碼通過GWT編譯后自動(dòng)生成的CSS代碼，開發(fā)人員不用去關(guān)心前臺(tái)的CSS樣式，由框架自動(dòng)生成。Vaadin擁有完善的mvc分層開發(fā)模式，前臺(tái)View層、邏輯業(yè)務(wù)層的代碼是完全分層的，只有當(dāng)程序運(yùn)行時(shí)，才將具體的View和相應(yīng)的Mode層綁定起來，完成相應(yīng)的業(yè)務(wù)邏輯功能。Vaadin不僅僅是提供了核心的開發(fā)框架，在Vaadin社區(qū)vaadin.com還提供了非常豐富的插件供開發(fā)人員使用，這就極大地提高了開發(fā)人員的開發(fā)效率。使用Vaadin開發(fā)的應(yīng)用程序完全兼容市場(chǎng)上大多數(shù)種類的瀏覽器，不需要安裝任何插件就可以在瀏覽器里面運(yùn)行，同時(shí)還能很好地處理url傳值，以及瀏覽器后退按鈕，Vaadin還有個(gè)優(yōu)點(diǎn)，能防止惡意代碼的攻擊，傳遞信息具有安全性。
　Vaadin可以和任何J2ee兼容的系統(tǒng)兼容，既可以像Java和Javascript等語言一樣嵌入HTML或者JSP頁面里面運(yùn)行，而且完全兼容Java的Servlet機(jī)制。Vaadin開發(fā)環(huán)境的搭建很簡(jiǎn)單，只需要去Vaadin社區(qū)下載開發(fā)jar包以及Eclipse或者NetBean插件就可以在上述兩個(gè)平臺(tái)上面進(jìn)行應(yīng)用程序的開發(fā)。
Vaadin應(yīng)用程序很大程度上與C/S架構(gòu)應(yīng)用和桌面應(yīng)用程序很相似，視圖的基本單位是窗體，一個(gè)應(yīng)用程序就是由許多窗體組成的，每個(gè)應(yīng)用程序都有唯一的一個(gè)application入口，如下代碼所示為Vaadin的一個(gè)簡(jiǎn)單示例應(yīng)用。
package com.example.Vaadingapp；
import com.Vaadin.Application；
import com.Vaadin.ui.Label；
import com.Vaadin.ui.Window；

public class mainApplication extends Application {
    @Override
    public void init（） {
        /* …添加一個(gè)主窗體…*/
        Window mainW = new Window（"mainApplication"）；
        setMainWindow（mainW）；
        /*…在主窗口中添加一個(gè)子窗口UI…*/
        Label lab=new Label（"hi，welcome to vaadin"）；
        mainW.addComponent（lab）；
        Window win=new Window（"Sub Win"）；
        mainW.addWindow（win）；
    }
}
　圖1為基于窗體的RIA應(yīng)用程序示例。

2.2 Vaadin的數(shù)據(jù)模型
　Vaadin的數(shù)據(jù)模型是整個(gè)Vaadin框架中的一個(gè)核心概念，數(shù)據(jù)模型機(jī)制可以將UI組件與應(yīng)用程序的數(shù)據(jù)源直接綁定在一起，這樣修改數(shù)據(jù)就非常方便，直接在UI端修改就可以了，修改后的數(shù)據(jù)直接存入數(shù)據(jù)源，不需要中間層的轉(zhuǎn)換。Vaadin的數(shù)據(jù)模型包含3層嵌套的抽象對(duì)象：property、item和container。整套模型的實(shí)現(xiàn)位于包c(diǎn)om.Vaadin.data中。由接口Property、Item、Container和其他一系列更加細(xì)化的接口和類組成。數(shù)據(jù)模型本身并不定義數(shù)據(jù)的表現(xiàn)形式而只是一些接口定義。具體的表現(xiàn)形式需要由容器的實(shí)現(xiàn)來定義。實(shí)現(xiàn)的形式可以是多種多樣的，例如Java POJO對(duì)象，文件系統(tǒng)或是數(shù)據(jù)庫查詢等方式。Vaadin框架提供了這幾個(gè)接口的一些內(nèi)置實(shí)現(xiàn)類來作為UI組件的默認(rèn)數(shù)據(jù)模型。下面對(duì)這些接口和實(shí)現(xiàn)類做一簡(jiǎn)要介紹。
Property：屬性接口是Vaadin數(shù)據(jù)模型的基礎(chǔ)，提供了標(biāo)準(zhǔn)的API接口來讀取單獨(dú)對(duì)象的數(shù)據(jù)，Property還提供ValueChangeEvent的事件廣播，當(dāng)屬性值發(fā)生變化時(shí)，可以被ValueChangeListener監(jiān)聽器處理。Property的讀寫方法為getValue（）和setValue（）。getValue（）返回通用的Object類型的對(duì)象，因此可以強(qiáng)制轉(zhuǎn)換成所需的數(shù)據(jù)類型。Property的類型可以通過getType（）取得。
　Item接口相當(dāng)于Property屬性的容器，Item可以用來管理Property屬性，Item中的每個(gè)property都由唯一的一個(gè)PID確定，Item可以通過getItemProperty（）來讀寫其中的Property。Vaadin應(yīng)用程序開發(fā)中很多地方會(huì)用到Item，比如對(duì)于一個(gè)Table對(duì)象，Item可以對(duì)應(yīng)到Table每一行的某個(gè)coloumn。Tree的每個(gè)節(jié)點(diǎn)數(shù)據(jù)也可以對(duì)應(yīng)到一個(gè)Item，在Web開發(fā)的表單提交中，每個(gè)Item可以對(duì)應(yīng)一個(gè)數(shù)據(jù)輸入控件。使用Item可以實(shí)現(xiàn)Item接口，最簡(jiǎn)單的方法是使用Vaadin的PropertysetItem或BeanItem。
　Container：容器是Vaadin數(shù)據(jù)模型中的最高層接口。正如Item是property屬性的容器一樣，Container是Item的容器，Item在Container容器中有唯一的item identifier標(biāo)識(shí)，Container通過方法addItem（），getItem（）等方法來靈活管理Item屬性，addItem（）方法是用來在Container容器中添加一條Item屬性的，同樣，可以通過getItem（）方法來從Container中獲取一個(gè)Item對(duì)象。Container內(nèi)部包含了一些排序的接口，如果實(shí)現(xiàn)了這些接口，就可以為Item屬性排序，這個(gè)接口的典型應(yīng)用就是對(duì)table中選中某一個(gè)屬性，然后對(duì)其進(jìn)行排序。Container接口也內(nèi)建有事件監(jiān)聽機(jī)制來處理內(nèi)容變化。IndexedContainer、BeanItemContainer和FilesystemContainer都是Container容器的內(nèi)置實(shí)現(xiàn)類。其中IndexedContainer是Vaadin框架的默認(rèn)Container實(shí)現(xiàn)。
3 Vaadin框架的開發(fā)流程
　Vaadin是純Java語言開發(fā)框架，基本可以支持所有的Java開發(fā)編譯器，但Vaadin主要為eclipse，netbeans提供了開發(fā)插件。在Vaadin官網(wǎng)下載相應(yīng)的IDE插件，然后集成到開發(fā)環(huán)境中，搭建好其他Java開發(fā)所必需的環(huán)境以及服務(wù)器之后就可以進(jìn)行Vaadin應(yīng)用的開發(fā)了，綜上，可以在但不限于上述兩種IDE中快速開發(fā)Vaadin應(yīng)用。
　Vaadin的一般開發(fā)流程如圖2所示。

4 Vaadin框架相對(duì)于傳統(tǒng)web開發(fā)模式的優(yōu)勢(shì)
　Vaadin是一個(gè)服務(wù)器端實(shí)現(xiàn)的RIA框架，這與一般的客戶端實(shí)現(xiàn)的RIA有很大的不同。一般的客戶端RIA實(shí)現(xiàn)中，服務(wù)器端基本上只負(fù)責(zé)處理數(shù)據(jù)，并暴露REST風(fēng)格的接口；而客戶端則依托JavaScript框架或?yàn)g覽器插件來實(shí)現(xiàn)復(fù)雜的界面邏輯。服務(wù)器端RIA的好處在于客戶端的邏輯變簡(jiǎn)單了，但是交互性卻沒有受到影響。這是依靠Vaadin的界面組件來實(shí)現(xiàn)的。Vaadin中的界面組件包括服務(wù)器端的Java實(shí)現(xiàn)和該組件在客戶端的對(duì)等體（peer）。組件對(duì)等體之間的通信由框架完全負(fù)責(zé)。Vaadin的客戶端組件是通過Google的GWT轉(zhuǎn)換出來的，但是Vaadin相對(duì)于GWT來說的一個(gè)重要優(yōu)勢(shì)在于Vaadin只包含服務(wù)器端的Java實(shí)現(xiàn)，可以完全忽略客戶端的存在?？蛻舳说奶幚硗耆煽蚣軄硗瓿?。
　Vaadin框架非常適合產(chǎn)品的快速原型開發(fā)。因?yàn)樗挥蟹?wù)器端的Java實(shí)現(xiàn)，在原型開發(fā)中要考慮的因素很少，可以快速完成。而在實(shí)際的項(xiàng)目中，如果是傳統(tǒng)的數(shù)據(jù)庫驅(qū)動(dòng)的信息管理系統(tǒng)，Vaadin也比較合適。　表1為Vaadin與現(xiàn)階段比較流行的幾個(gè)開發(fā)框架的對(duì)比：

　文章簡(jiǎn)潔的介紹了當(dāng)下基于B/S架構(gòu)的Web應(yīng)用開發(fā)的基本狀況，探討了RIA應(yīng)用開發(fā)存在的一些問題，對(duì)Vaadin開源框架進(jìn)行了深度的解析，以及介紹了Vaadin的開發(fā)流程和在RIA應(yīng)用開發(fā)方面所擁有的優(yōu)勢(shì)。
參考文獻(xiàn)
[1] 馬榮.誰是未來的主宰？淺析Web App發(fā)展現(xiàn)狀[N]．http：//soft.zol.com.cn，2012（12）：25.
[2] Vaadin Team，Vaadin6.88中文開發(fā)手冊(cè)[M].https：//vaadin.com，2011.