Zope 2.13.0
CMFContentPanelsのViewletを作る
Document Actions
Note: This is the print view with all the tutorial pages on one page. The paginated version is available here, if you prefer that.
目標と必要なもの
ゴール
Ploneの標準機能では、一つのページに一つのコンテンツあるいはフォルダの一覧しか表示することが出来ません。しかしサイトの構成によっては、ポータルのトップページで複数フォルダの最新の5件のコンテンツを表示したい、あるいは、サイトの説明を行う文書ページとフォルダの一覧を同時に表示したい(zope.jp)という場合があります。
このような要求を満たす方法の一つとして、CMFContentPanelsを使用して表示してみます。
zope.jp トップページ
CMFContentPanels標準実装のままでも上記のように表示することが出来ますが、Viewletをカスタマイズすることで、以下のように表示方法を独自に設定することが出来ます。
COREBlog2の最新5件を画像付で表示
Viewletって何？
Viewletって何？
CMFContentPanelsでは、段組を構成する各領域をViewletと呼んでいて、CMFContentPanelsインスタンスページに複数並べることが出来ます。この方法を使って、CMFContentPanelsによって一つのページの上半分をPloneの文書コンテンツ、下半分にスマートフォルダのエントリ一覧表示するといった事が出来るようになります。具体例としては、前述のzope.jpトップページは二つのViewlet、 文書Viewlet と スマートフォルダViewlet(カスタマイズ版) で構成されています。
zope.jp トップページ(Viewlet説明入り)
CMFContentPanelsには、文書やフォルダを表示するための標準的なViewletがいくつか付属していますが、標準のViewletでは表示の表現に満足できない場合があります。例えばCMFContentPanels-1.3のスマートフォルダの表示では、各コンテンツの概要をタイトルと並べて表示することが出来ません。
このように、標準Viewletの表示や、Plone標準ではないコンテンツタイプに適した表示を行うために、既存のViewletを拡張したり、新規のViewletを追加することでオリジナルの表示を行うことができます。
CMFContentPanelsは何をViewletとして認識するか
CMFContentPanelsは、 /plone/portal_contentpanels に登録されているZopePageTemplateをViewletとして認識します。つまり、
- ZopePageTemplateを作成する。
- 上記ZopePageTemplateにmacroを定義する。
- 上記マクロを /plone/portal_contentpanels に登録する。
これでCMFContentPanelsのViewletとして使うことが出来るようになります。
次は、具体的にPageTemplateの作成から登録までを行います。
新しいViewletを追加する(1)
これから作成するViewletはスマートフォルダ用とします。CMFContentPanelsにもスマートフォルダ用のViewletはあるのですが、表示内容がタイトルだけで概要文が表示されません。そこで、スマートフォルダを表示する時と同じ表示内容になるViewletを作成します。
表示用のPageTemplateを用意
まずはViewletを表示するためのPageTemplateファイルを作成します。ZMIで /plone/portal_skins/custom へ移動してPageTemplateを新規に作成します。オブジェクトIDは何でも良いのですが、CMFContentPanelsの命名方法に従って viewlet_smartfolder_list としておきます。次にこのオブジェクトの中身を作成します。とりあえず以下のようにスケルトンを用意しましょう。
xmlns:metal="http://xml.zope.org/namespaces/metal"
i18n:domain="plone">
<body>
<div metal:define-macro="smartfolder_contents_viewletconf">
</div>
<div metal:define-macro="smartfolder_contents">
</div>
</body>
</html>
viewlet_smartfolder_listには2つのマクロを定義しています。CMFContentPanelsのドキュメントを読むと書いてあるのですが、Viewletのマクロ名を hoge とした場合、そのViewletの設定用UIのマクロ名を hoge_viewletconf とする必要があります。ここではViewletのマクロ名と設定用マクロ名は上記のように smartfolder_contents と smartfolder_contents_viewletconf と命名しています。
Viewletを登録する
マクロ定義のみのPageTempalte(Viewlet)を用意しました。次はいきなりViewlet登録を行います。まずは空っぽのViewletが使えるモノかどうかを確認する意味で、実際にCMFContentPanelsで試してみようという作戦です。
設定のためにZMIで /plone/portal_contentpanels に移動すると、CMFContentPanelsで使えるViewletがずら～っと登録されています。このページの一番下に移動して、今作ったばかりの空Viewletを登録しましょう。入力するパラメータは以下の通りです。
| Title: | SmartFolder list |
|---|---|
| Id: | smartfolder_list_viewlet |
| URL: | string: here/viewlet_smartfolder_list/macros/smartfolder_contents |
| Permission: | View |
| Category: | PT:Topic |
| Visible: | On |
上記設定値のに、今作ったPageTemplateのIDとマクロ名が出てきています。タイトルやIDは適当に‥‥いちおうCMFContentPanelsの命名規則に従って付けておきましょう。入力しおわったらAddボタンを押して追加します。
portal_contentpanelsにViewletを追加
これでCMFContentPanelsで上記のViewletを使えるようになったはずです(空っぽですが)。Categoryを PT:Topic としているので、 smartfolder list というViewlet名を選択できるのは、Related Contentでスマートフォルダ型オブジェクトを選択しているときだけです。ちなみに PT はPortalTypeの略ですので PT:Folder とか PT:COREBlog2 等と記述します。他に GL, GN を使用することが出来ます。GL,GNで使用できる文字列についてはportal_contentpanelsの初期設定項目を参考にしてください。
とりあえず、問題が起きたときに切り分けしやすいように、ここまでの内容で動くことを確認しておいた方が良いでしょう(CMFContentPanelsのPanel configuration でViewletとして利用可能か確認してみましょう)。
Panel configuration で利用可能か確認
Related Content にスマートフォルダ(ここではNews)を選択すると、Content Related のところに SmartFolder list がちゃんと表示されました。しかしここまでの状態では、まだ表示用のテンプレートを書いていないため、SmartFolder listを選択してもPreviewには何も表示されません。次は表示用のテンプレートを記述し、Viewletとして完成させます。
新しいViewletを追加する(2)
表示用Viewletを書く
今回は、Ploneのスマートフォルダの中身一覧を表示するViewletをコピーして、SmartFolder用に機能拡張したい部分だけカスタマイズします。以下で紹介するコードは、基本的にはCMFContentPanels/skins/cp_viewlets/viewlets_folder_recentのbase_portletマクロがやっている処理を真似して作ったのですが、CMFContentPanelsのPageTemplateはかなり細かく部品化されているので、共通する部分はmetal:use-macroとmetal:fill-slotを駆使して再利用することが出来ました。以下のコードのほとんどは CMFContentPanels/skins/cp_viewlets/content_list_macros の <metal:block metal:define-macro="separate_line_description"> ブロック内をviewlet_smartfolder_listのsmartfolder_contentsマクロにコピーして若干手を加えて作成しました。
<metal:block use-macro="here/global_defines/macros/defines" />
<div class="portlet_off">
<span class="topLeft"></span>
<h5 tal:content="here/title_or_id" >title</h5>
<span class="topRight"></span>
<div class="portletBody">
<div metal:use-macro="here/atct_topic_view/macros/listing">Document Main</div>
</div>
<span class="botRight"></span>
<span class="botLeft"></span>
</div>
</div>
<div class="portletBody">ブロックでViewlet表示の本文を書くことになるのですが、今回は細かく作り込むのではなくスマートフォルダの表示用テンプレートを呼び出して、スマートフォルダと同じ表示をViewletで行えるようにしているのがポイントです。これで画面表示は出来ました。早速確認します。
Panel configuration でPreview表示確認
Previewにニュースコンテンツが一覧表示されました。なお、ここで表示されているニュースコンテンツは事前に作成して公開状態にしてあります。
ここまででスマートフォルダ表示用Viewletが完成しました。今回は表示をちょっとだけ強化することが目的だったので、専用の設定画面は特に用意しないことにします。
--
このページで作成した viewlet_smartfolder_list を添付します。