Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

第22回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/09/02 14:00

 注目の軽量フレームワークをフットワーク軽く取り上げていく本連載。今回は、JavaをベースにしたRIA開発のフレームワーク「ZK」の第3回として、コンポーネント以外に用意されている重要な機能について、いくつかピックアップして整理していきます。

目次

はじめに

 今回は、これまで紹介したコンポーネント以外の機能から、重要なものをいくつかピックアップして補足していくことにしましょう。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」というメソッドを使います。これはコンテナに引数のコンポーネントを組み込むメソッドです。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 掌田 津耶乃(ショウダ ツヤノ)

    三文ライター&三流プログラマ。主にビギナーに向けたプログラミング関連の執筆を中心に活動している。 ※現在、入門ドキュメントサイト「libro」、カード型学習サイト「CARD.tuyano.com」を公開中。またGoogle+プロフィールはこちら。

バックナンバー

連載:Javaで軽快に使える「軽量フレームワーク」特集

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5