Shale Clay Plugin その６

java shale

Clayのレイアウト機能に触れてみます．
HTMLテンプレートを利用したレイアウト機能は，S2JSFやFaceletsにも用意されています．
当然，Clayにも採用されています（いるはずです）．

しかし今回は，ちょっと自信ありません．正しい使い方がわかりません．．．

まずはやってみましょう．

準備

layout.html

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>@title</title>
</head>
<body>
<span jsfid="clay:clay" clayJsfid="@headercontent" allowBody="false">Header<br/></span>
<span jsfid="clay:clay" clayJsfid="@bodycontent" allowBody="false">Body<br/></span>
<span jsfid="clay:clay" clayJsfid="@footercontent" allowBody="false">Footer<br/></span>
</body>
</html>

header.html

<html xmlns="http://www.w3.org/1999/xhtml" jsfid="void" >
<head jsfid="void" allowbody="false">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ヘッダモック</title>
</head>
<body jsfid="void">
<div style="background-color: green;">
ヘッダ
</div>
</body>
</html>

footer.html

<html xmlns="http://www.w3.org/1999/xhtml" jsfid="void">
<head jsfid="void" allowbody="false">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>フッタモック</title>
</head>
<body jsfid="void">
<div style="background-color: blue;">
フッタ
</div>
</body>
</html>

clay-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE view PUBLIC
      "-//Apache Software Foundation//DTD Shale Clay View Configuration 1.0//EN"
      "http://struts.apache.org/dtds/shale-clay-config_1_0.dtd">

<view>
    <component jsfid="layout" extends="clay">
        <attributes>
            <set name="clayJsfid" value="/layout.html" />
        </attributes>
        <symbols>
            <set name="@title" value="ディフォルトタイトル" />
            <set name="@headercontent" value="/header.html" />
            <set name="@bodycontent" value="space" />
            <set name="@footercontent" value="/footer.html" />
        </symbols>
    </component>
</view>

body.html

<html xmlns="http://www.w3.org/1999/xhtml"
    jsfid="layout"
    title="ボディ１"
    bodycontent="/body1.html">
<head jsfid="void" allowbody="false">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ボディ１</title>
</head>
<body jsfid="void" allowbody="false">
ダミーボディ
</body>
</html>

body1.html（2006/06/20 修正）

<html xmlns="http://www.w3.org/1999/xhtml" jsfid="void">
<head jsfid="void" allowbody="false">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ボディ１</title>
</head>
<body jsfid="void">
<div style="background-color: red;">
ぼでぃ．
</div>
</body>
</html>

動かしてみる

http://localhost:8080/sample/body.html

表示されましたね．．．
しかし，なんだか無駄な作業が含まれている気がします．
いや，bodyのHTMLが明らかにおかしい．．．

layout.html
ここでは，@でシンボルを定義しています．
@title，@headercontent，@bodycontent，@footercontentのシンボルはclay-config.xmlで定義されます．

clay-config.xml

<symbols>
    <set name="@title" value="ディフォルトタイトル" />
    <set name="@headercontent" value="/header.html" />
    <set name="@bodycontent" value="space" />
    <set name="@footercontent" value="/footer.html" />
</symbols>

@headercontentでは，/header.htmlを指定しています．
@footercontentでは，/footer.htmlを指定しています．

body.html

<html xmlns="http://www.w3.org/1999/xhtml"
    jsfid="layout"
    title="ボディ１"
    bodycontent="/body1.html">

jsfidには，clay-config.xmlで定義した'layout'を定義します．
title，bodycontentを上書きしています．
この指定によって，タイトルに"ボディ１"，コンテンツに"body1.html"が定義されます．

そして，最後にbody1.htmlで実際のbodyの中身が定義されます．．．
この，body.htmlとbody1.htmlが１つにならないとかなり面倒くさいですよね．
これは，使い方を間違っているのだろうか？

もう少し，調べる必要がありそうです．．．