このサイトについて

KidでHTMLを部品化する

KidでHTMLを部品化する

Ploneを[使いこなしている]人向けに簡単に解説すると,「KidでZPTのslotみたいなことを実現する方法」。

オブジェクト指向を知っている向けに簡単に説明すると,「Kidのテンプレートを使って,テンプレートの継承とメソッドの継承みたいなことを実現する方法」。

これから解説することについて,もうちょっと長い説明。

  1. マスターテンプレートがあります
  2. マスターテンプレートには,表示する場所などによって異なった情報を埋め込みたい「部分(パートAと呼びます)」があります
  3. マスターテンプレートを「使う」側のサブテンプレートで,「パートAにはこの内容を埋めてね」と指定したいとします

このようなことを実現するための方法について解説します。本当はXMLの名前空間なんかも定義しないとならないんですが,冗長なのでこの解説では省いています。

以下のようなマスターテンプレート(master.kid)があるとします。

 <html>
   <body>
      この部分は マスターテンプレートの本文です。
     <div id="content"
          py:for="elem in [ x for x in item.getchildren() if x.tag.endswith('}div') and x.get('id') == 'content']">
      この部分にはサブテンプレートで指定した内容が埋め込まれます。
      <span py:replace="elem[:]" />
     </div>
   </body>
 </html>

サブテンプレート(sub.kid)は,以下のように定義します。

 <html py:extends="path/to/master.kid">
   <body>
     <div id='content'>
     ** この部分がマスターテンプレートに埋め込まれます。 **
     </div>
   </body>
 </html>

サブテンプレートの出力結果は,以下のようになります。

 <html>
   <body>
     この部分は マスターテンプレートの本文です。
     <div id="content">
     ** この部分がマスターテンプレートに埋め込まれます。 **
     </div>
   </body>
 </html>

要は,サブテンプレートでidを振ったdivの領域を入れ替えることが出来るわけね。サイトワイドで定義したいデザインなんかはマスター側で定義しておいて,本体部分とかボートレットみたいなのはサブテンプレートで「継承」できるわけです。メインテンプレート側で「バーチャルな」部分を定義し,サブテンプレート側で継承して置き換えるわけですな。

Kidのテンプレート内部ではElementTreeのElementオブジェクトを使えるんだけど,このことを利用したテクニック。この方法を使うと,テンプレートをXHTML validに保ったままHTMLが部品化できるのです。

TurboGearsのマスターテンプレートでは,似た方法を使ってbodyの中身だけをサブテンプレートの内容に置き換えています。

うーん,難しいかな。

2010-08-27 04:41