プレビュー
プレビュー時のみ要素を表示するには
要素の
id
属性を
mock
で始まる値にします．
例：テンプレートHTML (foo.html)
<span id="mockMessage">このメッセージはプレビュー時のみ表示されます</span>
Teeda Extensionで実行する場合，
id
属性が
mock
で始まる要素はレンダリングされません．
プレビュー時にサブミットボタンで画面遷移するには
<input>
要素の
type
属性を
"button"
にして，
onclick
属性で
location.href
プロパティを変更して画面遷移します．
例：テンプレートHTML (foo.html)
<input type="button" id="doNext" value="次へ" onclick="location.href='next.html'" />
プレビュー時にボタンをクリックすると，
onclick
属性で指定した画面に遷移します．
Teeda Extensionで実行する場合，属性値が
location.href
で始まる
onclick
属性はレンダリングされません．
プレビューでレイアウトを確認にするには
Kumu のレイアウト機能を使用します．
本体のHTMLに
<script>
要素を記述し，
src
属性で
kumu.js
を指定します． その際， パラメータでKumuのinclude機能を有効にする指定と，
レイアウトHTMLへのパスを指定します．
レイアウトHTMLでは，
<te:includeChildBody>
要素と同じ位置に
id
属性が
mockIncludeChildBody
の
div
要素を，
<te:include>
要素と同じ位置に
id
属性が
mockInclude
で始まり，
src
属性でインクルードするHTMLへのパスを指定した
div
要素を記述します．
例：本体のテンプレートHTML (foo/foo.html)
<script type="text/javascript" src="./js/kumu.js?mockInclude=true&layout=../layout/layout.html"></script>
例：レイアウトのテンプレートHTML (layout/layout.html)
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:te="http://www.seasar.org/teeda/extension"
xml:lang="ja"
lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>...</title>
</head>
<body>
<p>ここからchild</p>
<table border="1">
<tr>
<td>
<te:include id="includeHeader" te:src="/layout/header.html"/>
<div id="mockIncludeHeader" src="../layout/header.html"></div>
</td>
</tr>
<tr>
<td>
<te:includeChildBody id="includeChildBody"/>
<div id="mockIncludeChildBody"></div>
</td>
</tr>
<tr>
<td>
<te:include id="includeFooter" te:src="/layout/footer.html"/>
<div id="mockIncludeFooter" src="../layout/footer.html"></div>
</td>
</tr>
</table>
</body>
</html>
レイアウトHTMLの中で，
<div>
要素の
src
属性に指定するパスは， レイアウトHTMLからのパスではなく， 本体のHTML (上の例では
foo/foo.html
) からのパスとして解釈されます．
階層の異なるHTMLでレイアウトを使用する場合は注意が必要です．