スライダーとプログレスメーター
ボタンなどは、HTMLにも標準で用意されていますが、ZKではもちろんHTMLにないコンポーネントも用意されています。例えば、スライダーなどは、HTMLにはありませんが、パソコンの世界ではほぼ標準のGUIといっていいほどに多用されています。また進行状況をバーで示すプログレスメーター（プログレスバー）もほぼ標準的なGUIといっていいほどに普及しています。これらを使ってみましょう。
<?page title="Index Page"?>
<window title="Welcome to ZK!" border="normal" width="300px">
<label>スライダーとプログレスメーター</label>
<separator/>
<label id="msg" value="スライダーの値：0" />
<separator/>
<slider id="slider" onScroll="doAction()"/>
<separator/><separator/>
<progressmeter id="progress" value="0" width="200px"/>
<separator/>
<timer id="timer" delay="1000" repeats="true"
onTimer="doTimer()"/>
<zscript>
timer.start();
void doAction(){
var val = slider.curpos;
msg.value = "スライダーの値：" + val;
}
void doTimer(){
var val = progress.value;
progress.value = val + 10 > 100 ? 0 : val + 10;
}
</zscript>
</window>
スライダーは、<slider>というタグとして用意されています。タグを置くだけで、マウスでドラッグして数値を入力するスライダーのGUIが生成されます。この<slider>には、以下のような属性が用意されています。
- curpos：現在の値を示す
- maxpos：最大値を示す
最小値はゼロ固定です。また省略すると、maxposは100に設定されます。マウスでドラッグすると、現在の値がリアルタイムに左下に表示され、離して値が確定すると「onScroll」イベントが発生します。ここでは「slider.curpos」で現在の値を取得し、それをラベルに表示させています。
プログレスメーターは、<progressmeter>タグとして用意されています。これは0～100の範囲内で値を設定することができ、それによってバーの長さが変更される仕組みになっています。現在の値はvalueプロパティとして用意されています。
今回は、プログレスメーターの値を一定間隔で変化させています。これは「タイマー」を利用して行っています。このタイマーも、実はZULコンポーネントなのです。<timer>というタグが、タイマーのタグです。ここで以下の属性を指定しておきます。
- delay：タイマーが発動するまでの待ち時間（ミリ秒単位）
- repeats：繰り返しタイマーを発動させるかどうかを示す真偽値
- onTimer：タイマーが発動したイベントにより実行される処理
タイマーのスタートは、<zscript>タグ内にある「timer.start();」で行っています。これで、delayで指定した時間が経過するとonTimerの処理を実行するようになります。途中でタイマーを終了する場合は、「stop」メソッドを呼び出します。
カレンダーの表示
入力関係で意外と面倒なのが日付です。入力された値が正しい日付の値となっているかどうかをチェックするのは面倒ですし、といって年月日の値を入力するフィールドを並べるのもあまりクールとは言えません。
ZUMLには、日付を入力するためのZULコンポーネントが2種類用意されています。1つはカレンダーを画面に表示するもの、もう1つはポップアップでカレンダーが現れるものです。これらを利用すれば、簡単に日付の入力を行うことができます。
<?page title="Index Page"?>
<window title="Welcome to ZK!" border="normal" width="300px">
<label>カレンダー２種</label>
<separator/>
<label id="msg" value="選択した日付：" />
<separator/>
<datebox id="cal1" onChange="doAction1()"/>
<separator/>
<calendar id="cal2" onChange="doAction2()"/>
<separator/>
<zscript>
void doAction1(){
var val = cal1.value;
msg.value = "cal1: " + val;
}
void doAction2(){
var val = cal2.value;
msg.value = "cal2: " + val;
}
</zscript>
</window>
上にある入力フィールドは、直接日付を入力することもでき、右側にあるアイコンをクリックすることでカレンダーをポップアップで呼び出し選択することもできます。その下のカレンダーは説明は必要ないとも思います。日付を選択すると、その日付が上のラベルに表示されます。
ポップアップでカレンダーを表示したのは<datebox>という特殊な入力フィールドのコンポーネントです。カレンダーの表示は、<calendar>というタグで行っています。いずれもデフォルトで今日の日付が選択された状態となっています。
日付を選択したときのイベント処理は「onChange」という属性に用意します。また選択されている日付は、valueで取り出すことができます。このvalueで得られる値は、テキストなどではなく、java.util.Dateインスタンスです。従って、valueのオブジェクトを利用してもっと柔軟な日付の処理をさせることも可能です。
<zscript>
var format = new java.text.SimpleDateFormat("Gyyyy年 MM月 dd日 (E)");
void doAction1(){
var val = cal1.value;
msg.value = "cal1: " + format.format(val);
}
void doAction2(){
var val = cal2.value;
msg.value = "cal2: " + format.format(val);
}
</zscript>
例えば<zscript>タグ部分をこのように修正してみましょう。日付を選択すると、「西暦xxxx年 xx月 xx日 (曜日)」という形で表示されます。ここではSimpleDateFormatインスタンスを用意しておき、これを使ってカレンダーのvalueをフォーマットします。
まとめ
ZKは、Ajaxを駆使したクールなGUIを、ごく簡単なタグによるzulファイルによって生成できます。しかし、「GUIがきれい」ということばかりに目を奪われてはいけません。ZKは、Webアプリケーションの開発から「クライアントとサーバ」という概念を葬り去ろうとしています。
ZKのコードを書いているとき、それがクライアント側かサーバ側かどちらで動いているのか？ということを意識することはまずありません。それは、ZKのシステムによって適当に処理されるべき問題であり、開発者が頭を悩ませるべきものではない、と考えているかのようです。
また、ZKではすべてのコードはインタープリタによって実装されます。Javaのプログラミングに慣れていると、つい「ビルドして再デプロイ」といったことを考えてしまいますが、ZKではスクリプトを書き換えればその場ですぐに反映されます。もちろん、JavaにもJSPがありますが、ZKではJava以外にもさまざまなスクリプト言語を利用できます。
「クールなGUI」＋「シンプルなスクリプトによる処理」を考えた結果、誕生したのがZKなのでしょう。では、次回はもう少しZKの機能について掘り下げていくことにしましょう。
