ZKの概要

ZK - Simply Ajax

ZKはPotixが開発しているJavaのリッチクライアントを開発するためのフレームワークです。
GNU Ver.2ライセンスで公開されているオープンソースソフトウェアなので無償で使用できます。
ZUML(ZK User-interface Markup Language)というマークアップ言語を使用してUIの定義を行うのが特徴です。
ZUMLではHTMLだけでなくXULをGUIを作成するためのコンポーネントとして採用している点が他のフレームワークと大きく異なると言えます。
ただしXULがFirefoxでしか動作しないのと異なり、
ZKはサーバ側で全て処理を行うのでクライアントやブラウザに依存しません。
またクライアント側での処理の記述にJavaScriptを使用する必要はなく
現状ではJAVA、Ruby、Groovy（もちろんJavaScriptも）を選択できます。


ZKはイベント・ドリブンモデルを採用しており
イベント単位で処理を記述できます。
またJavaのフレームワークといってもサーバ側での処理にサーブレットを書く必要がないため、
クライアントアプリを作成するような形でWEBアプリケーションを作成できます。
(web.xmlを見れば分かると思いますが裏ではサーブレットが普通に動いています）


例えXULをよく知らない方でもeZingBuilder等のEclipseプラグインを使用することで
ユーザインターフェイスをGUIによりデザイン、作成できる等のメリットがあります。


またHTMLやJSPにZUMLを埋め込むことができるので、
既存の資産を無駄にすることなくZKによって新たな機能を追加できます。


ではまず実際にZKを実行するまでの流れを簡単に説明していきます。
また開発環境の構築に関する説明は割愛しますが、
私が使用している開発環境は下記の通りです。

・JDK1.5.0
・Tomcat5.5.20
・Eclipse 3.2 (WTP1.5)


では何はともあれまず動かしてみましょう。


1. Eclipse上でzkwebという名前のプロジェクト（動的WEBプロジェクト）を作成します。
ここではコンテキストルートに「zkweb」を指定しています。


2. 下記サイトからzk-2.3.0.zipをダウンロードします。

　　http://www.zkoss.org/download/


3. zk-2.3.0.zipを解凍します。


4. 解凍後にできる以下のjarファイルを/WEB-INF/libディレクトリ配下に全てコピーします。


dist/lib/*.jar dist/zkforge/*.jar dist/lib/ext/*.jar


5. 下記の内容をコピー、または既存のweb.xmlファイルに追加します。



<?xml version="1.0" encoding="UTF-8"?>

<web-app id="WebApp_ID" version="2.4"

    xmlns="http://java.sun.com/xml/ns/j2ee"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee ">http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

    <display-name>zkweb</display-name>

    <!-- //// -->

    <!-- ZK -->

    <listener>

        <description>

            Used to cleanup when a session is destroyed

        </description>

        <display-name>ZK Session Cleaner</display-name>

        <listener-class>

            org.zkoss.zk.ui.http.HttpSessionListener

        </listener-class>

    </listener>

    <servlet>

        <description>ZK loader for evaluating ZK pages</description>

        <servlet-name>zkLoader</servlet-name>

        <servlet-class>

            org.zkoss.zk.ui.http.DHtmlLayoutServlet

        </servlet-class>

        <!-- Must. Specifies URI of the update engine

            (DHtmlUpdateServlet). -->

        <init-param>

            <param-name>update-uri</param-name>

            <param-value>/zkau</param-value>

        </init-param>

        <load-on-startup>1</load-on-startup><!-- MUST -->

    </servlet>

    <servlet-mapping>

        <servlet-name>zkLoader</servlet-name>

        <url-pattern>*.zul</url-pattern>

    </servlet-mapping>

    <servlet-mapping>

        <servlet-name>zkLoader</servlet-name>

        <url-pattern>*.zhtml</url-pattern>

    </servlet-mapping>

    <servlet>

        <description>The asynchronous update engine for ZK</description>

        <servlet-name>auEngine</servlet-name>

        <servlet-class>

            org.zkoss.zk.au.http.DHtmlUpdateServlet

        </servlet-class>

    </servlet>

    <servlet-mapping>

        <servlet-name>auEngine</servlet-name>

        <url-pattern>/zkau/*</url-pattern>

    </servlet-mapping>

    <!-- //// -->

    <!-- MIME mapping -->

    <mime-mapping>

        <extension>zhtml</extension>

        <mime-type>text/html</mime-type>

    </mime-mapping>

    <mime-mapping>

        <extension>zul</extension>

        <mime-type>text/html</mime-type>

    </mime-mapping>
    <welcome-file-list>

        <welcome-file>index.zul</welcome-file>

        <welcome-file>index.zhtml</welcome-file>

        <welcome-file>index.html</welcome-file>

        <welcome-file>index.htm</welcome-file>

        <welcome-file>index.jsp</welcome-file>

    </welcome-file-list>

</web-app>


6. hello.zulと名前でファイルを作成し、ウェブアプリケーションの
ルートディレクトリ直下に配置します。


hello.zul





    Hello, World!

7. tomcatを起動後、下記URLに接続して画面が表示されることを確認してください。


　　http://localhost:8080/zkdemo/hello.zul


以上です。
これでまず最初の一歩を踏み出せましたね。