AJAXを活用したWebインタフェースの作成ツール ZKPrograming Bible(2/2 ページ)

» 2008年08月31日 00時06分 公開
[Ben Martin,Open Tech Press]
SourceForge.JP Magazine
前のページへ 1|2       

ZKの使用法

 ZKの使用法は、ZK Tutorialに概略が、Developer's Guideに詳細が説明されている。WebインタフェースはMozilla XMLユーザーインタフェースファイル形式(XUL)に類似した言語、ZK User Interface Markup Language(ZUML、またはZUL)で記述する。Tomcatを使ったアプリケーションの開発に不慣れな場合は、まず、テスト用のWEB-INF/web.xmlファイルをZULファイルのディレクトリの下に置いてみよう。また、Resortサンプルのweb.xmlファイルをコピーして実行するとZULファイルをロードできる。

 ZULファイルには、簡単な処理を含めることができる。JavaコードとZULインタフェースの記述は分離した方がよいのはもちろんだが、コードの埋め込みは実験の際には便利だ。適正なXMLとするには埋め込みコードを引用符で囲む必要がある。従って、Javaコード中の二重引用符は"と記述する。Enterprise Editionでは、JavaScript、Ruby、Groovyで記述することもできる。zscript要素を使うと、ZULファイル中にさらに大きなコードブロックを含めることができる。zscript要素の中では二重引用符をエスケープする必要がないので便利だ。以下に、簡単なZULファイルによるWebインタフェースを示す。ボタンがクリックされると、埋め込んだJavaが動作しメッセージボックスが開く。


<window title="Hello" border="normal">
    <button label="Say Hello" onClick="Messagebox.show("Hello World!")"/>
</window>

 ZULファイルにコードを埋め込む場合、次の2つの機能を利用するとコードを簡潔に表現できる。その1つはEL式だ。小さなスニペットを埋め込むことで、Javaオブジェクトのプロパティにアクセスしたり簡単な比較を行ったりできる。もう1つはforEach文で、リストボックスなどの反復的なZUL要素にデータを埋め込む際に使う。また、ユーザーインタフェースが生成したイベントに応答したいときは、ZULファイルの中でオブジェクトのサブクラスを定義し、明示的にそのサブクラスを使用すればよい。これを利用すると、ZULインタフェース定義ファイルを変えなくても、Javaコードを変更しイベントに対する応答を変えることができる。その際、forward属性を使えば、押下イベントを親オブジェクトに回し、ボタンの押下にサブクラスで反応しないようにすることができる。

 ZKはいわゆる「ライブデータ」モデルをサポートしており、org.zkoss.zul.ListModelインタフェースを実装すると、そのインタフェースを介して示されたデータはWebページ上のほかのコントロールからも見えるようになる。次に示す例では、Bookmarkクラスをタプルとして使い、URL、ページタイトル、最後に訪問された時刻を格納している。ここではaccessorメソッドは省いた。


...
public class Bookmark
{
 private String m_title;
 private String m_earl;
 private Date m_lastVisit;
 public Bookmark() {}
 public Bookmark( String title, String earl, Date lvisit )
 {
 	m_title = title;
	m_earl = earl;
	m_lastVisit = lvisit;
 }
...

 Bookmarkオブジェクトをグリッドに表示するには、表示方法を規定するRendererサブクラスを用意する必要がある。所要のデータを個別のセルに入れる例を以下に示す。


...
public class BookmarkRenderer implements RowRenderer {
 public void render(Row row, java.lang.Object nastyDataRef)
 {
   Bookmark bm = (Bookmark)nastyDataRef;
   new Label( bm.getTitle() ).setParent(row);
   new Label( bm.getURL() ).setParent(row);
   new Label( bm.getLastVisitTime().toString() ).setParent(row);
 }
};

 ListModelListクラスのorg.zkoss.zul.ListModelを可変実装することもできる。下に例示した Controllerオブジェクトはbookmarkのサンプルを数件作成している。データはJDBCなどのソースから簡単に取り込むことができる。


...
public class BookmarkController extends Window {
        ListModelList m_bookmarks = new org.zkoss.zul.ListModelList( new ArrayList() );
        Bookmark m_selected = new Bookmark();
        public BookmarkController() {
                m_bookmarks.add( new Bookmark( "Slashdot: News for nerds, stuff that matters",
                                                "http://linux.com", new Date() ));
                m_bookmarks.add( new Bookmark( "Linux.com :: Feature"
                                                "http://slashdot.org", new Date() ));
                m_bookmarks.add( new Bookmark( "The libferris VFS!",
                                                "http://www.libferris.com", new Date() ));
        }
...

ZK ZK

 最後に、右のスクリーンショットに示したWebインタフェースを作るZULファイルを例示する。window要素のuse属性はこのウィジェットで使用するカスタムJavaクラスを指定する。また、グリッドのモデルにはwindowクラスのBookmarkメンバーを指定している。具体的には、BookmarkControllerクラスのm_bookmarksだ。グリッドでのカスタムJavaオブジェクトの表示方法を規定するため、 Rendererを指定する必要がある。


<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<window id="win" use="com.linux.zk.example.bookmark.ui.BookmarkController" 
      title="Bookmarks" width="800px" border="normal">
 <hbox>
<grid model="@{win.Bookmarks}" rowRenderer="com.linux.zk.example.bookmark.ui.BookmarkRenderer" >
  <columns>
   <column label="Title" width="70px"/>
   <column label="URL" width="250px"/>
   <column label="Last Visited" width="100px" />
  </columns>
 </grid>
   <timer id="timer" delay="3000" repeats="false"
          onTimer="win.dataArrived()"/>
 </hbox>
</window>

まとめ

 ZKはSourceForge.net Community Choice Awardsで最終選考に残っているが、現在主流になっている配布方式には対応していない。インストールが特別難しいというわけではないが、Linuxディストリビューションのパッケージマネージャで自動的にアップデートできる方が好ましいことは言うまでもない。

 WebブラウザとWebサーバ間の通信には非同期コールが使われているが、サーバとの通信が必要なカスタムDataモデルを表示しているデータグリッドをソートするなどの場合に、ネットワークで時間を要していると感じられることがある。サーバ/クライアント間のネットワーク遅延の大きさによっては問題になるかもしれない。

 Webインタフェースを作りたい場合、Javaを使っているならZKを利用してみよう。ブラウザによって扱いが異なるためJavaScriptコードが期待通りに動くかどうかを心配したり、Webブラウザ用のウィジェットを詳細に指定して作成したりしなくても済む。ZK以前はページをロードするかそれともカスタムJavaScriptコードからAJAXを呼び出して応答するかを常に考えていなければならなかったが、ZKはイベントベースのプログラミングモデルを採用しており、この点も新鮮に感じられるだろう。

Ben Martin 10年以上にわたってファイルシステムを研究。博士課程を修了し、現在、libferris、ファイルシステム、検索ソリューションを中心にコンサルティングをしている。


前のページへ 1|2       

Copyright © 2010 OSDN Corporation, All Rights Reserved.

注目のテーマ