日時を入力するコンポーネント
日時の値は、一般の値と比べかなり特殊です。テキスト入力をしてもらいフォーマットをチェックするか、あるいは年月日の入力フィールドをそれぞれ用意するか、いろいろと苦心するところです。Vaadinでは、日時を視覚的に入力するためのコンポーネントが用意されており、簡単に入力を行うことができます。
日時関係のコンポーネントはいくつかあるのですが、1番多用されるのは「PopupDateField」でしょう。これはコンボボックスのように直接テキストを記述することもできますし、カレンダーをポップアップして選択し入力することもできます。
public void init() {
mainWindow = new Window("Myvaadin Application");
VerticalLayout layout = (VerticalLayout)mainWindow.getContent();
layout.setMargin(true);
layout.setSpacing(true);
final PopupDateField date = new PopupDateField("日付を選択：");
date.setResolution(PopupDateField.RESOLUTION_DAY);
date.setValue(new Date());
date.setLocale(Locale.JAPAN);
date.setImmediate(true);
date.addListener(new Property.ValueChangeListener() {
@Override
public void valueChange(ValueChangeEvent event) {
SimpleDateFormat formatter = new SimpleDateFormat("yyyy年MM月dd日(E)");
String str = formatter.format(date.getValue());
mainWindow.showNotification(str);
}
});
layout.addComponent(date);
setMainWindow(mainWindow);
}
簡単な使用例をあげておきます。PopupDateFieldは入力フィールド右端にあるアイコンをクリックすると、画面にカレンダーがポップアップして現れます。ここでは、日付をクリックして選択すると、選んだ日付が表示されるようにしています。
PopupDateFieldは、引数に説明のテキストを指定してnewします。作成後、いくつかのプロパティを設定しています。以下に整理しておきましょう。
- setResolution：選択する日時情報の「細かさ」を指定するものです。これはPopupDateFieldに用意されているクラスフィールドを使って指定し、年月日時分秒のどこまで選択できるようにするかを設定します。ます。ここではRESOLUTION_DAYに指定し、日にちまで指定するようにしています
- setValue：選択された値を指定するものです。PopupDateFieldでは、値はDateインスタンスとして扱われます。new DateしたインスタンスをsetValueすれば、現在の日時が設定されます
- setLocale：ロケール情報を指定するものです。日本に指定するならば、Locale.JAPANを指定します
- setImmediate：既に登場しました。すぐにイベントを発行するためのものです。ここでは日にちを選択したらValueChangeListenerを使ってイベント処理を実行しているため、setImmediateをtrueに設定しておきます
値の取得は「getValue」で行うことができます。取り出される値はDateインスタンスなので、ここではSimpleDateFormatを使って分かりやすい形式にフォーマットし、表示しています。
もう1つの日時用コンポーネント
このPopupDateFieldの他にもう1つ、日時を選択するコンポーネントがあります。それは「InlineDateField」というコンポーネントです。これは、PopupDateFieldでポップアップして現れるカレンダーがそのままページに貼り付けられたものです。
PopupDateFieldは、アイコンをクリックした時だけポップアップして現れるので、場所をとらずに入力できるという利点があります。しかし、常にカレンダーとして表示しておくような場合には、このInlineDateFieldの方が便利です。用途に応じて使い分けるとよいでしょう。
進行状況を示すプログレスバー
最近のWebアプリケーションでは非常に処理も大規模となり、処理完了までに時間がかかるようなことも多くなってきました。こうした「しばらく待たせる処理」を行うような場合に多用されるのがプログレスバーです。進行状況を示す細長いバーで、各種のインストーラなどで多用されています。
これは「ProgressIndicator」というクラスとして用意されています。これは0～1の間の実数で値を設定することで、現在の進行状況を表示します。では、これも利用例をあげておきましょう。
public class MyvaadinApplication extends Application {
Window mainWindow = null;
ProgressIndicator indicator = null;
int flg = 0;
@Override
public void init() {
mainWindow = new Window("Myvaadin Application");
VerticalLayout layout = (VerticalLayout)mainWindow.getContent();
layout.setMargin(true);
layout.setSpacing(true);
indicator = new ProgressIndicator();
indicator.setCaption("現在の進行状況：0%");
indicator.setEnabled(false);
indicator.setValue(0f);
layout.addComponent(indicator);
Button btn = new Button("更新");
btn.addListener(new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
switch(flg){
case 0:
indicator.setEnabled(true);
indicator.setCaption("現在の進行状況：0%");
break;
case 6:
indicator.setEnabled(false);
indicator.setValue(0f);
indicator.setCaption("現在の進行状況：完了");
break;
default:
indicator.setValue(flg / 5f);
indicator.setCaption("現在の進行状況：" + flg * 20 + "%");
}
flg = (flg + 1) % 7;
}
});
layout.addComponent(btn);
setMainWindow(mainWindow);
}
}
これは、ボタンをクリックするごとに、プログレスバーの状況が「イネーブル状態」「20％」「40％」「60％」「80％」「100％」「ディスエーブル状態」と変化するサンプルです。
ここではボタンをクリックしたときに呼び出される「buttonClick」メソッドで、indicator.setValueを使いプログレスバーの値を少しずつ変化させています。これで、表示されるバーの長さが変化していくのです。またイネーブル状態は「setEnabled」で変更しています。この2つのメソッドが分かればProgressIndicatorの利用は簡単でしょう。
