情況是這樣的：
今年1月到4月，我們小組（3個人其中2個開發人員）做一個新的很小的項目，一共才200多人天。這個項目完全是新的，用戶除了要求用MySQL、Hibernate和Jonas服務器外，其他的都沒有要求。連界面要求也沒有。
最終我們選擇用Vaadin來開發界面，Spring IOC來整合全部。於是對Vaadin這個框架有了些粗淺的認識。我覺得這還是一個很不錯，很好玩的框架。
不過我們當時用的，還是Vaadin 6.7，現在Vaadin 7已經出alpha版了，可能有較大的改動。
主要資源包括學習資料全在官網上有
www.vaadin.com比較重要的幾個：
UI組件及示例程序：http://demo.vaadin.com/sampler
Book of Vaadin：https://vaadin.com/book
API：https://vaadin.com/api/
Eclipse插件：https://vaadin.com/eclipse
簡介
先來個簡介，有些是我的理解，可能不對。。。
Vaadin是一個新型的Java框架，它可以讓程序員在不使用HTML和JavaScript的情況下，輕鬆做出跨瀏覽器的網頁。開發的方式和Swing比較接近，採用的是組件、Layout加事件管理的模式。整個開發過程純Java，易於調試，免去了開發js的諸多煩惱。跨瀏覽器的實現仰仗GWT，所以應該說做得很不錯。
Vaadin所有運行的代碼都是在服務器端的。在Vaadin中，GWT就像一支筆，把服務器端組件的現有狀態“畫”在瀏覽器上。以前的版本用的是他們團隊自己開發的東西，後來換成了GWT。
功能豐富強大的Add-on（不知道怎麼翻譯，就是現成別人寫好的基於Vaadin的庫之類的）也是一個值得考慮的因素，不過根據不同的版權，有一些是收費的。
看過他們官方的論壇，感覺人氣還行。
Vaadin和GWT的區別
Vaadin的代碼是運行在服務器端的。
另外，Vaadin支持所有Java類庫，使用起來毫無限制，而GWT只能使用少數的Java類庫。
和一般的Java項目一樣，編譯速度比較快。部署和一般JSP的項目是一樣的。
我們項目選擇Vaadin的原因
1. 純Java編程，學習週期短
2. 現有組件多，有Eclipse插件開發效率高
我們整個項目好像是3到4個月要交貨。Vaadin還有一個Eclipse的插件，可以實現拖拽開發界面，事實證明這個確實很方便，給我們的開發幫了大忙。
3. 部署簡單，和正常JSP一樣，只需要加一個Vaadin的jar就行，無需多餘配置，項目可以用Eclipse插件直接生成。
不過我們是用Maven的。
4. 可以和Spring整合
在選擇UI庫之前，我們已經決定使用Spring框架，並且客戶要求使用Hibernate。這樣三者就由Spring整合在一起了。
5. 跨瀏覽器，客戶需要IE和Firefox支持
來一張官網tutorial的Vaadin程序運行的圖：
Vaadin與服務器之間的聯繫
Vaadin的組件是在服務器端的，用戶看到的只是利用GWT畫在瀏覽器上的對應的組件而已。GWT會把對客戶端組件的操作以UIDL(JSON)的形式發到服務器端，再由Vaadin的Servlet把信息解讀成服務器端相對應的組件的事件，然後執行相關代碼後，把新的組件狀態發送給客戶端。客戶端的GWT組件根據這些信息作出相應的改變。
簡單介紹一下Vaadin的Eclipse插件，以及怎麼創建項目並運行它。
先說一下怎樣安裝Eclipse插件，資料來自官網，地址如下：https://vaadin.com/eclipse
Help菜單下，單擊Install
New Software...
然後添加新的Update
site:
Eclipse 3.5及以上版本：
在Work with那裏輸入http://vaadin.com/eclipse，並按回車
現在應該沒有用3.5以下版了吧。。。而且3.5以下版沒有Visual Design，很重要的一個特性。
注意，只需要輸入http://vaadin.com/eclipse就行了，前面的update
site:...什麼的都是按回車後自己加上去的。
選擇要安裝的Vaadin
Plug-in for Eclipse，然後點Next，稍等片刻，待Eclipse重啓，安裝完成。
安裝完成後，我們就可以創建新的Vaadin項目了。
點File-->New-->Project...
在列表中找到Vaadin下的Vaadin Project。選好按Next。
然後輸入項目名稱，比如VaadinTest。
其他的用默認就好了，不過我還是忍不住在Configuration裏選擇了Vaadin, Java 6, Servlet 2.4。
Target runtime那好像是根據將來運行在哪個服務器上選擇的，我這裏默認就是Tomcat 6。
其他一路Next，不過留意看看都有些什麼東西可以配置，這裏我就不多說了。
項目建好後，如圖所示：
新建好的項目就可以馬上運行了。我們項目開發用的是Maven來生成war的，我不知道插件新建的項目該如何打包，會ant的同學可以試着用ant打包。
不過這不影響我們運行這個項目，Eclipse會拷貝需要的文件到服務器上。
首先，Servers view要開啓。而且Server也要安裝。這些我就不多說了，大家應該都差不多知道。
和一般的JSP/Servlet項目一樣，右鍵點一個服務器，我這裏是Tomcat
6，然後選Add and Remove...
然後在左側選擇要部署的項目，再點Add，把它加到右邊去。選好後，點Finish結束。
我們現在就可以運行這個項目了。
右鍵點Tomcat 6，然後選Debug（這個方便調試，可以設斷點），這樣Tomcat服務器就啓動了。
Console裏的輸出如下：
Tomcat啓動之後，打開瀏覽器，輸入網址：localhost:8080/VaadinTest，效果如下：
現在我們就可以用Vaadin的Eclipse插件來創建組件了，它可以大大提高開發效率。
爲了更好的組織代碼，建議新建一個包，比如叫ui。
建好之後右鍵點擊然後右擊ui，選擇New->Other... 
在列表中選擇Vaadin
Composite，然後點Next。
注意，不要選擇Vaadin Widget，Widget在Vaadin好像指的是由服務器UI component + 客戶端GWT。這個我沒有接觸過。
接下來輸入名字，這個名字將成爲類的名字，所以建議按類名規範輸入，比如TestComposite，然後點Finish。
在這個過程中，有可能會出現這樣的信息： 
這個好像不影響使用，如果想解決這個問題，可以按提示上的去裝一下XULRunner。這裏暫時先點OK。
類生成好後，Eclipse會自動打開Vaadin
Editor，如下圖：
注意標籤上的圖標和一般的Java Editor不同，另外下方有兩個標籤，Source和Design。
我們點一下Design標籤，拖拽界面就出來了，如圖：
可以看出，左邊的大片空白是畫圖區。右側上方Component是組件列表，中間Hierarchy是已畫好的組件的結構樹，下方Properties是組件的layout及屬性。
隨便拖幾個組件試試看。如圖：
有時候，在界面上拖拽並不方便，這時候可以在Hierarchy裏進行拖拽。
弄好之後，點保存，再點Source，會發現生成了很多的代碼。
這裏需要注意的是，這兩個標籤互相轉換時，會進行一些操作。我猜測是這樣的：當從Source轉到Design時，插件會遍歷帶有AutoGenerated標記的代碼，然後試圖把界面呈現出來；反過來，從Design轉回到Source 時，插件又重新把Autogenerated的代碼生成一遍。
所以不要輕易改動帶有AutoGenerated標記的代碼，否則會導致不能打開Design標籤，不過也不用緊張，如果打不開，它會說哪句代碼它不懂，你把那句代碼從AutoGenerated的代碼中刪掉就好了。
我裏講點我的經驗：
我一般也就是用Vaadin Editor進行組件設計，弄好之後，就使用Eclipse的Java Editor進行代碼修改。我感覺Java Editor寫碼時更好用一些。要想用Java Editor進行代碼編輯，右鍵點中.java文件，然後在Open with中選擇Java Editor。 
好了，我們把剛纔寫好的Composite加到頁面去，看看效果。
修改VaadintestApplication的代碼，如下：
public class VaadintestApplication extends Application {
@Override
public void init() {
Window mainWindow = new Window("Vaadintest Application");
TestComposite testComposite = new TestComposite();
mainWindow.setContent(testComposite);
setMainWindow(mainWindow);
}
}然後把Tomcat重新啓動一遍。建議在編輯代碼時，把Tomcat先關掉，編好後再重新啓動一下比較好。
顯示效果如下：
