モーダルウインドウを作る
では、この内部ウインドウを少し修正し、モーダルウインドウとして表示させてみましょう。Windowクラスには、ウインドウの属性に関する多数のメソッドが用意されています。それらを設定することで、ウインドウの性質をいろいろと変更できます。
package com.example.myvaadin;
import com.vaadin.Application;
import com.vaadin.ui.*;
import com.vaadin.ui.Button.*;
public class MyvaadinApplication extends Application {
Window mainWindow = null;
@Override
public void init() {
mainWindow = new Window("Myvaadin Application");
VerticalLayout layout = (VerticalLayout)mainWindow.getContent();
layout.setMargin(true);
layout.setSpacing(true);
Label h1 = new Label("<h1>Vaadin Sample</h1>",Label.CONTENT_XHTML);
layout.addComponent(h1);
Button button = new Button("クリック");
button.addListener(new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
addSubWindow();
}
});
mainWindow.addComponent(button);
setMainWindow(mainWindow);
}
public void addSubWindow(){
final Window subWindow = new Window("Sub Window");
subWindow.setWidth("200px");
subWindow.setHeight("100px");
subWindow.setPositionX(100);
subWindow.setPositionY(100);
subWindow.setClosable(false);
subWindow.setResizable(false);
subWindow.setModal(true);
VerticalLayout layout = (VerticalLayout)subWindow.getContent();
Label sublabel = new Label("This is Sub Window.");
layout.addComponent(sublabel);
Button subbtn = new Button("Close");
subbtn.addListener(new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
mainWindow.removeWindow(subWindow);
}
});
layout.addComponent(subbtn);
layout.setComponentAlignment(subbtn, Alignment.BOTTOM_CENTER);
mainWindow.addWindow(subWindow);
}
}
ボタンをクリックすると、内部ウインドウが現れますが、これはモーダルになっており、ウインドウを閉じるまでウインドウ外の操作をすることができません。またウインドウサイズも変更できませんし、クローズボックスもなくなり閉じられなくなっています。ボタンの［Close］ボタンをクリックすればウインドウは閉じられます。
Windowの設定について
では、addSubWindowでどのような作業をしているのか見てみましょう。ここでは、次のようなメソッドを呼び出してウインドウの属性を変更しています。
- setClosable：ウインドウを閉じられるかどうかを真偽値で指定します。falseにするとクローズボックスが表示されなくなります
- setResizable：ウインドウの大きさを変更できるかどうかを真偽値で指定します。falseにすると、ウインドウの右下をドラッグしてリサイズできなくなります
- setModal：モーダルにするかどうかを真偽値で指定します。trueにすると、ウインドウを閉じるまでそれ以外の操作ができなくなります
ウインドウ関係の設定をするだけで、このように簡単にモーダルなウインドウを作ることができます。Windowを1つ使えるようになるだけで、ずいぶんと面白い表示が簡単に作れるようになりそうです。
終わりに
今回は、Vaadinのごく基本的なコンポーネントを使ってみました。ほんの導入部分だけでしたが、VaadinがどのようにWebアプリケーションを作成するのか、なんとなくイメージできたのではないでしょうか。
Vaadinを使い始めて間もないうちは、どうしても頭の中で「HTMLのこれこれの機能を実現するには、どういう機能が用意されているのだろうか」といった目で見てしまいます。しかし、実際に使っていくうちに、これはWebページというより、AWTなどを使ったGUIアプリケーションを作成しているのに近いものであることが分かるでしょう。
何しろ、Vaadinでは、HTMLの出番はまったくありません。スタイルシートすら、ここまで一度も登場しませんでした。またWeb作成でありがちな「まずはフォームを作って送信してみましょう」といったことも一切ありません。サンプルとしてボタンを作り、イベント処理を組み込みましたが、これはHTMLでのフォーム送信とはまったく別物であることは説明するまでもないでしょう。
実際には、ボタンをクリックした際に、Ajaxを使ってサーバ側とやりとりを行い処理が実行されているのですが、Vaadinではそうした部分はきれいに隠蔽され、プログラムを作っている人間には存在が見えなくなっています。プログラマは、ただごく普通のスタンドアロンなGUIアプリケーションを作るのとまったく同じ感覚でプログラムを作ればいいのです。「Webの開発をしていることを忘れてしまう」、Vaadinが目指しているのは、そういう開発スタイルかもしれません。
