<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE document
	PUBLIC "-//Apache Software Foundation//DTD XDOC 1.0//EN"
	"http://maven.apache.org/dtd/xdoc_1_0.dtd">
<document>
	<properties>
		<title>Extension - リファレンス - テンプレートXHTML</title>
	</properties>
	<body>
		<section name="テンプレートXHTML">
			<ul>
				<li>
					<a href="#概要">概要</a>
				</li>
				<li>
					<a href="#基本形">基本形</a>
				</li>
				<li>
					<a href="#宣言">宣言</a>
					<ul>
						<li>
							<a href="#XML宣言">XML宣言</a>
						</li>
						<li>
							<a href="#文書型宣言">文書型宣言</a>
						</li>
						<li>
							<a href="#名前空間宣言">名前空間宣言</a>
						</li>
						<li>
							<a href="#言語属性">言語属性</a>
						</li>
						<li>
							<a href="#meta要素でのエンコーディング指定">
								meta要素でのエンコーディング指定
							</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#Teeda_Extension拡張要素">
						Teeda Extension拡張要素
					</a>
					<ul>
						<li>
							<a href="#te:include要素">te:include要素</a>
						</li>
						<li>
							<a href="#te:includeChildBody要素">
								te:includeChildBody要素
							</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#Teeda_Extension拡張属性">
						Teeda Extension拡張属性
					</a>
					<ul>
						<li>
							<a href="#te:col属性">te:col属性</a>
						</li>
						<li>
							<a href="#te:fraction属性">te:fraction属性</a>
						</li>
						<li>
							<a href="#te:fractionSeparator属性">
								te:fractionSeparator属性
							</a>
						</li>
						<li>
							<a href="#te:groupingSeparator属性">
								te:groupingSeparator属性
							</a>
						</li>
						<li>
							<a href="#te:layout属性">te:layout属性</a>
						</li>
						<li>
							<a href="#te:omittag属性">te:omittag属性</a>
						</li>
						<li>
							<a href="#te:onTeedaError属性">
								te:onTeedaError属性
							</a>
						</li>
						<li>
							<a href="#te:renderJs属性">te:renderJs属性</a>
						</li>
						<li>
							<a href="#te:time属性">te:time属性</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#HTMLとの相違点">HTMLとの相違点</a>
					<ul>
						<li>
							<a href="#要素名属性名は小文字">要素名・属性名は小文字</a>
						</li>
						<li>
							<a href="#終了タグは省略しない">終了タグは省略しない</a>
						</li>
						<li>
							<a href="#EMPTY要素は最小化形式">EMPTY要素は最小化形式</a>
						</li>
						<li>
							<a href="#属性は引用符で囲む">属性は引用符で囲む</a>
						</li>
						<li>
							<a href="論理値の属性は値を省略しない">論理値の属性は値を省略しない</a>
						</li>
						<li>
							<a href="#規定の属性値は小文字">規定の属性値は小文字</a>
						</li>
						<li>
							<a href="#属性値のは必ずエスケープする">
								属性値の&amp;は必ずエスケープする
							</a>
						</li>
						<li>
							<a href="#属性値内で改行しない">属性値内で改行しない</a>
						</li>
						<li>
							<a href="#スクリプトやスタイルシートは外部ファイルに">
								スクリプトやスタイルシートは外部ファイルに
							</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#参考情報">参考情報</a>
				</li>
			</ul>
		</section>

		<section name="概要">
			<p>Teeda Extensionのテンプレートファイルは， XHTMLで記述します．</p>
		</section>

		<section name="基本形">
			<p>Teeda Extensionで使用するテンプレートXHTMLファイルの基本形は， 以下のようになります．</p>
			<source><![CDATA[
<!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>
        ...
    </body>
</html>
]]></source>
		</section>

		<section name="宣言">
			<subsection name="XML宣言">
				<p>必要に応じて， XHTMLファイルの先頭にXML宣言を記述します．</p>
				<source><![CDATA[
<?xml version="1.0" encoding="UTF-8"?>
]]></source>
				<p>
					XHTMLファイルのエンコーディングがUnicode系 (UTF-8やUTF-16等)
					以外の場合，XML宣言が必須となります．
				</p>
				<div class="caution">
					<div>注意点</div>
					<p>
						IE6など，ブラウザによってはXML宣言があると標準準拠モードではなく，
						後方互換モードでレンダリングされてしまう場合があります．
						標準準拠モードでのレンダリングを期待する場合は， XHTMLファイルはUTF-8で記述し，
						XML宣言を省略します．
					</p>
				</div>
			</subsection>

			<subsection name="文書型宣言">
				<p>
					XML宣言を記述した場合はその後に，省略した場合はファイルの先頭に，
					以下のいずれかの文書型宣言を記述します．
				</p>
				<h4>XHTML-1.0-Strict</h4>
				<source><![CDATA[
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
]]></source>
				<h4>XHTML-1.0-Transitional</h4>
				<source><![CDATA[
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
]]></source>
				<h4>XHTML-1.0-Frameset</h4>
				<source><![CDATA[
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
]]></source>
				<div class="caution">
					<div>注意点</div>
					<p>
						この他の文書型宣言を指定すると， システムIDで指定されたURLからDTDを取得するために，
						ネットワークアクセスが発生する場合があります．
					</p>
				</div>
			</subsection>

			<subsection name="名前空間宣言">
				<p>
					ルート要素 (
					<code>&lt;html&gt;</code>
					) で名前空間を宣言します．
				</p>
				<h4>デフォルト名前空間</h4>
				<p>デフォルト名前空間としてXHTMLの名前空間を宣言します．</p>
				<source><![CDATA[
    xmlns="http://www.w3.org/1999/xhtml"
]]></source>
				<h4>
					<a name="te名前空間">te名前空間</a>
				</h4>
				<p>
					<a href="#Teeda_Extension拡張要素">
						Teeda Extension拡張要素
					</a>
					や
					<a href="#Teeda_Extension拡張属性">
						Teeda Extension拡張属性
					</a>
					を使う場合は， Teeda Extensionの名前空間を接頭辞
					<code>te</code>
					で宣言します．
				</p>
				<source><![CDATA[
    xmlns:te="http://www.seasar.org/teeda/extension"
]]></source>
			</subsection>

			<subsection name="言語属性">
				<p>
					XHTMLファイルが含むコンテンツの言語を ルート要素 (
					<code>&lt;html&gt;</code>
					) で指定することができます．
				</p>
				<p>
					指定する場合は，XMLの
					<code>xml:lang</code>
					属性と，XHTMLの
					<code>lang</code>
					属性の両方を指定します．
				</p>
				<source><![CDATA[
    xml:lang="ja"
    lang="ja"
]]></source>
			</subsection>

			<subsection name="meta要素でのエンコーディング指定">
				<p>
					<code>&lt;head&gt;</code>
					要素の
					<strong>最初</strong>
					に，
					<code>&lt;meta&gt;</code>
					要素でエンコーディングを指定します．
				</p>
				<source><![CDATA[
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <title>...</title>
        ...
    </head>
]]></source>
				<div class="caution">
					<div>注意点</div>
					<p>
						ブラウザによっては，
						<code>&lt;meta&gt;</code>
						要素より先に非ASCII文字を含む
						<code>&lt;title&gt;</code>
						要素があると，
						<code>&lt;meta&gt;</code>
						による指定を参照する前にエンコーディングの自動判定を行われてしまう場合があります． また，
						<code>&lt;meta&gt;</code>
						要素がファイル内の先頭から一定の範囲内にないと参照しないブラウザもあるため，
						<code>&lt;script&gt;</code>
						要素や
						<code>&lt;style&gt;</code>
						要素等， 文字数が多くなりやすい要素より後に記述すると，
						エンコーディングの自動判定を行われてしまう場合があります．
					</p>
				</div>
			</subsection>
		</section>

		<section name="Teeda Extension拡張要素">
			<p>
				Teeda Extension拡張要素を使用するには，
				<a href="#名前空間宣言">名前空間宣言</a>
				で
				<a href="#te名前空間">te名前空間</a>
				を宣言する必要があります．
			</p>

			<subsection name="te:include要素">
				<p>他のHTMLを取り込む場所を指定するための要素です．</p>
				<p>
					Teeda Extensionの実行時，
					<code>&lt;te:include&gt;</code>
					要素の開始タグおよび終了タグはレンダリングされません． 要素の内容として，
					<code>src</code>
					属性で指定されたHTMLの
					<code>&lt;body&gt;</code>
					要素の内容がレンダリングされます (開始タグと終了タグはレンダリングされません)．
				</p>
				<h5>属性</h5>
				<dl>
					<dt>
						<code>id</code>
						(任意)
					</dt>
					<dd>
						インクルードされたHTMLを識別する名称を指定します．
						この名称は，インクルードされたHTML内の
						<code>&lt;form&gt;</code>
						要素や
						<code>&lt;input&gt;</code>
						要素の
						<code>name</code>
						属性などでプレフィックスとして使用されるため，
						<strong>常に指定する</strong>
						ことを強く推奨します．
					</dd>
					<dt>
						<code>src</code>
						属性
					</dt>
					<dd>
						インクルードするHTMLへのパスを， この要素を記述したHTMLからの相対パスで指定します．
					</dd>
				</dl>
			</subsection>

			<subsection name="te:includeChildBody要素">
				<p>
					<a href="../concept/layout.html">レイアウト</a>
					を定義するHTMLの中で， アクセスされた本体のHTMLを取り込む場所を指定するための要素です．
				</p>
				<div class="caution">
					<div>注意点</div>
					<p>
						<code>&lt;te:includeChildBody&gt;</code>
						要素は， レイアウトを定義するHTMLの中で，
						<strong>1カ所だけ</strong>
						記述することができます．
					</p>
					<p>
						<a href="../reverse/condition.html">条件制御</a>
						と組み合わせて「実行時に1回」となるような記述をすることも
						<strong>できません</strong>
						．
					</p>
				</div>
				<p>
					Teeda Extensionの実行時，
					<code>&lt;te:includeChildBody&gt;</code>
					要素の開始タグおよび終了タグはレンダリングされません． 要素の内容として， アクセスされたHTML本体の
					<code>&lt;body&gt;</code>
					要素の内容がレンダリングされます (開始タグと終了タグはレンダリングされません)．
				</p>
				<h5>属性</h5>
				<dl>
					<dt>
						<code>id</code>
						(任意)
					</dt>
					<dd>
						アクセスされたHTML本体を識別する名称を指定します．
						この名称は，アクセスされたHTML本体内の
						<code>&lt;form&gt;</code>
						要素や
						<code>&lt;input&gt;</code>
						要素の
						<code>name</code>
						属性などでプレフィックスとして使用されるため，
						<strong>常に指定する</strong>
						ことを強く推奨します．
					</dd>
				</dl>
			</subsection>
		</section>

		<section name="Teeda Extension拡張属性">
			<p>
				Teeda Extension拡張属性を使用するには，
				<a href="#名前空間宣言">名前空間宣言</a>
				で
				<a href="#te名前空間">te名前空間</a>
				を宣言する必要があります．
			</p>

			<subsection name="te:col属性">
				<p>
					<code>te:col</code>
					属性は，
					<a href="../reverse/input.html#ラジオボタン_動的">
						ラジオボタン (動的)
					</a>
					や
					<a href="../reverse/input.html#チェックボックス_複数項目">
						チェックボックス (複数)
					</a>
					を使って項目を横に並べる場合 (
					<code>te:layout</code>
					属性が
					<code>lineDirection</code>
					) に，1行あたりに表示する項目数を指定します．
				</p>
				<h5>指定可能な要素</h5>
				<ul>
					<li>
						<code>&lt;span&gt;</code>
					</li>
					<li>
						<code>&lt;div&gt;</code>
					</li>
				</ul>
			</subsection>

			<subsection name="te:fraction属性">
				<p>
					<code>te:fraction</code>
					属性は，
					<a href="../reverse/input.html#数値の入力を支援するには">
						数値入力テキストフィールド
					</a>
					を使う場合に， 小数部の有効桁数を指定します．
				</p>
				<h5>指定可能な要素</h5>
				<ul>
					<li>
						<code>&lt;input&gt;</code>
					</li>
				</ul>
			</subsection>

			<subsection name="te:fractionSeparator属性">
				<p>
					<code>te:fractionSeparator</code>
					属性は，
					<a href="../reverse/input.html#数値の入力を支援するには">
						数値入力テキストフィールド
					</a>
					を使う場合に， 整数部と小数部の区切り文字を指定します． デフォルトはピリオド (
					<code>'.'</code>
					) です．
				</p>
				<h5>指定可能な要素</h5>
				<ul>
					<li>
						<code>&lt;input&gt;</code>
					</li>
				</ul>
			</subsection>

			<subsection name="te:groupingSeparator属性">
				<p>
					<code>te:groupingSeparator</code>
					属性は，
					<a href="../reverse/input.html#数値の入力を支援するには">
						数値入力テキストフィールド
					</a>
					を使う場合に， 整数部を3桁ごとのグループに区切る文字を指定します． デフォルトはカンマ (
					<code>','</code>
					) です．
				</p>
				<h5>指定可能な要素</h5>
				<ul>
					<li>
						<code>&lt;input&gt;</code>
					</li>
				</ul>
			</subsection>

			<subsection name="te:layout属性">
				<p>
					<code>te:layout</code>
					属性は，
					<a href="../reverse/input.html#ラジオボタン_動的">
						ラジオボタン (動的)
					</a>
					や
					<a href="../reverse/input.html#チェックボックス_複数項目">
						チェックボックス (複数)
					</a>
					を使って項目をレイアウトする方法を指定します．
				</p>
				<h5>指定可能な値</h5>
				<dl>
					<dt>
						<code>lineDirection</code>
						(デフォルト)
					</dt>
					<dd>
						項目を横に並べます．
						<code>
							<a href="#te:col属性">te:col属性</a>
						</code>
						が指定されている場合は，指定された数で折り返します．
					</dd>
					<dt>
						<code>pageDirection</code>
					</dt>
					<dd>項目を縦に並べます．</dd>
					<dt>
						<code>none</code>
					</dt>
					<dd>レイアウトを行いません．</dd>
				</dl>
				<h5>指定可能な要素</h5>
				<ul>
					<li>
						<code>&lt;span&gt;</code>
					</li>
					<li>
						<code>&lt;div&gt;</code>
					</li>
				</ul>
			</subsection>

			<subsection name="te:omittag属性">
				<p>
					<code>te:omittag</code>
					属性は，
					<a href="../reverse/output.html">テキスト出力</a>
					場合や，
					<a href="../reverse/foreach.html">繰り返し</a>
					，
					<a href="../reverse/condition.html">条件制御</a>
					で，開始タグ・終了タグの出力を制御します．
				</p>
				<h5>指定可能な値</h5>
				<dl>
					<dt>
						<code>true</code>
					</dt>
					<dd>開始タグ・終了タグの出力を抑止します (タグは出力されません)．</dd>
					<dt>
						<code>false</code>
					</dt>
					<dd>開始タグ・終了タグを出力を抑止しません (タグは出力されます)．</dd>
				</dl>
				<h5>指定可能な要素</h5>
				<p>
					<code>&lt;span&gt;</code>
					要素や
					<code>&lt;div&gt;</code>
					要素等，
					<a href="../reverse/output.html">テキスト出力</a>
					・
					<a href="../reverse/foreach.html">繰り返し</a>
					・
					<a href="../reverse/condition.html">条件制御</a>
					で使用可能な要素．
				</p>
			</subsection>

			<subsection name="te:onTeedaError属性">
				<p>
					<code>te:onTeedaError</code>
					属性は，
					<a href="../reverse/input.html">入力フォーム</a>
					で使用可能な入力項目がバリデーションでエラーとなった際に， 該当項目の
					<code>class</code>
					属性に設定されるスタイルを指定します． デフォルトは
					<code>"onTeedaError"</code>
					です．
				</p>
				<h5>指定可能な要素</h5>
				<ul>
					<li>
						<code>&lt;input&gt;</code>
					</li>
					<li>
						<code>&lt;textarea&gt;</code>
					</li>
					<li>
						<code>&lt;select&gt;</code>
					</li>
				</ul>
			</subsection>

			<subsection name="te:renderJs属性">
				<p>
					<code>te:renderJs</code>
					属性は，
					<a href="../reverse/input.html#サブミットボタン">
						サブミットボタン
					</a>
					で
					<a
						href="../reverse/input.html#二重サブミットをクライアント側で防止するには">
						二重サブミットをクライアント側で防止する
					</a>
					ためのスクリプトを出力する場合に指定します．
				</p>
				<h5>指定可能な値</h5>
				<dl>
					<dt>
						<code>true</code>
					</dt>
					<dd>スクリプトを出力します．</dd>
					<dt>
						<code>false</code>
					</dt>
					<dd>スクリプトを出力しません．</dd>
				</dl>
				<h5>指定可能な要素</h5>
				<ul>
					<li>
						<code>&lt;input&gt;</code>
					</li>
				</ul>
			</subsection>

			<subsection name="te:time属性">
				<p>
					<code>te:time</code>
					属性は，
					<a href="../reverse/input.html#サブミットボタン">
						サブミットボタン
					</a>
					で
					<a
						href="../reverse/input.html#二重サブミットをクライアント側で防止するには">
						二重サブミットをクライアント側で防止する
					</a>
					場合に，サーバからの応答を待つタイムアウト時間を指定します．
				</p>
				<h5>指定可能な要素</h5>
				<ul>
					<li>
						<code>&lt;input&gt;</code>
					</li>
				</ul>
			</subsection>
		</section>

		<section name="HTMLとの相違点">
			<p>
				XHTMLはHTMLとよく似ていますが， HTMLがSGMLをベースとするのに対して，
				XHTMLはXMLをベースとするため， 細かな違いが少なからずあります．
			</p>
			<p>
				以下では， XHTMLとHTMLの主要な相違点を説明します． より詳細な情報は，
				XHTMLの仕様書や解説書を参照してください．
			</p>

			<subsection name="要素名・属性名は小文字">
				<p>
					HTMLと異なり，XHTMLの要素名は大文字・小文字が区別されます．
					XHTMLの要素名および属性名は小文字のみを使用します．
				</p>
				<source><![CDATA[
<input type="text" />
]]></source>
			</subsection>

			<subsection name="終了タグは省略しない">
				<p>HTMLと異なり，XHTMLでは終了タグを省略することはできません． 必ず終了タグを記述します．</p>
				<source><![CDATA[
<ul>
    <li>項目1</li>
</ul>
]]></source>
			</subsection>

			<subsection name="EMPTY要素は最小化形式">
				<p>
					<code>&lt;br&gt;</code>
					要素や
					<code>&lt;hr&gt;</code>
					など， 内容を持つことのない要素 (EMPTY要素) は以下のように最小化形式で記述します． 要素名と
					<code>"/"</code>
					の間には空白を入れます．
				</p>
				<source><![CDATA[
<br />
]]></source>
				<p>内容を持つことができる要素の場合は，内容が空でも最小化形式を使用しないで記述します．</p>
				<source><![CDATA[
<p></p>
]]></source>
			</subsection>

			<subsection name="属性は引用符で囲む">
				<p>HTMLと異なり，XHTMLでは属性値を必ず引用符で囲みます．</p>
				<source><![CDATA[
<input type="text" />
]]></source>
			</subsection>

			<subsection name="論理値の属性は値を省略しない">
				<p>
					HTMLと異なり，
					<code>&lt;input&gt;</code>
					要素の
					<code>checked</code>
					属性のような論理値の属性は，必ず属性名と同じ値を記述します．
				</p>
				<source><![CDATA[
<input type="radio" checked="checked" />
]]></source>
			</subsection>

			<subsection name="規定の属性値は小文字">
				<p>
					HTMLと異なり，XHTMLでは
					<code>&lt;form&gt;</code>
					要素の
					<code>method</code>
					属性で使用する
					<code>"post"</code>
					等の規定値は， 大文字・小文字が区別されます． XHTMLの属性の規定値は， 小文字のみを使用します．
				</p>
				<source><![CDATA[
<form method="post">
]]></source>
			</subsection>

			<subsection name="属性値の&amp;は必ずエスケープする">
				<p>
					<code>&lt;a&gt;</code>
					要素の
					<code>href</code>
					属性でURLを指定する場合など， 属性値に
					<code>"&amp;"</code>
					を含める場合は，必ず
					<code>"&amp;amp;"</code>
					と記述します．
				</p>
				<source><![CDATA[
<a href="foo.html?aaa=xxx&amp;bbb=yyy">foo</a>
]]></source>
			</subsection>

			<subsection name="属性値内で改行しない">
				<p>属性値の中に改行を含めないようにします．</p>
			</subsection>

			<subsection name="スクリプトやスタイルシートは外部ファイルに">
				<p>
					<code>"&amp;"</code>
					，
					<code>"&lt;"</code>
					，
					<code>"--"</code>
					，
					<code>"]]&gt;"</code>
					等を含むスクリプトやCSSを使う場合は， 原則として外部ファイルに記述します．
				</p>
				<p>
					どうしてもXHTMLファイル内に記述する必要がある場合は， CDATAセクションを使用します
					(スクリプトやCSS全体をコメントで囲まないようにします)．
				</p>
				<source><![CDATA[
<script type="text/javascript">
]]>//&lt;![CDATA[<![CDATA[
function hoge() {
  for(i = 0; i < 10; i++) {
    alert("hoge");
  }
}
//]]>]]&gt;<![CDATA[
</script>
]]></source>
			</subsection>
		</section>

		<section name="参考情報">
			<ul>
				<li>
					<a href="http://www.w3.org/TR/xhtml1/">
						XHTML 1.0 The Extensible HyperText Markup
						Language
					</a>
					(
					<a
						href="http://www.y-adagio.com/public/standards/tr_xhtml10/toc.htm">
						日本語
					</a>
					)
					<ul>
						<li>
							<a
								href="http://www.w3.org/TR/xhtml1/#guidelines">
								C. HTML Compatibility Guidelines
							</a>
							(
							<a
								href="http://www.y-adagio.com/public/standards/tr_xhtml10/anx_c.htm">
								日本語
							</a>
							)
						</li>
					</ul>
				</li>
			</ul>
		</section>
	</body>
</document>
