Hello Vaadin

Vaadin 是什麼？

一個 Java Web Framework，和以前用過的 SpringMVC Framework 或 Struts 2 相當的不同。

Vaadin 由 Server side 掌控 Client side，用類似 AWT 或 Android UI 的開發方式來開發 Web，簡言之，可以在不碰 Client side 技術（HTML、Javascript 與 CSS）的前提下完成一個網站。

這樣的設計模式優點在於，只要用 Java 就可以完成所有事情，而且不用管瀏覽器不相容的問題。

直接開工吧！

環境安裝

JavaSDK  必須 6 以上，建議用 8。

Eclipse IDE for Java EE Developers，目前用的是 Luna。

Apache Tomcat 8。

Apache IvyDE Plugin - Eclipse Plugin，Vaadin Plugin 需要，Update site 為 http://www.apache.org/dist/ant/ivyde/updatesites，勾選如下圖。

Vaadin Plugin - Eclipse Plugin，Update site 為 http://vaadin.com/eclipse，由於是透過 Ivy 下載 Vaadin 需要的 library，所以要安裝很久。

嗨，你好！

Eclispe > File > New... > Project... > Vaadin > Vaadin 7 Project

基本上只要輸入 Project name 就夠了，但為了在 Eclipse 裡起 Tomcat，Target runtime 也要設定，如果沒有安裝 Tomcat，可以現在安裝。

其他預設值只要確定沒問題就可以了，按 Next。

不知道為何「Generate web.xml...」預設沒有勾選，還是勾起來吧。

建立完成，預設目錄檔案如下。

打開 Servers View，若沒有想要的 Tomcat，可以按右鍵 > New...來建立，記得將剛建立的 Vaadin project 加入。

然後在 Servers View 找到剛建立的 Tomcat，按右鍵 > Start 或 Debug，完成後，開瀏覽器到 http://localhost/HelloVaadin，port 要看 Tomcat 的設定。

噹，一行 Client side 程式都沒寫到，就完成一個小小的功能。

發生什麼事了？

先來看看唯一的一隻 Java，HellovaadinUI.java。
@WebServlet 是 Servlet 3.0 以後才有的功能，重點在 init() 裡，建立 Layout 並設定，建立 Button 並加上 ClickListener，就這樣。

@SuppressWarnings("serial")
@Theme("hellovaadin")
public class HellovaadinUI extends UI {

 @WebServlet(value = "/*", asyncSupported = true)
 @VaadinServletConfiguration(productionMode = false, ui = HellovaadinUI.class)
 public static class Servlet extends VaadinServlet {
 }

 @Override
 protected void init(VaadinRequest request) {
  final VerticalLayout layout = new VerticalLayout();
  layout.setMargin(true);
  setContent(layout);

  Button button = new Button("Click Me");
  button.addClickListener(new Button.ClickListener() {
   public void buttonClick(ClickEvent event) {
    layout.addComponent(new Label("Thank you for clicking"));
   }
  });
  layout.addComponent(button);
 }

}

有趣的一點是，Vaadin 並不是將這些 Java 轉成 HTML 等等的 Client side 語言，而是全部都是用 Javascript 與 AJAX 來達成。

可以去看看產出網頁的原始碼就知道，可見的頁面都是 Javascript 產生的，所以在原始檔裡試看不到的，而且使用者每一個動作（互動）都是透過 AJAX 送回 Server side 處理的。

WebContent 目錄下可見的檔案只有一些 CSS 和 web.xml，web.xml 是一定要的，而 CSS 檔則表示 UI 是可以客制的。

另外在根目錄下可以看到 ivy.xml，這裡先看一個重要的設定。

<?xml version="1.0"?>
<!DOCTYPE ivy-module [
 <!ENTITY vaadin.version "7.3.6">
]>

設定 Vaadin 使用的版本。

這裡要分清楚的是，Vaadin Plugin 的版本和 Vaadin 的版本是不一樣的，Vaadin Plugin 是 Eclipse plugin，而 Vaadin 指的是 Vaadin Framework。

每個 Eclipse 只會有一個 Vaadin Plugin，但是每個 Vaadin project 可以使用不同的 Vaadin 版本，就是從 Ivy.xml 裡設定的。

Ivy.xml 設定後不會立即生效，得從專案名稱按右鍵 > Ivy > Resolve 來下載指定版本的 Vaadin，當然得花一些時間。

如果已經用過 Tomcat 後才更改 Vaadin 版本，得清空 Tomcat 的暫存檔，在 Servers View 找到 Tomcat 按右鍵 > Clean... 與 Clean Tomcat Work Directory...。

而 Vaadin Plugin 的更新則是從 Eclipse > Help > Check for Updates... 來的。
---
---
---