Javaで軽快に使える「軽量フレームワーク」特集
～リッチなGUIを構築する「Vaadin」（2）

第11回

その他のリストの仲間

　こうした<select>とほぼ同じコンポーネントの他に、Vaadin独自のちょっと変わった選択リストも用意されています。「TwinColSelect」は、左側にある項目を右側に移動させる方式の選択リストです。先ほどのサンプルコードで、new ListSelectの文を次のように書き換えてみましょう。

TwinColSelect list = new TwinColSelect("リスト",data);

TwinColSelectによる項目を移動する方式の選択リスト

　これで、画面には2つのリストと2つのボタンが組み合わせられたコンポーネントが現れます。左側にあるリストを選択し、［>>］ボタンを押すと、右側に移動します。この「右側に移動された項目」が、通常の選択リストの「選択された項目」として扱われるわけです。視覚的に表現できるため、使いやすいコンポーネントです。

　また、ラジオボタンも、選択リストとほぼ同じようなクラスとして用意されています。「OptionGroup」というクラスですが、扱いはListSelectなどとまったく同じです。唯一違うのは、「setRowsで表示する項目数を設定できない」ということぐらいでしょう。先のサンプルの、new ListSelect部分を、次のように書き換えてみましょう。

OptionGroup list = new OptionGroup("リスト",data);

OptionGroupによラジオボタン

　このとき、併せてsetRows文は削除しておきます。これで、ラジオボタンが表示されます。確かに、ラジオボタンというのは、名前こそ「ボタン」ですが、働きなどを考えるとこれは「リスト」の仲間としたほうがおさまりがよいでしょう。

　また、テキスト入力と項目の選択を組み合わせたコンボボックスも用意されています。これは「ComboBox」というクラスになります。やはりnew ListSelect部分を、次のように書き換えて実行してみると、コンボボックスでリストが表示されます。

ComboBox list = new ComboBox("リスト",data);

OptionGroupによラジオボタン

　コンボボックスは、ポップアップして現れるリストと、テキストを入力するフィールドが組み合わせられており、どちらでも入力できます。

スライダーによるアナログ入力

　ある一定の範囲内から値を選択する場合、アナログ的に値を入力するスライダーが多用されます。これは「Slider」というクラスとして用意されています。ノブをマウスでドラッグして動かし、アナログ的に値を入力するインターフェースです。これは次のようにしてインスタンスを作成します。

new Slider( ラベル );

　引数には、ラベルとして設定するテキストを指定します。これは、スライダーの上に説明文として表示されます。インスタンスを作成したら、後は必要な設定を行って利用します。

public void init() {
	mainWindow = new Window("Myvaadin Application");
	VerticalLayout layout = (VerticalLayout)mainWindow.getContent();
	layout.setMargin(true);
	layout.setSpacing(true);
	Slider slider = new Slider("0から100までの値を選択：");
	slider.setWidth("200px");
	slider.setMin(0);
	slider.setMax(100);
	slider.setImmediate(true);
	slider.addListener(new ValueChangeListener() {
		@Override
		public void valueChange(ValueChangeEvent event) {
			mainWindow.showNotification("VALUE: " + event.getProperty().getValue());
		}
	});
	layout.addComponent(slider);
	setMainWindow(mainWindow);
}

スライダーはノブをドラッグしてアナログ的に入力をする

　これは、0～100までの値を選択するスライダーのサンプルです。マウスでノブの部分を左右にドラッグすると、リアルタイムに現在の値が表示され、ノブを離すと、設定した値がページ内に浮かび上がります。ここでは、スライダーを作成した後、次のようなメソッドを呼び出しています。

• setWidth：横幅を設定します。これにより、スライダーの長さが決まります
• setMin：スライダーの最小値を指定します
• setMax：スライダーの最大値を指定します
• setImmediate：イベントを即座に発行するためのものです。trueにすると即時イベントが発行されます

　Sliderの場合、最低でもsetMin／setMaxは設定する必要があります。また、ドラッグ終了時に何らかのイベント処理を行わせるなら、setImmediateの設定も必要となります。ほかにも覚えておきたいメソッドとしては、次のようなものがあります。

• setOrientation：スライダーを水平・垂直に表示するための設定です。Sliderクラスに用意されているORIENTATION_VERTICALに設定すると、垂直に表示されます

値が変更されたときのイベント処理

　また、ここではaddListenerで「ValueChangeListener」というイベントリスナーを組み込んでいます。これは、値が変更されたときに発生するイベントの処理用リスナーです。「valueChange」というメソッドが1つ用意されており、値が変更されると呼び出されます。このメソッドでは「ValueChangeEvent」というインスタンスが渡されます。

　ValueChangeListenerによるイベントは、setImmediateをtrueに設定しておかなければうまく発生しません。ValueChangeListenerは他のコンポーネントでも多用されるので、覚えておきましょう。