3分間チュートリアル

ここではZPTをサーブレットとして動作させてみましょう。

準備

サンプルWebアプリケーションのWarファイルをダウンロードして下さい。

http://maven.seasar.org/maven2/net/skirnir/freyja/freyja/1.0.10/freyja-1.0.10-sample.war

ダウンロードしたWarファイルをサーブレットコンテナにデプロイして下さい。 以下、デプロイしたアプリケーションのトップURLを「http://localhost:8080/freyja」として説明します。

アクセス

デプロイしたアプリケーションのトップURLにブラウザからアクセスして下さい。 次のような画面が表示されるはずです。

入力画面

テキストボックスに何か文字列、例えば「Hello, ZPT!」と入力して「変更」ボタンを押して下さい。 入力した文字列がタイトル部分に表示されます。

変更後の画面

この画面のZPTテンプレートは以下のようになっています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Top Page</title>
</head>
<body>
  <h1 tal:content="request/parameter(title) | default">TITLE</h1>
  <p>タイトルを入力して下さい。</p>
  <form action="#" tal:attributes="action page:/index.zpt">
    <input type="text" name="title" />
    <input type="submit" value="変更" />
  </form>
  <div metal:use-macro="/WEB-INF/zpt/include/footer.zpt#footer-text">
    <p>FOOTER for <b metal:fill-slot="product-name">Freyja</b></p>
  </div>
</body>
</html>

タイトル部分はtal:content属性で決定されます。TAL式は「request/parameter(title) | default」 ですので、リクエストパラメータに「title」パラメータがあればその値、なければ元々の値である「TITLE」が表示されます。 このため最初は「TITLE」と表示され、変更後は指定した文字列に置き換わるというわけです。

formタグのaction属性はtal:attributes属性によって動的に決定されます。 action属性に関するTAL式は「page:/index.zpt」ですのでPage式として解釈され、 最終的な値は先頭にコンテキストパスが補完されて「/freyja/index.zpt」となります。

またフッタの部分にはmetal:use-macro属性によって/WEB-INF/zpt/include/footer.zptテンプレートの footer-textマクロが埋め込まれます。 /WEB-INF/zpt/include/footer.zptテンプレートは以下のようになっています。

<div metal:define-macro="footer-text">
<hr />
<p>Powered by <span metal:define-slot="product-name">PRODUCT NAME</span></p>
</div>

「Powered by 」の後ろにはmetal:define-slot属性によって 「product-name」に対応するmetal:fill-slot属性のついているタグが埋め込まれますので、 最終的な出力は「<p>Powered by <b>Freyja</b></p>」となります。