メニューバーの作成
さまざまな処理を呼び出すためのインターフェースとして、一般のアプリケーションで多用されているのがメニューバーです。Webアプリケーションでも、最近はメニューバーを持つサイトが増えてきました。しかし、メニューバー（特に階層メニュー）は、多数のオブジェクトが入れ子構造になっており、作るのも管理するのも面倒そうです。
Vaadinでは、非常に簡単にメニューバーを作るコンポーネントが用意されています。「MenuBar」と「MenuItem」というもので、MenuBarがメニューバーを管理するもの、MenuItemが実際にメニューバーに組み込まれるメニュー項目のコンポーネントです。
MenuBar／MenuItemには「addItem」というメソッドが用意されており、これを呼び出すことでMenuItemを組み込むことができます。MenuBarに組み込んだものはそのままメニューバーにメニューとして表示され、組み込まれたMenuItemにさらにMenuItemを組み込めばそのメニューに表示されるメニュー項目に、さらにその中にMenuItemを組み込めばサブメニューの項目として表示されます。MenuItemを組み込んでいくことで、どんどん階層的なメニューが作成されるわけです。
public void init() {
mainWindow = new Window("Myvaadin Application");
VerticalLayout layout = (VerticalLayout)mainWindow.getContent();
layout.setMargin(true);
layout.setSpacing(true);
Command cmd = new Command() {
@Override
public void menuSelected(MenuItem selectedItem) {
mainWindow.showNotification(selectedItem.getText() + " を選択。");
}
};
MenuBar bar = new MenuBar();
MenuBar.MenuItem menu = bar.addItem("メニュー",null);
menu.addItem("メニュー項目1", cmd);
menu.addItem("メニュー項目2", cmd);
menu.addSeparator();
MenuBar.MenuItem item = menu.addItem("メニュー項目3",null);
item.addItem("サブ項目1", cmd);
item.addItem("サブ項目2", cmd);
layout.addComponent(bar);
setMainWindow(mainWindow);
}
このサンプルでは［メニュー］というメニューに3つのメニュー項目を用意し、さらに3番目のメニュー項目にはサブメニューを2つ用意しています。各メニューは、選ぶと選択したメニュー名が表示されるようになっています。ここではMenuBarをnewで作成した後、addItemで項目を追加していますが、このメソッドは次のような形で呼び出します。
《MenuBar/MenuItem》.addItem( 表示するテキスト ,《Command》);
第1引数に指定したテキストがそのままメニューに表示されます。第2引数には、Commandクラスのインスタンスを渡します。これは、メニューを選んだ時に実行する処理を管理するためのインターフェースで、menuSelectedというメソッドを1つ持っています。引数には選択したメニュー項目であるMenuItemインスタンスが渡されます。
メニューを階層的に組み込むときに注意するべきことは、addItem時の第2引数のCommandです。あるMenuItemに、さらにサブ項目があるとき、そのMenuItemにはCommandを指定してはいけません。例えばこのサンプルでは、"メニュー"と"メニュー項目3"では、addItem時に第2引数にはnullが指定されていることが分かります。
Commandは、メニューを選択したときに処理を実行することです。サブメニューを持つメニューは、それを選んだ時にサブメニューを表示するだけで何かの処理を実行することはありません。Commandを指定してしまうと、サブメニューの表示よりそのCommandの実行が優先されてしまい、サブメニューが表示されなくなってしまいます。
Panelによる表示
コンポーネントについて一通り説明しましたので、次はコンテナについて取り上げましょう。コンテナは、自身の中にコンポーネントを組み込み表示するタイプのコンポーネントで、AWT／Swingでもおなじみです。
コンテナのもっとも基本となるのはパネルというものです。これは「Panel」というクラスとして用意されています。new Panelで新しくインスタンスを作成し、そこに「addComponent」でコンポーネントを組み込んでいきます。
public void init() {
Window mainWindow = new Window("Myvaadin Application");
setMainWindow(mainWindow);
VerticalLayout layout = (VerticalLayout) mainWindow.getContent();
layout.setMargin(true);
layout.setSpacing(true);
Panel panel = new Panel("※これがパネルです。");
panel.setWidth("300px");
panel.setHeight("200px");
VerticalLayout playout = (VerticalLayout) panel.getContent();
playout.setMargin(true);
playout.setSpacing(true);
layout.addComponent(panel);
String s = "<h2>Panel</h2><p>パネルは、コンポーネントをまとめるコンテナです。</p>";
Label label = new Label(s,Label.CONTENT_XHTML);
playout.addComponent(label);
}
実際に使ってみると、Panelの働きがよく分かります。この例では、ページ内に四角いエリアが表示され、その中にテキストが表示されます。このエリアがPanelなのです。Panelを利用することで、ページ内に独立したエリアを用意しコンテンツを配置できます。
