Javaで軽快に使える「軽量フレームワーク」特集
～クールなGUIをシンプルなスクリプトで作成するZK（1）

第20回

処理はどこで実行している？

　イベントを使った処理は、非常にシンプルで分かりやすいものです。特に引っかかる点もないでしょう。では、ここで質問です。このdoActionの処理は、一体どこで実行されているのでしょうか。クライアント側でしょうか、それともサーバ側でしょうか。

　まるでJavaScriptのような利用の仕方からして「クライアント側だろう」と思った人も多いことでしょう。しかし実際は、処理はサーバ側で実行されています。実際に、ページを表示した後、サーバを停止してからボタンをクリックしてみてください。クライアント側で処理が行われているならそのまま動くはずですが、実際にはエラーを示すアラートが表示されます。

サーバを停止してボタンをクリックすると、このようなエラーが現れる

　ZKを利用する最大の利点は、ここにあります。すなわち、開発者は、その処理がサーバ側で動いているのか、それともクライアント側かといったことを一切考える必要がないのです。開発者が考えるべきは、ただ「どのイベントでどういう処理を実行するか」といったことだけです。すなわち、AWTやSwingなどのGUIアプリケーションとまったく同じ感覚で処理を実装できます。

　Ajaxを利用したWebアプリケーションの開発では、常に「クライアントとサーバの処理の切り分け」を意識しなければなりません。jQueryなどのライブラリの登場により、クライアントサイドの処理を実装するための技術はここ数年で格段に進歩しました。しかし、どんなに進歩しても、いわゆるAjaxライブラリでは「ここまではクライアント、ここからサーバ側」といった切り分けを行い、それぞれで実装するしかありませんでした。それらは当然、クライアント側がJavaScript、サーバー側が何か別のサーバーサイドの言語というように、異なる言語で実装されることになるでしょう（サーバサイドJavaScriptというのもないわけではありませんが）。

　しかし、ZKでは、サーバとクライアントの処理の切り分けなどを考えることなく、一貫してただ1つのスクリプト言語で処理を記述できます。

チェックボックスとラジオボタン

　では、その他のZULコンポーネントを使ってみましょう。まずはチェックボックスとラジオボタンからです。チェックボックスは<checkbox>、ラジオボタンは<radio>というタグとして用意されています。ただしラジオボタンの場合、グループ化をする<radiogroup>というタグと併用する必要があります。

<?page title="Index Page"?>
<window title="Welcome to ZK!" border="normal" width="300px">
  <label>チェックボックスとラジオボタン</label>
  <separator/>
  <checkbox onCheck="alert(self.isChecked())" label="チェック！" />
  <separator/>
  <radiogroup id="group1" onCheck="doAction()">
    <radio label="iphone"/>
    <radio label="android"/>
    <radio label="webOS"/>
  </radiogroup>
  <zscript>
  void doAction(){
    var item = group1.selectedItem;
    alert("選択した項目：" + item.label);
  }
  </zscript>
</window>

チェックボックスとラジオボタンの例。それぞれクリックして選択するとアラートが表示される

　ラジオボタンとチェックボックスの簡単なサンプルです。それぞれクリックして選択すると、画面にアラートが表示されます。チェックボックスの場合にはチェックの状態を示す真偽値が、ラジオボタンの場合は選択した項目名がそれぞれ表示されます。

　まず<checkbox>のタグを見てみましょう。ここでは、「onCheck」という属性が用意されています。これは、チェック状態が変更された時のイベント処理を行うものです。ここではalertを使って「self.isChecked()」を表示しています。「self」は、このコンポーネント自身を示すオブジェクトで、「isChecked」はチェックの状態を返すメソッドです。

　続いてラジオボタンです。こちらは、<radiogroup>というグループ設定のためのタグが用意されており、この中に<radio>タグを使ってラジオボタンのコンポーネントを配置しています。ここでもチェックが変更された時の処理を行っていますが、注意すべきは<radio>ではなく<radiogroup>側にonCheckが用意されている、という点です。これで、グループ内のラジオボタンのどれをクリックしても、doActionが呼び出されるようになります。

　このdoActionでは、選択されたラジオボタンのラベルをalertで表示させています。まず、グループに用意されているプロパティ「group1.selectedItem」を使い、選択されている項目を取得します。そして、そのlabelプロパティをalertで表示しています。

　また、よく見るとselectedItemの値を変数に収める際、「var item」という形で変数を宣言しています。ここにも、JavaでありながらJavaではない、BeanShell特有の表現が見られます。BeanShellでは、変数はJavaのようにタイプを明確に指定するだけでなく、「var」を使って特定の型を指定しない（いわゆるバリアント型）で利用することも可能なのです。