所用 UI 組件都實(shí)現(xiàn) Component 介面，AbstractComponent 為所有 UI 組件的根類，它有兩個(gè)直接子類： AbstractField（實(shí)現(xiàn) Field 介面），它提供了對(duì)數(shù)據(jù)綁定的支持。另外一個(gè)子類為AbstractComponentContainter，為所有容器類（Container）和布局類（Layout）的父類。對(duì)於一些不需要支持?jǐn)?shù)據(jù)綁定的類，如 Label,Link 等直接由 AbstractComponent 派生。

布局（Layout）類用於管理其包含的其它 UI 組件的位置及大小。常見的布局有 GridLayout，VerticalLayout 等和 Swing 提供的非常類似。此外 Vaadin 提供了一個(gè) CustomLayout 組件，支持使用 XHTML 模板來描述用戶界面。

由上圖可以看到 Windows 類引用到 ComponentContainer，ComponentContainer 實(shí)現(xiàn)了 Layout介面。因此 Window 對(duì)象可以包含UI組件樹來顯示用戶界面。

Vaadin 庫內(nèi)置了大量 UI 組件，此外很多 UI 組件可以以插件的形式添加到項(xiàng)目中，或者使用自定義的 UI 組件。

Vaadin UI 組件通過定義一些所用 UI 組件都支持的介面和抽象類實(shí)現(xiàn)UI組件通用的邏輯。以及這些 UI組件的狀態(tài)在 Client/Server 之間如何 serialized/deserialized.

下圖為 Component 的相關(guān)介面及抽象類之間的類關(guān)係圖：

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

所有 Component 都實(shí)現(xiàn) Paintable 介面，這個(gè)介面用來把 UI 組件 serializing (「繪製」)到客戶端。而介面 VariableOwner 則為方向 deserializing UI 組件的狀態(tài)到伺服器端。

使用 UI 組件定義用戶界面，所涉及到的 UI 組件構(gòu)成一個(gè)樹結(jié)構(gòu)?？梢酝ㄟ^ getParent() 取得某個(gè)UI 組件的父組件。將一個(gè) UI 組件添加到某個(gè)容器時(shí)將觸發(fā) UI 組件的 attach() 方法，反之，移除某個(gè) UI 組件時(shí)則觸發(fā) detach() 方法。通常在 UI的 attach() 方法中獲取 UI 組件所需資源，例如：

public class AttachExample extends CustomComponent {
    public AttachExample() {
    }

    @Override
    public void attach() {
        super.attach(); // Must call.

        // Now we know who ultimately owns us.
        ClassResource r = new ClassResource("smiley.jpg",
                                            getApplication());
        Embedded image = new Embedded("Image:", r);
        setCompositionRoot(image);
    }
}

AbstractComponent 為所有 Component 的基類，它的 getTag 方法可以取得該 component 用於序列化的唯一標(biāo)識(shí)符。

Field 組件和某個(gè)值關(guān)聯(lián)，用戶可以修改這個(gè)值，比如 Text 組件的文字。下圖為 Field 組件的類關(guān)係圖：

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

Field 組件實(shí)現(xiàn)了 Field 介面以支持?jǐn)?shù)據(jù)綁定。可以使用 getValue, setValue 修改或獲取 Field 組件組件關(guān)聯(lián)的值。Field 組件具有下面屬性：

description 所有 Field 組件都有說明域。
required 當(dāng)為真時(shí)，必填標(biāo)識(shí)（一般為*)會(huì)顯示在對(duì)於的 UI 組件的左邊，上方（取決於對(duì)應(yīng)的布局類）。如過 Field 組件必需有值而未提供時(shí)，此時(shí) requiredError 不空時(shí)將顯示錯(cuò)誤標(biāo)識(shí)。
requiredError 必填 Field 組件為空顯示個(gè)用戶的錯(cuò)誤提示。
Field 介面繼承 Property.ValueChangeListener 允許應(yīng)用監(jiān)控 UI 組件值的變化。

此外所用 Component 具有的屬性還有 Caption（標(biāo)題），Tooltip（提示），Enabled，Icon，Locale，ReadOnly 等，在後面將有介紹。

Tags: Java EE, Vaadin, Web

上一篇：UI 組件-Table 組件下一篇：UI 布局-TabSheet 布局