はじめに
今回は、これまで紹介したコンポーネント以外の機能から、重要なものをいくつかピックアップして補足していくことにしましょう。ZKは、基本的にプレゼンテーション層のフレームワークであり、コンポーネントによるページの作成を第一に考えられています。しかし、Webページを作る上で、コンポーネント以外にも必要となる機能はいろいろと考えられますし、コンポーネントを活用する上で理解しておきたい機能というのもまたあります。
例えば、GUI関連の機能としては「ドラッグ&ドロップ」や「メニュー」、「マルチウインドウ」といったものがあげられます。またWebアプリケーションでデータを扱う際に多用される「セッション」の利用方法も重要ですし、「データベース・アクセス」はWebアプリケーション開発では外すことのできない機能でしょう。今回は、これら「コンポーネント以外の機能」について説明していきます。
対象読者
- Javaで手ごろなフレームワークを探している技術者
- 最近のフレームワークをごくざっと理解しておきたい方
- Web開発の手法がどうも気に入らない、と常々考えているJavaプログラマ
ドラッグ&ドロップ
まずは、コンポーネントのドラッグ&ドロップについてです。ZKのコンポーネントには「draggable」「droppable」という属性が用意されており、これにtrueを設定するだけで、ドラッグ可能・ドロップ可能にできます。
問題は「ドロップされたときにどのようにして処理を行うか」でしょう。これは「onDrop」という属性に処理を用意することで解決できます。では、実際にやってみましょう。
<?page title="Index Page"?> <window title="Welcome to ZK!" border="normal" width="300px"> <label>※ドラッグ&ドロップ</label>${gmsg} <separator /> <label draggable="true">ドラッグ可能なテキスト</label> <separator /><separator /> <vbox droppable="true" style="background-color:#eeeeff" width="200px" height="100px" onDrop="doDropped(self,event.dragged)"> </vbox> <separator /><separator /> <zscript> void doDropped(obj1,obj2){ obj1.appendChild(new Button(obj2.value)); } </zscript> </window>
これは、ドラッグ可能なテキスト(ラベル)と、ドロップ可能なエリア(ボックス)を表示するサンプルです。「ドラッグ可能なテキスト」というテキストをマウスでドラッグすると、そのまま動かすことができます。これを下のグレーのエリアにドロップすると、ボタンとして組み込まれます。
ここでは、<vbox>の属性にonDrop="doDropped(self,event.dragged)"という形でドロップ時の処理を設定しています。doDroppedグローバル関数を呼び出し、selfとevent.draggedを渡しています。selfはイベントが発生したコンポーネント(つまりドロップされたコンポーネント)、eventのdraggedはイベントオブジェクトに用意されているプロパティで、ドラッグしたコンポーネントを示すものです。これで、ドロップされた側とドラッグした側の両方のオブジェクトが引数で渡されます。
doDropped関数では、ドラッグしたコンポーネントのvalueを取得し、新しいButtonを作成して、これをドロップされた側に組み込みます。組み込みは「appendChild」というメソッドを使います。これはコンテナに引数のコンポーネントを組み込むメソッドです。