ボタンのクリックイベント
では、配置したボタンにイベント処理を追加してみましょう。これは、Buttonインスタンスの「addListenr」を使って行うことができます。先ほどのサンプルのinitメソッドで、new Buttonの後に以下を追加してみましょう。
// import com.vaadin.ui.Button.*; を追加しておく
button.addListener(new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
Object s = field.getValue();
label.setValue(s);
}
});
クリックすると、入力されたテキストを取得し、メッセージを表示します。ごく簡単なものですが、イベント処理の仕組みを知るためのサンプルと考えてください。
イベント処理は、AWTなどと同様にイベントリスナーをコンポーネントに組み込んで行います。AWTなどでイベントの種類ごとにリスナー組み込みメソッドが用意されていましたが、Vaadinのコンポーネントでは「addListener」というメソッド1つだけです。どんなイベントリスナーであれ、このメソッドで組み込めばOKなのです。
ここでは「Button.ClickListener」というイベントリスナーを組み込んでいます。これはボタンをクリックした時のイベント処理を行うためのもので、「buttonClick」というメソッドが1つ用意されています。ここにクリック時の処理を記述しておけばよいのです。
今回は、TextFieldに入力された値を取り出し、Labelに表示をしています。入力されたテキストの値は「getValue」で取り出し、Labelへのテキスト表示は「setValue」で行っています。このように、値を表示したり入力したりするコンポーネントでは、ほぼgetValue／setValueで共通して値のやりとりが行えます。
内部ウインドウを表示する
では、更に新しいコンポーネントを使ってみましょう。といっても、ボタンだの入力フィールドだのといったものばかりだと「結局、HTMLのコントロールと同じものをただJavaのコードで作ってるだけじゃないか」と思われそうです。では、Vaadinらしいコンポーネントを使ってみることにしましょう。
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)subWindow.getContent();
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(){
Window subWindow = new Window("Sub Window");
subWindow.setPositionX(100);
subWindow.setPositionY(100);
Label sublabel = new Label("This is Sub Window.");
subWindow.addComponent(sublabel);
mainWindow.addWindow(subWindow);
}
}
これは、ページ内にウインドウ（内部ウインドウ）を表示するサンプルです。ボタンをクリックすると、次々と新しいウインドウが現れます。このウインドウは、タイトルバーをドラッグして動かせるし、右下の部分をドラッグすればリサイズできます。もちろん、クリックしたウインドウは1番手前に移動しますし、クローズボックスをクリックして閉じることもできます。見たところ、普通のウインドウとまったく違いはありません。
内部ウインドウの設定と組み込み
ここでは、「addSubWindow」というメソッドで、新しいウインドウの作成を行っています。しかし、ここでやっていることは、実は既に説明したことなのです。すなわち、Windowインスタンスを作り、そこにコンポーネントなどを組み込む、といった作業です。メインウインドウであるmainWindowを作成したのとまったく同じことをやっているだけです。唯一の違いは、setMainWindowではなく、mainWindowの「addWindow」でウインドウを組み込んでいる、という部分だけです。これで、ウインドウをこのウインドウの中に組み込むことができます。
また、メインウインドウと違い、こちらは独立したウインドウとして表示されるので、位置や大きさなどを指定する必要があります。これらは次のようなメソッドで行うことができます。
《Window》.setPositionX( int値 ); 《Window》.setPositionY( int値 ); 《Window》.setWidth( String値 ); 《Window》.setHeight( String値 );
ちょっと不思議なのは、位置を指定するsetPositionX／setPositionYがint値を引数に指定するのに対し、縦横幅を設定するsetWidth／setHeightはString値を指定する、という点でしょう。String値と言うと奇妙な感じがするでしょうが、これは「100px」というように、単位指定のされた値を記述するようになっているためです（以前のバージョンでは、float値で指定するメソッドも用意されていましたが、現在は非推奨となっているようです）。
