タブパネルによる切り替え表示
Panelは、ただコンポーネントをまとめて表示するだけなので、あまりコンテナのメリットを感じられないかもしれません。しかし、コンテナはただコンポーネントをまとめるエリアを提供するだけのものではなく、重要なGUIとしての役割もあります。
例えば、タブパネルは、タブで表示を切り替えるコンテナです。タブパネルを使うことで、いくつかの表示を1つにまとめることができます。このタブパネルは、Vaadinでは「TabSheet」というクラスとして用意されています。これはインスタンス作成後、「addTab」というメソッドでタブを追加して使います。
public void init() {
Window mainWindow = new Window("Myvaadin Application");
setMainWindow(mainWindow);
VerticalLayout layout = (VerticalLayout) mainWindow.getContent();
layout.setMargin(true);
layout.setSpacing(true);
TabSheet sheet = new TabSheet();
sheet.setWidth("300px");
sheet.setHeight("200px");
Label l1 = new Label("<h2>１つ目のタブ</h2><p>最初のタブです。</p>",Label.CONTENT_XHTML);
Label l2 = new Label("<h2>２つ目のタブ</h2><p>次のタブです。</p>",Label.CONTENT_XHTML);
sheet.addTab(l1,"No,1",null);
sheet.addTab(l2,"No,2",null);
layout.addComponent(sheet);
}
これは、［No,1］［No,2］という2つのタブを持つTabSheetの例です。タブをクリックすることで、その下のエリアの表示が切り替わります。TabSheetは、new TabSheetした後、次のようにしてタブを追加します。
《TabSheet》.addTab( コンポーネント , ラベル , アイコン );
第1引数には、そのタブに組み込むコンポーネントを指定します。第2引数は、そのタブ部分に表示するテキストを指定します。第3引数はタブに表示するアイコンを指定するもので、これはThemeResourceという外部リソースを利用するためのクラスのインスタンスで指定します。ここではnullを指定していますが、アイコンのイメージファイルを用意しておき、これを読み込んで表示させることもできます。
アコーディオン方式の切り替え
一般的なタブパネルのほかに、最近ではアコーディオンパネルと呼ばれるものも多用されるようになってきました。これは、タブの部分をクリックすると、そのタブが上下に移動して、隠れていたエリアが表示されるインターフェースです。アコーディオンのようにタブが動くため、このように呼ばれます。
このアコーディオンパネルは、Vaadinでは「Accordion」というクラスとして用意されています。これは、クラス名が違うだけで、基本的な使い方はTabSheetとほとんど変わりありません。
public void init() {
Window mainWindow = new Window("Myvaadin Application");
setMainWindow(mainWindow);
VerticalLayout layout = (VerticalLayout) mainWindow.getContent();
layout.setMargin(true);
layout.setSpacing(true);
Accordion accordion = new Accordion();
accordion.setWidth("300px");
accordion.setHeight("200px");
Label l1 = new Label("<h2>１つ目のタブ</h2><p>最初のタブです。</p>",Label.CONTENT_XHTML);
Label l2 = new Label("<h2>２つ目のタブ</h2><p>次のタブです。</p>",Label.CONTENT_XHTML);
accordion.addTab(l1,"No,1",new ThemeResource("../sampler/icons/icon_info.gif"));
accordion.addTab(l2,"No,2",null);
layout.addComponent(accordion);
}
これは、先ほどのTabSheetのサンプルを、Accordionに書き換えたものです。といっても、変更しているのは、new TabSheetをnew Accordionにしている程度。他の処理はほぼ同じです。「複数のコンポーネントをタブで管理し、選択したタブに割り当てられているコンポーネントを表示させる」という基本的な仕組みはまったく同じであるため無理もありません。実際、Accordionは、TabSheetクラスのサブクラスとして作成されているのです。
まとめ
Vaadinは、今回紹介したように、通常のHTMLとはかなり違うリッチなGUIを提供してくれます。これこそがVaadinの最大の特徴であり、これらコンポーネントさえマスターすれば、Vaadinの機能の大半は使いこなせるようになった、といってもよいほどです。今回、かなりの数を紹介しましたが、まだこれで全部ではありません。ツリー表示やテーブルなど、まだまだ紹介していないものもあるのです。
コンポーネントの多くは、AWTやSwingなどと同じ感覚で扱うことができるので、それほど頭を悩ませることはないでしょう。ただし、細かなところで微妙に働きが違うことがあるので注意が必要です。例えば、値が変更されたときに発生するValueChangeイベントは、setImmediateをtrueに設定しないとProperty.ValueChangeListenerが呼び出されません。VaadinはJavaのフレームワークとはいえ、最終的にはすべてJavaScriptのコードに変換され出力されるので、どうしてもJavaScript特有の働きが残ってしまうところがあるようです。
多少の癖はありますが、ある程度慣れてしまえばそれほど頭を悩ませる問題ではありません。JavaScriptなしに、これほどのGUIを構築できるメリットを考えれば、Vaadinを導入する価値は十分あるでしょう。今回のコンポーネント類を、まずは実際に使ってみてください。「リッチなGUI」がどういうものか実感できるはずです。
