CodeZine(コードジン)

特集ページ一覧

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

第20回

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

目次

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にアクセスするとこのように表示される
index.zulにアクセスするとこのように表示される

 これで、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 &quot;Hello&quot"というようにクォートを展開しなくてはいけません。こうした細かな点で記述に違いがあるので注意してください。難しい記述法ではないので、どちらでも必要に応じて使い分けられるようにしておきましょう。


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

バックナンバー

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

もっと読む

著者プロフィール

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

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

あなたにオススメ

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