複数コンポーネントをレイアウトする
では、再びソースコードに戻りましょう。基本の形は分かったので、今度はもう少しコンポーネントをいろいろと使ってページを作成してみます。
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); } }
![修正されたページ。Label、TextField、Buttonといったコンポーネントが配置されている](http://cz-cdn.shoeisha.jp/static/images/article/4923/12s.gif)
使用するコンポーネントについて
実行すると、テキストの他、入力フィールドやプッシュボタンなどが表示されます。ここでは、「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
」というメソッドも用意されています。