Windows 每個 Web 應用都有一個主窗口。主窗口(Main windows) 為應用程序級窗口，或是指 UI層次的根元素。實際上 Web 應用可以包含多個應用程序級(application level)窗口,這些窗口都和Application 對象關(guān)聯(lián)。每個根窗口還可以包含多個子窗口。
UI 組件，每個應用的用戶界面都由這些UI組件組合而成，用戶通過這些 UI 組件和應用程序交互，用戶通過 UI 組件觸發(fā)事件，Web 應用通過事件處理函數(shù)來響應用戶。大部分的 UI 組件支持數(shù)據(jù)綁定。這些 UI 組件包括 Label,Button，Checkbox 等，程序員可以通過繼承或組合來定義用戶界面。
Events 和 Listener Event 為事件，Listener 用來處理事件。
資源應用程序可以在頁面上顯示圖像，超鏈接等，這些為資源文件，Vaadin 支持多種資源種類。
顯示主題 Vaadin 將 UI 顯示的表述(Presentation)和邏輯(Logic)分開. 其中 UI 邏輯由對應的 Java 代碼處理。而採用主題通過 CSS 來定義 UI 顯示。Vaadin 內(nèi)置多種顯示主題，開發(fā)人員也可自定義主題。
數(shù)據(jù)綁定 Vaadin 定義了數(shù)據(jù)模型，使用這種數(shù)據(jù)模型，UI 組件可以綁定到數(shù)據(jù)源，比如變數(shù)，數(shù)組，資料庫的表。
主窗口

一般來說一個 Vaadin Web 應用只有一個主窗口(Main Windows)。一般在 Application 對象中通過 setMainWindow() 設置主窗口。

import com.vaadin.ui.*;

public class HelloWorld extends com.vaadin.Application {
    public void init() {
        Window main = new Window("The Main Window");
        setMainWindow(main);

        ... fill the main window with components ...     }}

定義了主窗口之後，可以通過主窗口的 addComponent 為主窗口添加其它 UI 組件。這些 UI 組件將使用主窗口的預設布局來排列 UI 組件，如果你需要使用其它布局方法，可以通過 setContent()定義新的布局。

子窗口

Vaadin 的窗口有兩種類型，一種為應用程序級(Application level)的窗口，如上面的主窗口，另外一種為子窗口，顯示在某個應用程序級的窗口中。

子窗口的創(chuàng)建和關(guān)閉，子窗口也是 Window 對象，通過 addWindow 添加到主窗口中，關(guān)閉子窗口是通過 Application 對象的 removeWindow() 方法。

//open a window
mywindow = new Window("My Window");
mainwindow.addWindow(mywindow);
...
//close a window
myapplication.removeWindow (mywindow);

子窗口預設可以通過右上方的關(guān)閉按鈕關(guān)閉，可以通過將子窗口設為 readonly 禁止用戶提供關(guān)閉按鈕關(guān)閉子窗口。

可以通過 setHeight, setWidth ,setPositionX,setPositionY 來設置窗口的大小和在屏幕的位置。

/* Create a new window. */
mywindow = new Window("My Dialog");
/* Set window size. */
mywindow.setHeight("200px");
mywindow.setWidth("400px");
/* Set window position. */
mywindow.setPositionX(200);
mywindow.setPositionY(50);

如果子窗口的大小為固定或者通過比例定義，當它顯示的內(nèi)容過大時，會自動出現(xiàn)滾動條。但如果子窗口某方向大小為定義時，則其大小會自動適應需顯示的內(nèi)容而不會出現(xiàn)滾動條。

Vaadin 的窗口也支持所謂模式窗口，通常對話框顯示為模式窗口。下圖為一模式窗口，其父窗口為灰色顯示：

http://wiki.jikexueyuan.com/project/vaadin-web-development-tutorial/images/114.png" alt="" />

事件處理

Vaadin 事件處理也是通過為UI組件添加 Listener 的方法來實現(xiàn)的，使用 Listener 有三種基本用法，下面以一個 Button 為例來說明這幾種基本用法。

這裡定義一個事件處理類來處理 Button 的 Click 事件

public class TheButton implements Button.ClickListener {
    Button thebutton;

    /** Creates button into given container. */
    public TheButton(AbstractComponentContainer container) {
        thebutton = new Button ("Do not push this button");
        thebutton.addListener(this);
        container.addComponent(thebutton);
    }

    /** Handle button click events from the button. */
    public void buttonClick (Button.ClickEvent event) {
        thebutton.setCaption ("Do not push this button again");
    }
}

一個應用中通常需要處理來自同一個類的多個UI對象觸發(fā)的事件，比如多個 Button，此時在 Listener中需要區(qū)分事件是由哪個 Button 觸發(fā)的。Vaadin 支持多種方法來解決這個問題。一是通過 event 的getButton 方法，如下：

public class TheButtons implements Button.ClickListener {
    Button thebutton;
    Button secondbutton;

    /** Creates two buttons in given container. */
    public TheButtons(AbstractComponentContainer container) {
        thebutton = new Button ("Do not push this button");
        thebutton.addListener(this);
        container.addComponent(thebutton);

        secondbutton = new Button ("I am a button too");
        secondbutton.addListener(this);
        container.addComponent (secondbutton);
    }

    /** Handle button click events from the two buttons. */
    public void buttonClick (Button.ClickEvent event) {
        if (event.getButton() == thebutton)
            thebutton.setCaption("Do not push this button again");
        else if (event.getButton() == secondbutton)
            secondbutton.setCaption("I am not a number");
    }
}

第二種方法是使用 addListener 的另外一個重載方法，這個方法可以將事件處理方法做為參數(shù)。如下例，參數(shù)類型為字元串，為事件處理函數(shù)的名稱。

public class TheButtons2 {
    Button thebutton;
    Button secondbutton;

    /** Creates two buttons in given container. */
    public TheButtons2(AbstractComponentContainer container) {
        thebutton = new Button ("Do not push this button");
        thebutton.addListener(Button.ClickEvent.class, this,
                              "theButtonClick");
        container.addComponent(thebutton);

        secondbutton = new Button ("I am a button too");
        secondbutton.addListener(Button.ClickEvent.class, this,
                                 "secondButtonClick");
        container.addComponent (secondbutton);
    }

    public void theButtonClick (Button.ClickEvent event) {
        thebutton.setCaption ("Do not push this button again");
    }

    public void secondButtonClick (Button.ClickEvent event) {
        secondbutton.setCaption ("I am not a number!");
    }
}

第三種方法為匿名函數(shù)方法，這也是最簡單的一種方法，無需定義新的類來處理事件。如下：

public class TheButtons3 {
    Button thebutton;
    Button secondbutton;

    /** Creates two buttons in given container. */
    public TheButtons3(AbstractComponentContainer container) {
        thebutton = new Button ("Do not push this button");

        /* Define a listener in an anonymous class. */
        thebutton.addListener(new Button.ClickListener() {
            /* Handle the click. */
            public void buttonClick(ClickEvent event) {
                thebutton.setCaption (
                        "Do not push this button again");
            }
        });
        container.addComponent(thebutton);

        secondbutton = new Button ("I am a button too");
        secondbutton.addListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                secondbutton.setCaption ("I am not a number!");
            }
        });
        container.addComponent (secondbutton);
    }
}

事件通常由系統(tǒng)觸發(fā)，但也可以通過方法 fireEvent 來觸發(fā)某個事件。

Tags: Java EE, Vaadin, Web

上一篇：UI 布局-Panel下一篇：UI 組件-Link