一読しても全く理解できなかっため整理してみる。
Templateの概念
タグの整理
パーツで使うタグ
| composition |
|---|
| パーツデータの範囲指定(使わなくてもOK) |
テンプレートで使うタグ
| insert | include |
|---|---|
| 表示データの読み込み場所に名前を付ける | 表示データ取り込み元ファイルの指定 |
クライアント(テンプレートを利用する画面)で使うタグ
| composition | define | include |
|---|---|---|
| template属性必須 使用するテンプレートを指定 | 表示データの場所を指定(insertと対応) | 表示データ取り込み元ファイルの指定 |
コード例
パーツ
header.xhtml
<h1>書籍管理システム</h1>
content.xhtml
<html>
<head><title>テストタイトル</title></head>
<body>
<ui:composition>
<h2>コンテンツ内容</h2>
<p>〜〜〜〜〜〜〜〜〜</p>
</ui:composition>
</body>
</html>
<h1></h1>
footer.xhtml
<h1>hugahuga.com</h1>
テンプレート
template.xhtml
<ui:insert name ="top">
<ui:include src ="/header.xhtml" />
</ui:insert>
<ui:insert name ="content" />
<ui:insert name ="bottom">
<ui:include src ="/footer.xhtml" />
</ui:insert>
クライアント(テンプレートを利用する画面)
index.xhtml
<ui:composition template="/templates/template.xhtml">
<ui:define name ="content">
<ui:include src="content.xhtml" />
</ui:define>
<ui:composition>