リビジョンの比較

テンプレート

リビジョン 176339:

リビジョン 176339 (編集者: Mgjbot / 編集日時:

リビジョン 176340:

リビジョン 176340 (編集者: Morishoji / 編集日時:

タイトル:
テンプレート
テンプレート
URL スラッグ:
XUL_Tutorial/Templates
XUL_Tutorial/Templates
タグ:
XUL, XUL_Tutorial, Tutorials
XUL, XUL_Tutorial, Tutorials
内容:

リビジョン 176339
リビジョン 176340
n8      {{template.PreviousNext("XUL Tutorial:Introduction to RDF",n8      {{ PreviousNext("XUL Tutorial:Introduction to RDF", "XUL Tu
> "XUL Tutorial:Trees and Templates")}}>torial:Trees and Templates") }}
9    </p>
10    <p>9    </p>
10    <p>
11      このセクションでは、データに基づい要素を生成する方法について見ていきます。11      このセクションでは、データに基づい要素を生成する方法について見ていきます。
12    </p>
12    </p>13    <p>
13    <h3 name=".E3.83.87.E3.83.BC.E3.82.BF.E3.81.AB.E5.9F.BA.E3.8114      {{ 英語版章題("Populating Elements") }}
>.A5.E3.81.8F.E8.A6.81.E7.B4.A0.E3.81.AE.E7.94.9F.E6.88.90"> 
15    </p>
16    <h3 id=".E3.83.87.E3.83.BC.E3.82.BF.E3.81.AB.E5.9F.BA.E3.81.A
 >5.E3.81.8F.E8.A6.81.E7.B4.A0.E3.81.AE.E7.94.9F.E6.88.90" name=".E
 >3.83.87.E3.83.BC.E3.82.BF.E3.81.AB.E5.9F.BA.E3.81.A5.E3.81.8F.E8.
 >A6.81.E7.B4.A0.E3.81.AE.E7.94.9F.E6.88.90">
n17      XUL には、RDF によって供給されるデータに基づいて要素を生成する機能が存在します。 このための供給源として、RDn20      XUL には、RDF によって供給されるデータに基づいて要素を生成する機能が存在します。 このための供給源として、RD
>F ファイルと内部データソース (datasource) の両方を利用することが可能です。 Mozilla では、ブックマークや履>F ファイルと内部{{ 原語併記("データソース", "datasource"}}の両方を利用することが可能です。 Mozil
>歴、あるいはメールメッセージなど、多くの情報がデータソースとして提供されます。 これらについては、<a href="ja/XUL_>la では、ブックマークや履歴、あるいはメールメッセージなど、多くの情報がデータソースとして提供されます。 これらについては、<a
>Tutorial/RDF_Datasources">後のセクション</a>で詳細に扱う予定です。> href="ja/XUL_Tutorial/RDF_Datasources">後のセクション</a>で詳細に扱う予定です。
18    </p>
19    <p>21    </p>
20      通常は、ツリー項目 (treeitem) やメニュー項目 (menuitem) といった要素が、データに基づいて生成さ
>れることになります。 また、必要な状況は限られているとしても、必要ならば他の要素を生成することも可能です。 ただし、ツリーやメニュ 
>ー項目の生成には多くのコードが必要になるので、 とりあえず、それ以外の簡単に記述できる要素を例にして説明を始めたいと思います。 
21    </p>22    <p>
23      通常は、{{ 原語併記("ツリー項目", "treeitem") }}や{{ 原語併記("メニュー項目", "menu
 >item") }}といった要素が、データに基づいて生成されることになります。 また、必要な状況は限られているとしても、必要ならば他
 >の要素を生成することも可能です。 といってもツリーやメニュー項目を生成するためには多くのコードを記述する必要があるので、 とりあえ
 >ず簡単に記述可能なそれ以外の要素を例にして説明を始めたいと思います。
22    <p>24    </p>
25    <p>
23      RDF データに基づいた要素の生成を行うためには、 簡単なテンプレートを生成される各要素の雛形になるように作成する必26      RDF データに基づいた要素の生成を行うためには、 簡単なテンプレートを生成される各要素の雛形になるように作成する必要
>要があります。 言い換えれば、最初の要素だけを作成しておいて、残りの要素はそれを元に自動構築させるのと本質的には変わらない作業にな>があります。 言い換えれば、最初の要素だけを作成しておいて、残りの要素はそれを元に自動構築させるのと本質的には変わらない作業になり
>ります。>ます。
24    </p>
25    <p>27    </p>
26      テンプレートは <code>{{template.XULElem("template")}}</code> 要素を使用
>して、 その中に自動構築される各要素の雛形となる要素を置いていくことで作成できます。 なお、<code>template</cod 
>e> 要素は、その場所に展開されることになるため、 構築された要素を置くのに適したコンテナ要素の中に置く必要があります。 例えばツ 
>リーの場合は、<code>template</code> 要素を <code>{{template.XULElem("tree") 
>}}</code> 要素内に置く必要があります。 
27    </p>28    <p>
28    <h4 name=".E7.B0.A1.E5.8D.98.E3.81.AA.E3.83.86.E3.83.B3.E3.8329      テンプレートは <code>{{ XULElem("template") }}</code> 要素を使用して、 その中
>.97.E3.83.AC.E3.83.BC.E3.83.88.E3.81.AE.E4.BE.8B">>に自動構築される各要素の雛形となる要素を置いていくことで作成できます。 なお、<code>template</code> 要素は、
 >その場所に展開されることになるため、 構築された要素を置くのに適したコンテナ要素の中に置く必要があります。 例えばツリーの場合は、
 ><code>template</code> 要素を <code>{{ XULElem("tree") }}</code> 要素内に
 >置く必要があります。
30    </p>
31    <p>
32      {{ 英語版章題("Simple Template Example") }}
33    </p>
34    <h4 id=".E7.B0.A1.E5.8D.98.E3.81.AA.E3.83.86.E3.83.B3.E3.83.9
 >7.E3.83.AC.E3.83.BC.E3.83.88.E3.81.AE.E4.BE.8B" name=".E7.B0.A1.E
 >5.8D.98.E3.81.AA.E3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.
 >83.88.E3.81.AE.E4.BE.8B">
n43      {{wiki.template('Block-title', [ "例 1" ])}}&nbsp;: {{wiki.tn49      {{ Block-title("例 1") }}&nbsp;: {{ Xultu-s("ex_templates_1.
>emplate('Xultu-s', [ "ex_templates_1.xul" ])}}>xul") }}
n53      <img alt="画像:templates1.jpg" src="File:ja/Media_Gallery/Temn59      <img alt="画像:templates1.jpg" fileid="1990" src="File:ja/Med
>plates1.jpg">>ia_Gallery/Templates1.jpg">
n56      この例を実行すると垂直ボックスが作成され、その中にトップレベルのブックマークに基づいて生成されたボタン群が 1 列に並n62      この例を実行すると垂直ボックスが作成され、その中にトップレベルのブックマークに基づいて生成されたボタン群が 1 列に並
>んで配置されます。 このコードでは、<code>template</code> 要素には <code>{{template.XUL>んで配置されます。 このコードでは、<code>template</code> 要素には <code>{{ XULElem("bu
>Elem("button")}}</code> 要素 1 つだけが含まれていますが、 このボタンを元にして、すべての必要なボタンが>tton") }}</code> 要素 1 つだけが含まれていますが、 このボタンを元にして、すべての必要なボタンが生成されること
>生成されることになります。 画像から、一連のボタンが生成され、それぞれが各ブックマークに対応していることが確認できると思います。>になります。 画像から、一連のボタンが生成され、それぞれが各ブックマークに対応していることが確認できると思います。
n61    <h4 name=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.8A.E8.A6.81.E7.B4n67    <p>
>.A0.E3.81.A8.E3.83.87.E3.83.BC.E3.82.BF.E3.82.BD.E3.83.BC.E3.82.B 
>9"> 
68      {{ 英語版章題("Container and Datasources") }}
69    </p>
70    <h4 id=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.8A.E8.A6.81.E7.B4.A
 >0.E3.81.A8.E3.83.87.E3.83.BC.E3.82.BF.E3.82.BD.E3.83.BC.E3.82.B9"
 > name=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.8A.E8.A6.81.E7.B4.A0.E3.
 >81.A8.E3.83.87.E3.83.BC.E3.82.BF.E3.82.BD.E3.83.BC.E3.82.B9">
n77    <h4 name=".E3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83n86    <p>
>.88.E5.86.85.E9.83.A8.E3.81.AE.E8.A8.98.E8.BF.B0"> 
87      {{ 英語版章題("Inside the Template") }}
88    </p>
89    <h4 id=".E3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83.8
 >8.E5.86.85.E9.83.A8.E3.81.AE.E8.A8.98.E8.BF.B0" name=".E3.83.86.E
 >3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83.88.E5.86.85.E9.83.A8.E3.
 >81.AE.E8.A8.98.E8.BF.B0">
n104    <h4 name=".E3.81.84.E3.82.8D.E3.81.84.E3.82.8D.E3.81.AA.E4.BEn116    <p>
>.8B"> 
117      {{ 英語版章題("More Examples") }}
118    </p>
119    <h4 id=".E3.81.84.E3.82.8D.E3.81.84.E3.82.8D.E3.81.AA.E4.BE.8
 >B" name=".E3.81.84.E3.82.8D.E3.81.84.E3.82.8D.E3.81.AA.E4.BE.8B">
n111      {{wiki.template('Block-title', [ "例 2" ])}}&nbsp;: {{wiki.tn126      {{ Block-title("例 2") }}&nbsp;: {{ Xultu-s("ex_templates_2.
>emplate('Xultu-s', [ "ex_templates_2.xul" ])}}>xul") }}
n133      {{wiki.template('Block-title', [ "例 3" ])}}&nbsp;: {{wiki.tn148      {{ Block-title("例 3") }}&nbsp;: {{ Xultu-s("ex_templates_3.
>emplate('Xultu-s', [ "ex_templates_3.xul" ])}}>xul") }}
n143    <h3 name=".E3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83n158    <p>
>.88.E3.81.AE.E3.83.93.E3.83.AB.E3.83.89.E5.8B.95.E4.BD.9C"> 
159      {{ 英語版章題("How Templates are Built") }}
160    </p>
161    <h3 id=".E3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83.8
 >8.E3.81.AE.E3.83.93.E3.83.AB.E3.83.89.E5.8B.95.E4.BD.9C" name=".E
 >3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83.88.E3.81.AE.E3.
 >83.93.E3.83.AB.E3.83.89.E5.8B.95.E4.BD.9C">
n147      要素に <code>datasources</code> 属性が設定されることが、その要素がテンプレートからビルドされn165      要素に <code>datasources</code> 属性が設定されることが、その要素がテンプレートからビルドされ
>ることを示すことになります。 コンテントをビルドする必要があるかどうかは、<code>template</code> タグではなく>ることを示すことになります。 コンテントをビルドする必要があるかどうかは、<code>template</code> タグではなく
>、 <code>datasources</code> 属性で判定されることに注意してください。 この属性が存在するとき、ビルダー >、 <code>datasources</code> 属性で判定されることに注意してください。 この属性が存在するとき、{{ 原語
>(builder) と呼ばれるオブジェクトが要素に付加されて、 テンプレートからコンテントをビルドする動作を遂行します。 なお、J>併記("ビルダー", "builder"}}と呼ばれるオブジェクトが要素に付加されて、 テンプレートからコンテントをビルドする
>avaScript からも、<code>builder</code> プロパティで、ビルダーオブジェクトにアクセスすることが可能で>動作を遂行します。 なお、JavaScript からも、<code>builder</code> プロパティで、ビルダーオブジェク
>す。 もっとも、通常、ビルダーへのアクセスは、コンテント生成が自動的に行われないときに、コンテントの再生成を行わせる場合にのみ必要>トにアクセスすることが可能です。 もっとも、通常、ビルダーへのアクセスは、コンテント生成が自動的に行われないときに、コンテントの再
>なだけです。>生成を行わせる場合にのみ必要なだけです。
n152    <h4 name=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88.E3.83n170    <p>
>.93.E3.83.AB.E3.83.80.E3.83.BC"> 
171      {{ 英語版章題("Content Builder") }}
172    </p>
173    <h4 id=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88.E3.83.9
 >3.E3.83.AB.E3.83.80.E3.83.BC" name=".E3.82.B3.E3.83.B3.E3.83.86.E
 >3.83.B3.E3.83.88.E3.83.93.E3.83.AB.E3.83.80.E3.83.BC">
n156      コンテントビルダーは、<code>template</code> 要素の中のコンテントを取り出して、 データソースからn177      コンテントビルダーは、<code>template</code> 要素の中のコンテントを取り出して、 データソースから
>取得される行 (row) ごとに複製します。 具体的には、上記の例では、利用者が 10 個のブックマークを持っている場合、 10 >取得される{{ 訳語("", "row"}}ごとに複製します。 具体的には、上記の例では、利用者が 10 個のブックマークを
>個の <code>{{template.XULElem("label")}}</code> 要素が生成されて、 <code>{{t>持っている場合、 10 個の <code>{{ XULElem("label") }}</code> 要素が生成されて、 <cod
>emplate.XULElem("vbox")}}</code> 要素の子要素として追加されることになります。 DOM 関数を利用>e>{{ XULElem("vbox") }}</code> 要素の子要素として追加されることになります。 DOM 関数を利用して
>して文書ツリーを走査することで、生成された要素を見つけてプロパティを調べることが可能です。 なお、テンプレートから生成された要素は>文書ツリーを走査することで、生成された要素を見つけてプロパティを調べることが可能です。 なお、テンプレートから生成された要素は画面
>画面に表示されますが、<code>template</code> 要素自体は表示はされません。 ただし、<code>templat>に表示されますが、<code>template</code> 要素自体は表示はされません。 ただし、<code>template<
>e</code> 要素も文書ツリー中には存在しています。 加えて、生成された各ラベルの <code>id</code> 属性には、>/code> 要素も文書ツリー中には存在しています。 加えて、生成された各ラベルの <code>id</code> 属性には、RD
>RDF リソースの対応する行を示す値が設定されます。>F リソースの対応する行を示す値が設定されます。
157    </p>
158    <p>178    </p>
179    <p>
159      コンテントビルダーは、常に <code>uri="rdf:*"</code> が指定されたところから生成を開始します。180      コンテントビルダーは、常に <code>uri="rdf:*"</code> が指定されたところから生成を開始します。
> <code>uri</code> 属性が、要素ツリーで下位の要素に設定されている場合、それより上位 (外側) の要素は、1 回だ> <code>uri</code> 属性が、要素ツリーで下位の要素に設定されている場合、それより上位 (外側) の要素は、1 回だ
>け作成されることになります。 以下の例では、<code>{{template.XULElem("hbox")}}</code> が>け作成されることになります。 以下の例では、<code>{{ XULElem("hbox") }}</code> が 1 つ作成さ
> 1 つ作成され、その中は項目ごとに生成されるラベルで埋められることになります。>れ、その中は項目ごとに生成されるラベルで埋められることになります。
n171    <h4 name=".E3.83.84.E3.83.AA.E3.83.BC.E3.83.93.E3.83.AB.E3.83n192    <p>
>.80.E3.83.BC"> 
193      {{ 英語版章題("Tree Builder") }}
194    </p>
195    <h4 id=".E3.83.84.E3.83.AA.E3.83.BC.E3.83.93.E3.83.AB.E3.83.8
 >0.E3.83.BC" name=".E3.83.84.E3.83.AA.E3.83.BC.E3.83.93.E3.83.AB.E
 >3.83.80.E3.83.BC">
n178      ツリービルダーは、ツリーのみが利用し、他の要素は、コンテントビルダーのみを利用します。 といっても、メニューなどの他のn202      ツリービルダーは、ツリーのみが利用し、他の要素は、コンテントビルダーのみを利用します。 といっても、メニューなどの他の
>要素は、ツリーのように多数の項目を表示することは想定されていないため、問題はありません。 また、コンテントビルダーをツリーに利用す>要素は、ツリーのように多数の項目を表示することは想定されていないため、問題はありません。 また、コンテントビルダーをツリーに利用す
>ることも可能で、この場合は <code>{{template.XULElem("treeitem")}}</code> 要素と関連>ることも可能で、この場合は <code>{{ XULElem("treeitem") }}</code> 要素と関連する要素が行ご
>する要素が行ごとに作成されます。>とに作成されます。
203    </p>
179    </p>204    <p>
180    <h3 name=".E3.83.AB.E3.83.BC.E3.83.AB">205      {{ 英語版章題("Rules") }}
206    </p>
207    <h3 id=".E3.83.AB.E3.83.BC.E3.83.AB" name=".E3.83.AB.E3.83.BC
 >.E3.83.AB">
n187      これは、<code>{{template.XULElem("rule")}}</code> 要素を利用することで可能にn214      これは、<code>{{ XULElem("rule") }}</code> 要素を利用することで可能になります。 こ
>なります。 このために、ルールをテンプレートから生成させたい要素のバリエーションに対応して定義する必要があります。 この場合、ブッ>のために、ルールをテンプレートから生成させたい要素のバリエーションに対応して定義する必要があります。 この場合、ブックマークに対す
>クマークに対するルールと、セパレータに対するルールが必要になります。 <code>rule</code> 要素に設定する属性によっ>るルールと、セパレータに対するルールが必要になります。 <code>rule</code> 要素に設定する属性によって、どのルール
>て、どのルールが、どの RDF リソースに適用されるかが判断されます。>が、どの RDF リソースに適用されるかが判断されます。
n192    <h4 name=".E3.83.AB.E3.83.BC.E3.83.AB.E3.81.AE.E4.BE.8B">n219    <p>
220      {{ 英語版章題("Rule Example") }}
221    </p>
222    <h4 id=".E3.83.AB.E3.83.BC.E3.83.AB.E3.81.AE.E4.BE.8B" name="
 >.E3.83.AB.E3.83.BC.E3.83.AB.E3.81.AE.E4.BE.8B">
n199      {{wiki.template('Block-title', [ "例 4" ])}}&nbsp;: {{wiki.tn229      {{ Block-title("例 4") }}&nbsp;: {{ Xultu-s("ex_templates_4.
>emplate('Xultu-s', [ "ex_templates_4.xul" ])}}>xul") }}
n226      <img alt="画像:templates2.jpg" src="File:ja/Media_Gallery/Temn256      <img alt="画像:templates2.jpg" fileid="1991" src="File:ja/Med
>plates2.jpg">>ia_Gallery/Templates2.jpg">
n235      上記の例で、最初のルールに設定されている URL は、セパレータを示すための固有 URL で、セパレータを区別するためn265      上記の例で、最初のルールに設定されている URL は、セパレータを示すための固有 URL で、セパレータを区別するため
>に使用されています。 このため、セパレータの場合は、最初のルールが適用されることになり、 16 ピクセルの隙間を空ける <code>に使用されています。 このため、セパレータの場合は、最初のルールが適用されることになり、 16 ピクセルの隙間を空ける <code
>>{{template.XULElem("spacer")}}</code> 要素が生成されます。 また、セパレータ以外の要素は、>>{{ XULElem("spacer") }}</code> 要素が生成されます。 また、セパレータ以外の要素は、すべて最初のル
>すべて最初のルールにはマッチしないので、2 番目のルールのチェックに移ることになります。 2 番目のルールには、属性が一切指定され>ールにはマッチしないので、2 番目のルールのチェックに移ることになります。 2 番目のルールには、属性が一切指定されていないので、
>ていないので、すべてのデータがマッチすることになります。 したがって、ここでは、セパレータ以外のデータに対して行いたいことが、行わ>すべてのデータがマッチすることになります。 したがって、ここでは、セパレータ以外のデータに対して行いたいことが、行われることになり
>れることになります。>ます。
236    </p>
237    <p>266    </p>
267    <p>
238      また、RDF 名前空間 (<code>rdf:type</code>) から属性を取り出すために、 名前空間の宣言を 268      また、RDF 名前空間 (<code>rdf:type</code>) から属性を取り出すために、 名前空間の宣言を 
><code>{{template.XULElem("window")}}</code> タグに追加する必要があることも確認してくだ><code>{{ XULElem("window") }}</code> タグに追加する必要があることも確認してください。 そうし
>さい。 そうしない場合、属性は XUL 名前空間から探されますが、 当然、そこには存在しないので、ルールにマッチしないことになりま>ない場合、属性は XUL 名前空間から探されますが、 当然、そこには存在しないので、ルールにマッチしないことになります。 独自の名
>す。 独自の名前空間の属性を利用する場合も、ルールにマッチさせるためには、名前空間の宣言が必要になります。>前空間の属性を利用する場合も、ルールにマッチさせるためには、名前空間の宣言が必要になります。
n256      {{template.PreviousNext("XUL Tutorial:Introduction to RDF",n286      {{ PreviousNext("XUL Tutorial:Introduction to RDF", "XUL Tu
> "XUL Tutorial:Trees and Templates")}}>torial:Trees and Templates") }}
t261    <div class="noinclude"></div>{{ wiki.languages( { "en": "en/Xt291    <div class="noinclude"></div>{{ languages( { "en": "en/XUL_Tu
>UL_Tutorial/Templates", "es": "es/Tutorial_de_XUL/Plantillas", "f>torial/Templates", "es": "es/Tutorial_de_XUL/Plantillas", "fr": "
>r": "fr/Tutoriel_XUL/Gabarits", "pl": "pl/Kurs_XUL/Szablony" } ) >fr/Tutoriel_XUL/Gabarits", "pl": "pl/Kurs_XUL/Szablony" } ) }}
>}} 

前に戻る