Page Template Tutorial: Template Language

Page Template をつくる

もしあなたがページをデザインするとき、Page Templateを作って編集するためには、たぶんZope Management Interface(ZMI)の代わりにFTPやWebDAVを使うでしょう。それらの使い方についてはあなたのZope管理者に聞いてください。この紹介ページで使うほんのちょっとしたサンプルには、Zopeの管理画面(ZMI)を使う方がはるかに楽です。

もしあなたがZope管理者あるいはプログラマであるなら、少なくとも時々はZMIを使うでしょう。EmacsやCadaverなど、他のクライアントも利用するかもしれません。いろいろなクライアントソフトを使ってZopeで作業する設定方法については、Zope Administrator's Guideを参照してください。

Zope管理画面にログインするために、ウェブブラウザを使ってください。どれかフォルダ(ルート・フォルダがいいでしょう)を選び、ドロップダウン式のaddリストから"Page Template"を選んでください。addフォームのIdの欄に、"simple_page"と打ちこんでください。それから"Add and Edit"ボタンを押します。

すると新しいPage Templeteの編集ページになります。タイトル欄は空白で、コンテンツタイプ(content-type)は text/html になっていて、編集エリアにはデフォルトのテンプレートテキストがあるはずです。

では、とてもシンプルな動的ページを作りましょう。タイトル欄に"a Simple Page"と書いてください。テンプレートテキストが以下のようになるように編集してください。

       This is < b tal:replace="template/title"> the Title</b>.

そして"Save Changes"ボタンを押します。編集画面は、あなたの加えた変更が保存されたことを確認するメッセージを表示するでしょう。もし、<--Page Template Diagnostics(ページ・テンプレート診断) で始まるテキストがテンプレートに加えられていたら、サンプルを正しくタイプしたかどうかを確かめてもう一度保存してください。先程のエラーコメントを消す必要はありません。エラーが訂正されたら自動的に消えてなくなります。

Testタブをクリックしてください。一番上に"This is a Simple Page."と書かれた、ほとんど空白のページが表示されるでしょう。

前のページに戻って、コンテンツタイプ(content-type)欄の下にある"Browse HTML source"のリンクをクリックしてください。"This is the Title."という文字があるでしょう。例文をさらに編集をするために、また戻ってください。

シンプルな表現

あなたの作ったシンプルなPage Templateにある"template/title"というテキストは、パスを表したものです。これは、TAL Expression Syntax(TALES)によって定義された表現法の中でも、もっともよく使われるものです。それは、テンプレートからタイトル属性を取り出します。
他によく使われるパス表現として、以下のようなものがあります。

　・request/URL : 現在のウェブ・リクエストのURL

　・user/getUserName : 認証されたユーザのログイン名

　・container/objectIds : テンプレートと同じフォルダ内にあるオブジェクトのIdのリスト

すべてのパスは変数名で始まります。変数があなたの必要とする値を含んでいる場合は、そこでストップします。含んでいなければ、スラッシュ(/)とサブ・オブジェクト名やプロパティ名を付け足します。あなたの探している変数値にたどりつくために、いくつかのサブ・オブジェクトを辿っていく必要があるかもしれません。

requestとかuserといった組み込み変数がわずかながらありますが、それについては後で述べます。また、自分で作った変数をどう定義するかについても学ぶことになります。

テキストの挿入

あなたのつくった"simple_page"テンプレートの中で、太字タグの中で tal:replace と書きましたね。それをテストしてみた時、そのタグ全体が、そのテンプレートのタイトルに置き換えられ(replaceされ)ました。そのソースを眺めた時、テンプレートのテキストが太字になっていました。我々は、違いを強調表示するために、太字のタグを使ったのです。

他のテキスト中に動的にテキストを配置するために、spanタグの中によく tal:replace を使います。次の数行をあなたの作ったサンプルに書き加えてください。

       < br>>
       The URL is < span tal:replace="request/URL" > URL</span>.

spanタグは構造を表すもので、表示を表すものではありません。したがって、エディタやブラウザで上のサンプルのソースを眺めると、"The URL is URL."と見えます。編集している時、誤ってspanタグを消してしまったり、b や font のような書式タグをspanタグ中に置かないように気をつけてください。さもないと、それらも置き換えられてしまいます。

タグ中にテキストを挿入したいけれどもタグ自身は残しておきたい場合は、tal:content を使います。テンプレートのタイトル属性にあなたのサンプルページのタイトルをセットするには、他のテキストより上に以下の行を付け加えてください。

       < head>
       < title tal:content="template/title"> The Title</title>
       </head>

新しいウィンドウの「Test」タブを開くと、ウィンドウのタイトルが"a Simple Page"となっているでしょう。

繰り返し

では、あなたのページに、同じフォルダ内にあるオブジェクトのリストという形で、何か中身を付け足してみましょう。オブジェクトごとに番号をつけた行と、idとmeta-typeとタイトルをカラム(列)にしたテーブルを作ってみます。以下の数行をサンプルのテンプレートの最後に書き加えてください。

       < table border="1" width="100%">
         < tr>
           < th>#</th>< th> Id</th>< th> Meta-Type</th>< th> Title</th>
         </tr>
         < tr tal:repeat="item container/objectValues">
           < td tal:content="repeat/item/number">#</td>
           < td tal:content="item/id"> Id</td>
           < td tal:content="item/meta_type"> Meta-Type</td>
           < td tal:content="item/title"> Title</td>
         </tr>
       </table>

テーブルの列のところにある tal:repeat は、「コンテナの中にあるオブジェクトの値をリストにして、その項目の数だけこの行を繰り返す」ということを意味しています。repeatはリストからオブジェクトを取り出して一つずつ変数に代入していき、その変数を使っている行のコピーを作ります。各行の"item/id"の値はその行のオブジェクトのidとなります。

itemという名前は特別なものではありません。その変数には、それが文字で始まり、文字と数字とアンダースコア( _ )から成るのであれば、あなたの好きな名前を使えます。それは tal:repeat があるタグの中(今回の例では tr タグ)にしか使いません。それ以外の場所で使おうとするとエラーになるでしょう。

この例の各行には番号が付いていて、現在の反復回数がわかります。また、ある特定の行が最初の行なのか最後の行なのか、などに類した情報を知りたくなるかもしれません。各行のコピーの中で、itemという変数にはリストにあるオブジェクトが一つ格納されています。このオブジェクト自身は繰り返しについては何も知りません。だから、この種の情報を得るために、item/なんとかというパスは使えません。組み込みのrepeat変数はこのためにあるのです。繰り返す変数名をパス中のrepeatの後に置くことによって、(インデックスの場合は)0から、(数字の場合は)1から、(アルファベットの場合は)Aから、というような方法で、反復回数にアクセスすることができます。したがって、repeat/item/number というのは最初の行が1で、次の行が2、というふうになっています。

一つの tal:repeatを他のtal:repeatの中に置くことができるので、同時に複数のものをアクティブにすることが可能です。そういう理由から、item変数を作る tal:repeat についての情報を得るために、ただrepeat/numberと書く代わりにrepeat/item/numberと書かなければならないのです。

条件要素

テンプレートを眺めると、テーブルがずいぶん格好悪いのに気づくでしょう。別の行を使って改善してみましょう。テーブルの二行目をコピーして、次のように見えるように編集してください。

       < table border="1" width="100%">
         < tr>
           < th>#</th>< th> Id</th>< th> Meta-Type</th>< th> Title</th>
         </tr>
         < tbody tal:repeat="item container/objectValues">
           < tr bgcolor="#EEEEEE" tal:condition="repeat/item/even">
             < td tal:content="repeat/item/number">#</td>
             < td tal:content="item/id"> Id</td>
             < td tal:content="item/meta_type"> Meta-Type</td>
             < td tal:content="item/title"> Title</td>
           </tr>
           < tr tal:condition="repeat/item/odd">
             < td tal:content="repeat/item/number">#</td>
             < td tal:content="item/id"> Id</td>
             < td tal:content="item/meta_type"> Meta-Type</td>
             < td tal:content="item/title"> Title</td>
           </tr>
         </tbody>
       </table>

tal:repeatは変わっていません。ただ新しい tbody タグのところに移動させただけです。tbodyは、テーブルの各行をグループ化する(それを今まさにやってみたのですが)ことを示す標準HTMLタグです。bodyには同一のカラムを持った二つの行があり、片方の背景はグレーです。

テンプレートのソースを眺めれば、両方の行が見えるでしょう。tal:conditionをその行に付け加えていなければ、テンプレートは各itemごとに両方の行を生成してしまい、思った表示結果にはならないでしょう。最初の行にあるtal:conditionは、偶数のインデックス付きの繰り返しにのみ当てはまり、二行目のconditionは奇数番号のインデックスにだけ現れるということを保証しています。

tal:conditionは、それが真の値である場合は何もしませんが、偽の場合は、そのタグ全体を、中身(contents)を含めて削除します。repeat/itemの奇数と偶数のプロパティは、0か1です。数字の0、1つの空白文字、空のリスト、それにnothingという組み込み変数は、すべて値は偽です。それ以外はほぼすべて、0以外の数字、空の文字列(複数のスペースさえも!)なども含めて、真の値をもっています。

変数の定義

あなたの作ったテンプレートは常に、少なくとも一つの行は表示します。というのも、テンプレート自身もリスト化されたオブジェクトの一つだからです。他の状況において、テーブルの中身が空になる可能性を説明したくなるかもしれません。仮に、今回の例においてテーブルを丸ごと削除したいとしましょう。テーブルにtal:conditionを付け足すことによってそれができます。

       < table border="1" width="100%"
              tal:condition="container/objectValues"

今、オブジェクトが一つもないとき、出力にはテーブルのどの部分も含まれないでしょう。けれども、オブジェクトが存在するとき、"container/objectValues"の部分は、あまり効率的とは言えませんが、二回評価されます。また、あなたがその部分を変更したいとすると、二カ所で変更しなければならなくなるでしょう。

こうした問題を避けるには、リストを保持するための変数を定義し、tal:conditionとtal:repeatの両方で使うことができます。テーブルの最初の数行を、以下のように変更します。

       < table border="1" width="100%"
              tal:define="items container/objectValues"
              tal:condition="items">
         < tr>
           < th>#</th>< th> Id</th>< th> Meta-Type</th>< th> Title</th>
         </tr>
         < tbody tal:repeat="item items">

tal:defineで変数itemsを作り、それをtableタグのどこにおいても使うことができます。

では、itemsのないテーブルをただそのままにしておく代わりに、メッセージを表示したいとしましょう。それをするためには、テーブルの上に、次のように書きます。

       < h4 tal:condition="not:container/objectValues"> There
       Are No Items</h4>

この段階では、変数itemsをまだ定義していないために、使えません。もしその定義をh4タグの所に移動させたら、もうtableタグの中では使えません。h4タグのローカル変数になってしまうからです。h4とtableの両方を含むようなタグの中にその定義を置くことはできますが、もっと簡単な解決法があります。globalというキーワードを変数名の前に置くことによって、その定義がh4タグからテンプレートの最後の部分まで有効にすることができます。

       < h4 tal:define="global items container/objectValues"
           tal:condition="not:items"> There Are No Items</h4>
       < table border="1" width="100%" tal:condition="items">

最初のtal:conditionにあるnot:というのは、どんな式の前にでも付けることもできるプレフィクスです。もしその式が真だった場合、not:は偽であり、その逆も同じことがいえます。

属性の変更

すべてではないにしろ、あなたのテンプレートにリストされたほとんどのオブジェクトは、iconプロパティを持ち、それにはその種のオブジェクトを表すアイコンへのパスを含んでいます。このアイコンをmeta-typeカラムに表示するには、imgタグのsrc属性にこのパスを書く必要があります。meta-typeカラムを、両方の行が次のようになるように編集してください。

       < td>< img src="/misc_/OFSP/Folder_icon.gif"
                tal:attributes="src item/icon">
           < span tal:replace="item/meta_type"> Meta-Type</span>
       </td>

tal:attributes文は、その画像のsrc属性をitem/iconの値に置き換えます。テンプレート中のsrcの値は、画像の挿入場所を示すものとして働くため、画像は壊れず、正しいサイズとなります。

テーブルのtal:content属性は、画像を含めて、セルの中身全体をmeta-typeテキストで置き換えてしまうため、削除しなければなりません。そのかわり、meta-typeをそのページのトップのURLと同じやり方でインラインに挿入します。

               peterbe (Jun 25, 2001 11:21 am; Comment #3) Editor Remark 
 Requested              Perhaps also mention how to use (parameters)
 > tal:define="items container/objectValues"
               becomes
 > tal:define="items python:container.objectValues(Photo)"
               or if the objectpath containes . dots:
 > tal:define="items container/folder.peter/objectValues"
               becomes
 > tal:define="itemsobj container/folder.peter/objectValues/; items python:itemsobj(Photo)"
               Stop and correct me before I make a fool out of myself.
               evan (Jun 25, 2001 1:29 pm; Comment #4) 
               These are good, but belong in part 4, where Python expressions are 
               discussed.
               sboddy (Sep 5, 2001 8:53 am; Comment #6) 
               Kind of trivial, but...
               This is the Title.
               should be
               This is the Title.
               in order to get "This is the Title."
               sboddy (Sep 5, 2001 8:58 am; Comment #7) 
               Arghh!!! Caught out by STX again. What I meant to say was...
               Kind of trivial, but...:
    This is <b tal:replace="template/title">the Title</b>.
               should be:
    This is <b tal:content="template/title">the Title</b>.
               in order to get "This is the Title."

Last edited Mon, 11 Sep 2006 00:11:50 +0900 Edit this page