テキストエリアとリッチテキストエリア
1行の入力を行うTextFieldは前回登場しましたが、複数行の入力（HTMLで言う<textarea>タグに相当するもの）は何を使うのでしょう。実はこれも「TextField」を利用します。TextFieldには、次のようなメソッドが用意されています。
《TextField》.setRows( 行数 ); 《TextField》.setColumns( 文字数 );
このようにして行数と文字数を指定することで、複数行を入力可能なTextFieldを作ることができます。見た目もHTMLのテキストエリアとそれほど大きな違いはなく、これだけなら特に注目するほどのものではありません。Vaadinの強力なところは、このほかにリッチテキストのためのテキストエリアが用意されているという点でしょう。
public void init() {
mainWindow = new Window("Myvaadin Application");
VerticalLayout layout = (VerticalLayout)mainWindow.getContent();
layout.setMargin(true);
layout.setSpacing(true);
RichTextArea textarea = new RichTextArea();
textarea.setWidth("400px");
textarea.setHeight("200px");
layout.addComponent(textarea);
setMainWindow(mainWindow);
}
リッチテキストのテキストエリアは「RichTextArea」というクラスとして用意されています。これは、そのまま作成して組み込むだけで、テキストの属性を設定するためのツールバーを持ったテキストエリアが表示されます。ここではsetWidth／setHeightで大きさを調整しているだけで、他には何もしていません。
では、記述されたマルチフォントのテキストはどのような形で保管されているのでしょうか。これは、そのままHTMLのコードになっているのです。というより、RichTextAreaの機能は、選択したテキストにHTMLのタグを挿入することでマルチフォントを実現していたのです。
従って、RichTextAreaからgetValueで値を取り出せば、記述されたテキストをHTMLのソースコードとして取り出すことができます。そのままLabelなどにsetValueすれば、マルチフォントのままテキストを表示できます（もちろん、Label生成時にLabel.CONTENT_XHTMLを指定してHTMLのソースコードを設定可能にしておく必要はあります）。
チェックボックスについて
チェックボックスは、Vaadinのコンポーネントの中でも比較的HTML本来のコントロールに近いものです。これは「CheckBox」というクラスとして用意されています。これは表示するテキストを引数に指定し、次のようにしてインスタンスを作成します。
CheckBox check = new CheckBox("チェックボックス");
チェックボックスをクリックした時のイベントは、Buttonなどと同様、Button.ClickListenerをaddListenerで組み込んで処理できます。
CheckBoxで注意すべきは、値の取得方法です。CheckBoxは、ON／OFF状態を真偽値で設定するものなので、一般的なgetValueではなく、「booleanValue」というメソッドを使います。これはbooleanとして値を取得するもので、これにより選択状態が得られます。
選択リストについて
HTMLでは、多数の項目を表示するのに<select>タグによる選択リストを用います。これもVaadinではコンポーネントとして用意されています。
public void init() {
mainWindow = new Window("Myvaadin Application");
VerticalLayout layout = (VerticalLayout)mainWindow.getContent();
layout.setMargin(true);
layout.setSpacing(true);
List<String> data = Arrays.asList(new String[]{"One","Two","Three"});
ListSelect list = new ListSelect("リスト",data);
list.setRows(5);
list.setNullSelectionAllowed(false);
list.select("One");
layout.addComponent(list);
setMainWindow(mainWindow);
}
これは、選択リストを表示する例です。選択リストは「ListSelect」というクラスとして用意されています。これは、表示する項目をListインスタンスとして用意し、これを引数に指定してnewします。ここでは、これ以外にも次のようなメソッドを呼び出して設定を行っています。
- setRows：表示する項目数を設定する
- setNullSelectionAllowed：まったく選択されない状態を許可するかどうか
- select：指定した項目を選択状態にする
ほかにも、複数項目を選択可能にするために「setMultiSelect」というメソッドが用意されていたりします。基本的な使い方は、<select>タグの使い方を思い起こせば大体イメージできるでしょう。
