web.xmlの作成
続いて、web.xmlを作成します。WEB-INF内に新たに「web.xml」ファイルを作成し、ZKを利用するために必要な情報を記述します。
<?xml version="1.0" encoding="UTF-8"?>
<web-app
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>ZkSample</display-name>
<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>The servlet loads the DSP pages.</description>
<servlet-name>dspLoader</servlet-name>
<servlet-class>
org.zkoss.web.servlet.dsp.InterpreterServlet</servlet-class>
</servlet>
<servlet>
<description>ZK loader for ZUML pages</description>
<servlet-name>zkLoader</servlet-name>
<servlet-class>
org.zkoss.zk.ui.http.DHtmlLayoutServlet</servlet-class>
<init-param>
<param-name>update-uri</param-name>
<param-value>/zkau</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<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>dspLoader</servlet-name>
<url-pattern>*.dsp</url-pattern>
</servlet-mapping>
<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-mapping>
<servlet-name>auEngine</servlet-name>
<url-pattern>/zkau/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
<welcome-file>index.zul</welcome-file>
</welcome-file-list>
</web-app>
かなり長くなりましたが、これがZKを利用するため必要となるタグです。ZKは、サーブレットを利用して働くフレームワークです。全体を制御するためのコントローラーがサーブレットとして用意されており、これをweb.xmlに登録して利用します。
index.zulの作成
では、さっそくWebページを作成してみましょう。ZKでは、WebページはHTMLは使いません。また、JSPなども利用しません。ZKには「ZUML」というXMLベースのページ記述仕様が用意されています。XMLでは、「XUL（XML based User interface Language）」というマークアップ言語が用意されています。ZUMLも、このXULをベースにしています。
XULでは、XULコンポーネントと呼ばれるUIコンポーネントをXMLのタグとして記述していきます。ZUMLにも「ZULコンポーネント」と呼ばれるコンポーネント群が用意されており、これを記述することでGUIを構築できます。
Webアプリケーションのルート下（「zksample」フォルダ内）に、「index.zul」というファイルを新たに作成してください。そして次のようにスクリプトを記述しましょう。
<?page title="Index Page"?> <window title="Welcome to ZK!" border="normal" width="300px"> <label value="これは、ZKで作成したページです。"/> </window>
これで完成です。実際にサーブレットコンテナを起動し、Webアプリケーションのルートにアクセスしてみましょう。例えばTomcatの場合、公開ディレクトリの「webapps」内に「zksample」を配置してあるならば、http://localhost:8080/zksample/にアクセスします。
これで、index.zulにアクセスし、ごくシンプルなメッセージが表示されます。ZUMLでは、このように「zul」という拡張子のファイルを用意し、そこに記述したZULコンポーネントを記述してページを作成します。
ZULコンポーネントを調べる
では、ここで使われているタグについて簡単に説明をしていきましょう。まず最初に、<?page ?>というタグが記述されています。XMLの場合、冒頭に<?xml ?>といったタグが書かれますが、XUMLでは、ページの属性を定義するため、このように冒頭に<?page ?>というタグを記述できます。
この<?page ?>では、titleという属性が用意されています。これは、このWebページのタイトル（通常、HTMLでは<head>内に<title>として用意されるもの）を示すのに用いられます。
このスクリプトでは、その後に、<window>というタグが記述されています。これは、文字どおり「ウインドウ」のコンポーネントです。ブラウザからこのページにアクセスすると分かりますが、ブラウザ内に擬似的なウインドウが表示され、その中にメッセージが表示されていました。ZKでは、このようにまずウインドウを用意し、その中にコンポーネントを配置していきます。この<window>タグでは、以下の属性が用意されています。
- title：ウインドウのタイトル表示を示すものです。
- border：ボーダー（ウインドウの輪郭）を指定するものです。ここでは一般的なボーダーとして"normal"が指定されています。
- width：ウインドウの横幅を指定します。省略すると、ブラウザの横幅にあわせて最大限の大きさで表示されます。
この<window>タグ内に、GUIのコンポーネントが配置されます。ここでは<label>というタグが用意されていますが、これはテキストを表示するためのコンポーネントです。ここでは、valueという属性に、表示するテキストを指定しています。この<label>タグには以下のように2通りの書き方が用意されています。
<label value="これは、ZKで作成したページです。"/> <label>これは、ZKで作成したページです!</label>
どちらでも表示は同じです。後者の場合、テキストをダブルクォートでくくる必要がないため、例えば、「say "Hello"」なども直接記述できますが、前者では"say "Hello""というようにクォートを展開しなくてはいけません。こうした細かな点で記述に違いがあるので注意してください。難しい記述法ではないので、どちらでも必要に応じて使い分けられるようにしておきましょう。
