SIMPLY RICH

ZKTM

クイックスタートガイド

Version 2.4.1

July 2007

Potix Corporation

Copyright © Potix Corporation. All rights reserved.

The material in this document is for information only and is subject to change without notice. While reasonable efforts have been made to assure its accuracy, Potix Corporation assumes no liability resulting from errors or omissions in this document, or from the use of the information contained herein.

Potix Corporation may have patents, patent applications, copyright or other intellectual property rights covering the subject matter of this document. The furnishing of this document does not give you any license to these patents, copyrights or other intellectual property.

Potix Corporation reserves the right to make changes in the product design without reservation and without notification to its users.

The Potix logo and ZK are trademarks of Potix Corporation.

All other product names are trademarks, registered trademarks, or trade names of their respective owners.

Table of Contents

はじめに	4

サーブレットコンテナ (Java Web Server)のご紹介	4

Java言語のご紹介	4

統合開発環境 (IDE)のご紹介	4

1. ダウンロード	5

2. デモファイルを実行してみよう	6

3. インストール	7

方法 1: ZKをアプリケーションに添付する	7

方法 2: ZKライブラリーを共有フォルダに置く	7

MySQLを使う	8

4. ZKパッケージ	9

/doc	9

/dist/lib	9

/dist/lib/zkforge	9

/dist/lib/ext	9

/dist/src	10

/dist/xsd	10

/dist/WEB-INF	10

5. デモパッケージ	11

/	11

/zkdemo	11

/MyApp	11

6. 初めてのZKアプリ	12

初めての Hello World	14

はじめに

サーブレットコンテナ (Java Web Server)のご紹介

Javaでウェブアプリケーションを開発するにはサーブレットコンテナをインストールしなければなりません。Apache Tomcatは最も普及しているサーブレットコンテナの一つです。Tomcatをインストールする方法はとても簡単です。

Download	Installer for Windows: apache-tomcat-5.5.20.exe A list of all available versions: http://tomcat.apache.org/download-55.cgi
Documentation	http://tomcat.apache.org/tomcat-5.5-doc/index.html

Java言語のご紹介

HTMLに類似するZUMLという言語を使えば、Javaが分からなくてもZKでリッチなユーザーインターフェースを実現することは可能です。但し、一つのウェブアプリケーションを完成するのに、Javaの基本知識は必要です。Javaのチュートリアルをいくつかリストアップしました。

Language Basic	http://java.sun.com/docs/books/tutorial/java/nutsandbolts/index.html
Class and Object	http://java.sun.com/docs/books/tutorial/java/concepts/index.html http://java.sun.com/docs/books/tutorial/java/javaOO/index.html http://java.sun.com/docs/books/tutorial/java/IandI/index.html

統合開発環境 (IDE)のご紹介

Eclipseは最もよく知られているJava統合開発環境の一つです。IDEの使用により、ウェブアプリケーションの開発・デバッグは簡単になります。さらに、ZKのソースコードをデバッグする作業を通してZKへの理解を深めることができます。

ステップ・バイ・ステップガイドは”small talks”より確認できます。

http://www.zkoss.org/smalltalks/eclipse/ek.html

1. ダウンロード

File	Description
zk-2.4.1.tar.gz zk-2.4.1.zip	ZKのバイナリパッケージです。ライブラリー・デモ用サンプルも含まれています。 このファイルがあればZKを使用することが可能です。
zk-demo-2.4.1.zip	独立したZKdemoアプリケーションをWARとEARのフォーマットで提供します。デモアプリケーションのソースコードも含まれています。 デモ用サンプルを見るにはウェブサーバ等の設定は一切不要です。
zk-javadoc-2.4.1.zip	ZKフレームワークにてJava APIを使用するマニュアルです。
zk-src-2.4.1.tar.gz	ZKフレームワークのソースで、サードパーティのライブラリーも含んでいます。

2. デモファイルを実行してみよう

Zkの能力を試すのであれば、下記のURLを参照しましょう。

http://www.zkoss.org/zkdemo/userguide.

また、ローカルサーバでデモを実行する方法は次の通りです。

(sourceforge.net) からzk-demo-2.4.1.zipをダウンロードします。

ファイルを解凍し、zkdemo-all.war か zkdemo-all.earをウェブサーバまたはアプリケーションサーバにデプロイします。
ほとんどのサーバは管理用のコンソールを持ち、それを使えば簡単にアプリケーションをデプロイすることができます。手順は関連するマニュアルを参照するか、下記ZKコミュニティーのURLをご確認ください： http://en.wikibooks.org/wiki/ZK/How-Tos#Installation_and_Configuration,
Tomcatサーバの場合は、アプリケーションを $TOMCAT_DIR/webapps フォルダにコピーすればTomcatは自動的にデプロイしてくれます。

zkdemo-all.warのデプロイが完了しましたら、http://localhost:8080/zkdemo-all/userguideへアクセスしてみてください。ポート番号はウェブサーバの設定によって、必ずしも8080ではありません。

3. インストール

ZKはライブラリー集(the JAR files)を持っています。これらのライブラリーをTomcatサーバへインストールする方法は二つあります。一つ目はこれらのファイルをウェブアプリケーションに添付(bundle)します。つまり、アプリケーションのWEB-INF/lib フォルダにコピーします。この方法のメリットは今後アプリケーションを他のウェブサーバにデプロイする際、サーバでの設定は不要になります。

二つ目はライブラリーを使用するウェブサーバまたはアプリケーションサーバにインストールします。つまり、共有フォルダにコピーします。 (Tomcatの場合はshared/lib)。この方法のメリットは共有ディレクトリにアクセスできるすべてのアプリケーションはZKを使用することが可能になります。

方法 1: ZKをアプリケーションに添付する

ZKのライブラリーをウェブアプリケーションの適当なフォルダにコピーすることで、アプリケーションをサーバへデプロイする際、サーバ側の設定は一切不要になります。

ZKライブラリーをWARファイルに添付する(ウェブアプリ)

zk-2.4.1.zip または zk-2.4.1.tar.gzを解凍します。

dist/lib/*.jar, dist/zkforge/*.jar, dist/lib/ext/*.jar をウェブアプリケーションの/WEB-INF/lib ディレクトリーにコピーします。

dist/zkforge の下にある全部のライブラリーとlibraries in dist/lib/extの下にある一部のライブラリーはオプションライブラリーです。オプションファイルにつしては次の章をご覧ください。

ZKライブラリーをEARファイルに添付する(the Java EE application)

zk-2.4.1.zip か zk-2.4.1.tar.gzを解凍します。

dist/lib/*.jar, dist/zkforge/*.jar, dist/lib/ext/*.jar をJava Eeアプリケーションのホームディレクトリーにコピーします。

dist/zkforge の下にある全部のライブラリーとlibraries in dist/lib/extの下にある一部のライブラリーはオプションです。オプションファイルにつしては次の章をご覧ください。

方法 2: ZKライブラリーを共有フォルダに置く

この方法はZKライブラリーを共有フォルダに置きます。やり方はウェブサーバによって違います。

ZKをTomcatにインストール

http://tomcat.apache.org からTomcatをダウンロードし、インストールします。

Tomcatを停止します。

zk-2.4.1.zip もしくは zk-2.4.1.tar.gzを解凍します。

dist/lib/*.jarと dist/zkforge/*.jarと dist/lib/ext/*.jar を $TOMCAT_HOME /shared/lib にコピーします。
dist/zkforge の全てのライブラリーと libraries in dist/lib/ext にある一部のライブラリーはオプションです。オプションファイルにつしては次の章をご覧ください。

Tomcatを再起動します。

上記手順に従ってライブラリーのコピーが完了したら、ウェブアプリケーション( demo/bin/zkdemo.war ) をTomcatにデプロイしましょう。Tomcatマネジャーを利用してデプロイするか、ファイルを $TOMCAT_HOME/webapps にコピーします。 ファイルをコピーする場合、Tomcatを一旦停止しなければなりません。デプロイが完了したらhttp://localhost:8080/zkdemo/userguideより結果を確認できます。なお、上記のパスはウェブサーバの設定により異なります。

ZKをJettyにインストール

http://www.mortbay.org/jetty/index.html からJettyをダウンロードし、インストールします。

Jettyを停止します。

zk-2.4.1.zip もしくは zk-2.4.1.tar.gzを解凍します。

dist/lib/*.jarと dist/zkforge/*.jarと dist/lib/ext/*.jar を $JETTY_HOME/extにコピーします。dist/zkforge にある全てのライブラリーと libraries in dist/lib/ext にある一部のライブラリーはオプションライブラリーです。オプションファイルにつしては次の章をご覧ください。

Jettyを再起動します。

上記手順に従ってライブラリーのコピーが完了したら、ウェブアプリケーション（ demo/bin/zkdemo.war ) を $JETTY_HOME/webapps にコピーしましょう。デプロイ成功したら http://localhost:8080/zkdemo/userguideより結果を確認できます。なお、上記のパスはウェブサーバの設定により異なります。

MySQL を使う

zscriptにてコネクションを張るにはMySQL JDBC ドライバ( mysql-connector-*.jar ) を $TOMCAT_DIR/common/libに置かなければなりません。

4. ZKパッケージ

この章はzk-2.4.1.zipについて説明します。

/doc

コピーライト・リリースノート等ドキュメントはこのフォルダに入っています。

/dist/lib

ZKを実行するのに必要なライブラリーはこのフォルダにあります。

/dist/lib/zkforge

FCKedeitorやDojo等ZK Forgeのコンポーネンツはこのフォルダに入っています。これらのコンポーネンツを使用する場合のみ、下記のファイルが必要です。

File	Description
dojoz.jar	ZK DOJO コンポーネントを使う場合使用
fckez.jar	ZK FCKeditorコンポーネントを使う場合使用
gmapsz.jar	ZK Google Mapsコンポーネントを使う場合使用
timelinez.jar json_simple.jar	ZK Timelineコンポーネントを使う場合使用

/dist/lib/ext

ZKを実行するのに必要な外部ライブラリーはこちらになります。一般的なライブラリーですので、既にインストールされている可能性があります。

オプションのjarファイルは以下です。デザインにより、必要なものだけコピーしましょう。

File	Description
commons-fileupload.jar commons-io.jar	これらのファイルでアップロード機能を実現する場合に使う Version: Commons Fileupload 1.2 and Commons IO 1.3.1
commons-el.jar	ELを評価する場合に使う Version: Commons EL 1.0
jcommon.jar jfreechar.jar	ZULのチャートコンポーネントを使用する場合に使う. Version: JFreeChart 1.0.5 and JCommon 1.0.9
bsh.jar	Java interpreter (BeanShell)でスクリプトを作成する場合に使う Version: BeanShell 2.0b4
js.jar	JavaScript (Rhino)でスクリプトを作成する場合に使う Version: Rhino 1.6R5
groovy.jar	Groovyでスクリプトを作成する場合に使う Version: Groovy 1.0 (groovy-all)
jruby.jar	Ruby (JRuby)でスクリプトを作成する場合に使う Version: JRuby 1.0 (jruby-complete)
Filters.jar	captcha コンポーネントを使用する場合に使う Version: JH Labs Java Image Filters

/dist/src

Eclipse等IDEをデバッグするに使うソースコードはJARファイルの形で保存されています。これらのファイルからバイナリライブラリーを編集することはできません。編集する場合は zk-src-2.4.1.tar.gzをダウンロードし、解凍してください。

/dist/xsd

ZKアプリケーションを開発する際便利なXSDファイルはこちらです。

/dist/WEB-INF

ZKアプリケーションを開発する際便利なTLDファイルはこのフォルダに入っています。

5. デモパッケージ

この章はzk-demo-2.4.1.zipについて説明します。

/

zkdemo.war, zkdemo-all.war・zkdemos.ear・zkdemos-all.ear計3つの実行ファイルがこのフォルダに入っています。詳細は 3.インストール を参考にしてください。

/zkdemo

ライブデモのソースコードはこちらに入っています。

/MyApp

このディレクトリーの下でウェブアプリケーションを新規作成しましょう。

6. 初めてのZKアプリ

WEB-INF/web.xmlを用意しましょう

まずは以下の内容をWEB-INFの下にあるweb.xmlにコピーしましょう。新しいアプリケーションを開発するたびに必ずこれを実行しなければなりません。次にZUL・ZHTMLファイルを適当なディレクトリーにコピーします。

<web-app 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">
<!-- //// -->
<!-- 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>gif</extension>
<mime-type>image/gif</mime-type>
</mime-mapping>
<mime-mapping>
<extension>html</extension>
<mime-type>text/html</mime-type>
</mime-mapping>
<mime-mapping>
<extension>htm</extension>
<mime-type>text/html</mime-type>
</mime-mapping>
<mime-mapping>
<extension>jad</extension>
<mime-type>text/vnd.sun.j2me.app-descriptor</mime-type>
</mime-mapping>
<mime-mapping>
<extension>jpeg</extension>
<mime-type>image/jpeg</mime-type>
</mime-mapping>
<mime-mapping>
<extension>jpg</extension>
<mime-type>image/jpeg</mime-type>
</mime-mapping>
<mime-mapping>
<extension>js</extension>
<mime-type>application/x-javascript</mime-type>
</mime-mapping>
<mime-mapping>
<extension>png</extension>
<mime-type>image/png</mime-type>
</mime-mapping>
<mime-mapping>
<extension>txt</extension>
<mime-type>text/plain</mime-type>
</mime-mapping>
<mime-mapping>
<extension>xml</extension>
<mime-type>text/xml</mime-type>
</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-list>
</web-app>

初めての Hello World

以下のプログラムと同じ内容のhello.zulファイルを作りましょう。そうすればブラウザ( http://localhost:8080/zkdemo/hello.zul )から結果が確認できます。パスはウェブサーバの設定により異なります。

<window title="My First window" border="normal" width="200px">
Hello, World!
</window>

結果は以下の通りです：

ここで注意しなければならないのは、hello.zulはXULと類似していますが、それはXULではなくZUMLです。ZLローダーはZUMLをIE等のブラウザが読めるHTMLページに変換します。詳しくは Developer's Guide をご覧ください。

$TOMCAT_HOME はTomcatをインストールしたホームディレクトリーです。

http://ww.mysql.com

ZK: Quick Start Guide	Page 14 of 14	Potix Corporation

Tom Yeh

2005-11-01T08:57:53

Jean Yen