ペインとは、Webページ内でPOPを配置できる領域のことです。ペインの詳細についてはリファレンスマニュアルの記述を参照して下さい。

ペインを作るには、以下のようにします。

まず、ルートPageのプロパティ「org.seasar.kvasir.cms.pop.panes」にカンマ区切りでペインIDが定義されていますので、ここにペインIDを追加します。

なお、以下の手順に従ってテンプレートを変更し、Webサイト編集モードでペインにPOPをドラッグ＆ドロップで登録する場合は、ドロップした時に自動的に上記プロパティにペインIDが追加されますので、明示的な追加は不要です。

次に、ペインのためのHTMLタグをサイトのテンプレートに埋め込みます。埋め込むテンプレートは基本的にどこでもいいですが、通常はルートPageのテンプレートか/templates/frameのテンプレートに埋め込みます。

埋め込むのは、以下のようなHTMLタグです。以下の例では、作成するペインのIDを「hoehoe」としています。

<div id="pane.hoehoe" class="pane">
  <div class="pop" tal:repeat='pop java:org.seasar.kvasir.cms.pop.util.PopUtils.renderPane(request, response, pageRequest, "hoehoe")' tal:attributes="id pop/id; class string:pop ${pop/popId}">
    <h2 class="title" tal:content="structure pop/title">POP Title</h2>
    <div class="body" tal:content="structure pop/body">POP Body</div>
  </div>
</div>

ポイントは、ペインはdivタグで定義し、そのidを「pane.XXXX」とし、classに「pane」とペインのIDを指定することと、ペインのdivタグの直接の子タグとしてPOPのdivタグを定義し、そのclassにtal:attributes属性などを使って「pop」とpopId（POPの種別を表す識別文字列）を指定することです。また、POPのタイトルを表示するタグのclassに「title」を指定し、POPのボディを表示するタグのclassに「body」を指定して下さい。

POPのdivタグの中は基本的に自由です。POPのタイトルや本文をどんなタグを使って表示しても構いません。例えばタイトルを表示しないというのでも構いません。

ペインのclassとしてペインのIDを指定し、POPのclassとしてpopIdを指定するのは実は必須ではありませんが、スタイルシートを使ってペインとPOP毎に見た目を制御することができるようになります。こうすることで、例えばメニューPOPをサイドバーに置くと縦に項目が並び、ヘッダに置くと横に並ぶというようなことを簡単に実現できるようになります。