About

General

Teeda Core

Teeda Extension

Teeda Ajax

プロジェクト文書

モジュール

Built by Maven

テンプレートXHTML

概要

Teeda Extensionのテンプレートファイルは， XHTMLで記述します．

基本形

Teeda Extensionで使用するテンプレートXHTMLファイルの基本形は， 以下のようになります．

<!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>

宣言

XML宣言

必要に応じて， XHTMLファイルの先頭にXML宣言を記述します．

<?xml version="1.0" encoding="UTF-8"?>

XHTMLファイルのエンコーディングがUnicode系 (UTF-8やUTF-16等) 以外の場合，XML宣言が必須となります．

注意点

IE6など，ブラウザによってはXML宣言があると標準準拠モードではなく， 後方互換モードでレンダリングされてしまう場合があります． 標準準拠モードでのレンダリングを期待する場合は， XHTMLファイルはUTF-8で記述し， XML宣言を省略します．

文書型宣言

XML宣言を記述した場合はその後に，省略した場合はファイルの先頭に， 以下のいずれかの文書型宣言を記述します．

XHTML-1.0-Strict

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML-1.0-Transitional

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML-1.0-Frameset

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
注意点

この他の文書型宣言を指定すると， システムIDで指定されたURLからDTDを取得するために， ネットワークアクセスが発生する場合があります．

名前空間宣言

ルート要素 ( <html> ) で名前空間を宣言します．

デフォルト名前空間

デフォルト名前空間としてXHTMLの名前空間を宣言します．

    xmlns="http://www.w3.org/1999/xhtml"

te名前空間

Teeda Extension拡張要素 や Teeda Extension拡張属性 を使う場合は， Teeda Extensionの名前空間を接頭辞 te で宣言します． 

    xmlns:te="http://www.seasar.org/teeda/extension"

言語属性

XHTMLファイルが含むコンテンツの言語を ルート要素 ( <html> ) で指定することができます．

指定する場合は，XMLの xml:lang 属性と，XHTMLの lang 属性の両方を指定します． 

    xml:lang="ja"
    lang="ja"

meta要素でのエンコーディング指定

<head> 要素の 最初 に， <meta> 要素でエンコーディングを指定します． 

    <head>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <title>...</title>
        ...
    </head>
注意点

ブラウザによっては， <meta> 要素より先に非ASCII文字を含む <title> 要素があると， <meta> による指定を参照する前にエンコーディングの自動判定を行われてしまう場合があります． また， <meta> 要素がファイル内の先頭から一定の範囲内にないと参照しないブラウザもあるため， <script> 要素や <style> 要素等， 文字数が多くなりやすい要素より後に記述すると， エンコーディングの自動判定を行われてしまう場合があります．

Teeda Extension拡張要素

Teeda Extension拡張要素を使用するには， 名前空間宣言 で te名前空間 を宣言する必要があります．

te:include要素

他のHTMLを取り込む場所を指定するための要素です．

Teeda Extensionの実行時， <te:include> 要素の開始タグおよび終了タグはレンダリングされません． 要素の内容として， src 属性で指定されたHTMLの <body> 要素の内容がレンダリングされます (開始タグと終了タグはレンダリングされません)．

属性
id (任意)
インクルードされたHTMLを識別する名称を指定します． この名称は，インクルードされたHTML内の <form> 要素や <input> 要素の name 属性などでプレフィックスとして使用されるため， 常に指定する ことを強く推奨します．
src 属性
インクルードするHTMLへのパスを， この要素を記述したHTMLからの相対パスで指定します．

te:includeChildBody要素

レイアウト を定義するHTMLの中で， アクセスされた本体のHTMLを取り込む場所を指定するための要素です．

注意点

<te:includeChildBody> 要素は， レイアウトを定義するHTMLの中で， 1カ所だけ 記述することができます．

条件制御 と組み合わせて「実行時に1回」となるような記述をすることも できません ．

Teeda Extensionの実行時， <te:includeChildBody> 要素の開始タグおよび終了タグはレンダリングされません． 要素の内容として， アクセスされたHTML本体の <body> 要素の内容がレンダリングされます (開始タグと終了タグはレンダリングされません)．

属性
id (任意)
アクセスされたHTML本体を識別する名称を指定します． この名称は，アクセスされたHTML本体内の <form> 要素や <input> 要素の name 属性などでプレフィックスとして使用されるため， 常に指定する ことを強く推奨します．

Teeda Extension拡張属性

Teeda Extension拡張属性を使用するには， 名前空間宣言 で te名前空間 を宣言する必要があります．

te:col属性

te:col 属性は， ラジオボタン (動的) や チェックボックス (複数) を使って項目を横に並べる場合 ( te:layout 属性が lineDirection ) に，1行あたりに表示する項目数を指定します．

指定可能な要素
  • <span>
  • <div>

te:fraction属性

te:fraction 属性は， 数値入力テキストフィールド を使う場合に， 小数部の有効桁数を指定します．

指定可能な要素
  • <input>

te:fractionSeparator属性

te:fractionSeparator 属性は， 数値入力テキストフィールド を使う場合に， 整数部と小数部の区切り文字を指定します． デフォルトはピリオド ( '.' ) です．

指定可能な要素
  • <input>

te:groupingSeparator属性

te:groupingSeparator 属性は， 数値入力テキストフィールド を使う場合に， 整数部を3桁ごとのグループに区切る文字を指定します． デフォルトはカンマ ( ',' ) です．

指定可能な要素
  • <input>

te:layout属性

te:layout 属性は， ラジオボタン (動的) や チェックボックス (複数) を使って項目をレイアウトする方法を指定します．

指定可能な値
lineDirection (デフォルト)
項目を横に並べます． te:col属性 が指定されている場合は，指定された数で折り返します．
pageDirection
項目を縦に並べます．
none
レイアウトを行いません．
指定可能な要素
  • <span>
  • <div>

te:omittag属性

te:omittag 属性は， テキスト出力 場合や， 繰り返し ， 条件制御 で，開始タグ・終了タグの出力を制御します．

指定可能な値
true
開始タグ・終了タグの出力を抑止します (タグは出力されません)．
false
開始タグ・終了タグを出力を抑止しません (タグは出力されます)．
指定可能な要素

<span> 要素や <div> 要素等， テキスト出力 ・ 繰り返し ・ 条件制御 で使用可能な要素．

te:onTeedaError属性

te:onTeedaError 属性は， 入力フォーム で使用可能な入力項目がバリデーションでエラーとなった際に， 該当項目の class 属性に設定されるスタイルを指定します． デフォルトは "onTeedaError" です．

指定可能な要素
  • <input>
  • <textarea>
  • <select>

te:renderJs属性

te:renderJs 属性は， サブミットボタン で 二重サブミットをクライアント側で防止する ためのスクリプトを出力する場合に指定します．

指定可能な値
true
スクリプトを出力します．
false
スクリプトを出力しません．
指定可能な要素
  • <input>

te:time属性

te:time 属性は， サブミットボタン で 二重サブミットをクライアント側で防止する 場合に，サーバからの応答を待つタイムアウト時間を指定します．

指定可能な要素
  • <input>

HTMLとの相違点

XHTMLはHTMLとよく似ていますが， HTMLがSGMLをベースとするのに対して， XHTMLはXMLをベースとするため， 細かな違いが少なからずあります．

以下では， XHTMLとHTMLの主要な相違点を説明します． より詳細な情報は， XHTMLの仕様書や解説書を参照してください．

要素名・属性名は小文字

HTMLと異なり，XHTMLの要素名は大文字・小文字が区別されます． XHTMLの要素名および属性名は小文字のみを使用します． 

<input type="text" />

終了タグは省略しない

HTMLと異なり，XHTMLでは終了タグを省略することはできません． 必ず終了タグを記述します．

<ul>
    <li>項目1</li>
</ul>

EMPTY要素は最小化形式

<br> 要素や <hr> など， 内容を持つことのない要素 (EMPTY要素) は以下のように最小化形式で記述します． 要素名と "/" の間には空白を入れます． 

<br />

内容を持つことができる要素の場合は，内容が空でも最小化形式を使用しないで記述します．

<p></p>

属性は引用符で囲む

HTMLと異なり，XHTMLでは属性値を必ず引用符で囲みます．

<input type="text" />

論理値の属性は値を省略しない

HTMLと異なり， <input> 要素の checked 属性のような論理値の属性は，必ず属性名と同じ値を記述します． 

<input type="radio" checked="checked" />

規定の属性値は小文字

HTMLと異なり，XHTMLでは <form> 要素の method 属性で使用する "post" 等の規定値は， 大文字・小文字が区別されます． XHTMLの属性の規定値は， 小文字のみを使用します． 

<form method="post">

属性値の&は必ずエスケープする

<a> 要素の href 属性でURLを指定する場合など， 属性値に "&" を含める場合は，必ず "&amp;" と記述します． 

<a href="foo.html?aaa=xxx&amp;bbb=yyy">foo</a>

属性値内で改行しない

属性値の中に改行を含めないようにします．

スクリプトやスタイルシートは外部ファイルに

"&" ， "<" ， "--" ， "]]>" 等を含むスクリプトやCSSを使う場合は， 原則として外部ファイルに記述します．

どうしてもXHTMLファイル内に記述する必要がある場合は， CDATAセクションを使用します (スクリプトやCSS全体をコメントで囲まないようにします)． 

<script type="text/javascript">
//<![CDATA[
function hoge() {
  for(i = 0; i < 10; i++) {
    alert("hoge");
  }
}
//]]>
</script>

参考情報