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

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

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

4 Vaadin框架相對于傳統web開發(fā)模式的優(yōu)勢
　Vaadin是一個服務器端實現的RIA框架，這與一般的客戶端實現的RIA有很大的不同。一般的客戶端RIA實現中，服務器端基本上只負責處理數據，并暴露REST風格的接口；而客戶端則依托JavaScript框架或瀏覽器插件來實現復雜的界面邏輯。服務器端RIA的好處在于客戶端的邏輯變簡單了，但是交互性卻沒有受到影響。這是依靠Vaadin的界面組件來實現的。Vaadin中的界面組件包括服務器端的Java實現和該組件在客戶端的對等體（peer）。組件對等體之間的通信由框架完全負責。Vaadin的客戶端組件是通過Google的GWT轉換出來的，但是Vaadin相對于GWT來說的一個重要優(yōu)勢在于Vaadin只包含服務器端的Java實現，可以完全忽略客戶端的存在。客戶端的處理完全由框架來完成。
　Vaadin框架非常適合產品的快速原型開發(fā)。因為它只有服務器端的Java實現，在原型開發(fā)中要考慮的因素很少，可以快速完成。而在實際的項目中，如果是傳統的數據庫驅動的信息管理系統，Vaadin也比較合適。　表1為Vaadin與現階段比較流行的幾個開發(fā)框架的對比：

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