複数コンポーネントをレイアウトする
では、再びソースコードに戻りましょう。基本の形は分かったので、今度はもう少しコンポーネントをいろいろと使ってページを作成してみます。
package com.example.myvaadin;
import com.vaadin.Application;
import com.vaadin.ui.*;
public class MyvaadinApplication extends Application {
Label label = null;
TextField field = null;
@Override
public void init() {
Window mainWindow = new Window("Myvaadin Application");
VerticalLayout layout = (VerticalLayout) mainWindow.getContent();
Label h1 = new Label("<h1>Vaadin Sample</h1>",Label.CONTENT_XHTML);
layout.addComponent(h1);
label = new Label("こんにちは！");
layout.addComponent(label);
HorizontalLayout formlayout = new HorizontalLayout();
formlayout.setSpacing(true);
layout.addComponent(formlayout);
field = new TextField();
formlayout.addComponent(field);
Button button = new Button("クリック");
formlayout.addComponent(button);
setMainWindow(mainWindow);
}
}
使用するコンポーネントについて
実行すると、テキストの他、入力フィールドやプッシュボタンなどが表示されます。ここでは、「TextField」「Button」といったコンポーネントを使っています。これらが入力フィールドやプッシュボタンを提供してくれます。
実際に使ってみると分かりますが、これらは、HTMLの「素のコントロール」とは違います。ルックアンドフィールが明らかに独自のものになっています。Vaadinが、単にHTMLのタグを生成し出力しているわけではなく、独自に用意されたリッチなコントロールを出力していることが分かります。
また、Labelでは、値にHTMLのタグをそのまま使っていることに気づきます。Labelでは、HTMLタグを記述することで、そのままHTMLによる表示を行うことができます。ただし、そのためには、newする際、第2引数にLabel.CONTENT_XHTMLを指定し、XHTMLの値が設定されることを指定しなければいけません。これを忘れると、タグがそのままテキストとして表示されてしまいます。
レイアウトについて
今回はコンポーネントを配置するのに、「レイアウト」と呼ばれるオブジェクトを利用しています。これは、AWTなどで言うなら、「レイアウトマネージャが組み込まれたコンテナ」のようなものと考えてください。今回は以下の2つのレイアウトを使っています。
- VerticalLayout：縦にコンポーネントを配置していくレイアウト
- HorizontalLayout：横にコンポーネントを配置していくレイアウト
これらは、Layoutというクラスを継承して作られています。Layoutは、コンポーネントを自身の中に組み込むことができます。そういう意味では、これはコンテナの一種です。しかし、ただ組み込むだけでなく「組み込まれたコンポーネントをどのように配置していくか」というレイアウトマネージャに相当する機能も持っているのです。
Windowには、デフォルトでVerticalLayoutが組み込まれています。そこで、組み込まれたコンテンツを取得するための「getContent」を使ってVerticalLayoutを取得し、これにコンポーネントを組み込んでいます。また、ここではTextFieldとButtonを横に並べて配置するため、HorizontalLayoutにこれらのコンポーネントを組み込み、それからVerticalLayoutに組み込みを行っています。
Layoutへのコンポーネントの組み込みは、Windowと同様、「addComponent」メソッドで行います。ここではWindowに組み込み済みのものを取得して使っているのでaddComponentは不要ですが、独自にLayoutを用意する場合には、必要に応じてLayoutの中にコンポーネントを組み込み、そのLayoutを更にWindowにaddCompoentして利用します。
また、ここではLayoutの「setSpacing」というメソッドも使っています。これは、それぞれのコンポーネントを隙間なく配置するのでなく、周囲にスペースを明けて配置するためのものです。これをtrueにすることで、コンポーネントは余裕を持った配置となります。同様に、マージンをONにするための「setMargin」というメソッドも用意されています。
