Vous êtes ici : Accueil / Développement / Plone / Création de produits / Modifier l'organisation des pages - Gérer les viewlets

Modifier l'organisation des pages - Gérer les viewlets

Par Pierre-Yves Landuré Dernière modification 24/08/2011 01:32

Contrairement à Plone 2.x ou personnaliser le fichier main_template.pt permettait de modifier la façon dont étaient organisées les pages, Plone 3 introduit la notion de Viewlets. Cet article vous explique comment manipuler l'organisation de vos pages à l'aide de ces derniers.

En premier lieu, je vous invite à lire le tutoriel Customizing the viewlets in main_template de Davcontent qui est une très bonne introduction à la gestion des viewlets. Cette page reprend certaines des informations qui y sont données, et en donne d'autre, mais les deux sources d'information sont utiles.

Remarque: Vous pouvez gérer les viewlets sans passer par un produit en ajoutant simplement @@manage-viewlets à la fin de l'URL de votre site Plone.

Présentation des viewlets

En premier lieu, placez-vous à la racine de votre instance.

Je vous invite à ouvrir le fichier suivant :

./Products/CMFPlone/skins/plone_templates/main_template.pt

Si vous regardez bien, vous y trouverez de nombreuses lignes du type :

        <div tal:replace="structure provider:plone.portaltop" />

Lors du traitement du main_template.pt, cette ligne est remplacée par le provider "plone.portaltop".

Un provider est un conteneur de viewlets.

Vous trouverez les déclaration des providers par défaut de Plone dans le fichier :

./lib/python/plone/app/layout/viewlets/configure.zcml

Par exemple, le provider "plone.portaltop" est déclaré dans ce fichier par les lignes :

    <browser:viewletManager
        name="plone.portaltop"
        provides=".interfaces.IPortalTop"
        permission="zope2.View"
        class="plone.app.viewletmanager.manager.OrderedViewletManager"
        />

Ce provider (déclaré comme un viewletManager) étant destiné à contenir des viewlets, il faut configurer ces dernier. Cela se fait dans le fichier :

.Products/CMFPlone/profiles/default/viewlets.xml

Vous y trouverez les lignes suivantes qui définissent le contenu du provider "plone.portaltop".

  <order manager="plone.portaltop" skinname="Plone Default">
<viewlet name="plone.header" />
<viewlet name="plone.personal_bar" />
<viewlet name="plone.app.i18n.locales.languageselector" />
<viewlet name="plone.path_bar" />
</order>

Les viewlets utilisés dans "plone.portaltop" sont déclarés dans le fichier

./lib/python/plone/app/layout/viewlets/configure.zcml

Par exemple, le viewlet "plone.path_bar" est déclaré par :

    <!-- The breadcrumbs -->
<browser:viewlet
name="plone.path_bar"
manager=".interfaces.IPortalTop"
class=".common.PathBarViewlet"
permission="zope2.View"
/>

Comme vous pouvez le remarquer, il est explicitement déclaré comment étant contenu par le provider "plone.portaltop" via la ligne :

        manager=".interfaces.IPortalTop"

Il est impossible d'utiliser le viewlet "plone.path_bar" dans un autre provider que "plone.portaltop".

Réorganiser les viewlets

La réorganisation des viewlets se fait via le fichier suivant :

./Products/MonProduit/profiles/default/viewlets.xml

Masquer des viewlets

Pour masquer des viewlets, il faut utiliser la balise hidden. Dans notre exemple, nous allons manipuler le provider "plone.portaltop" et masquer son viewlet "plone.path_bar". Cela se fait via le contenu suivant pour le fichier viewlets.xml :

<?xml version="1.0"?>
<object>
  <hidden manager="plone.portaltop" skinname="MaSkin">
    <viewlet name="plone.path_bar" />
  </hidden>
</object>

Remarque: La skin "MaSkin" doit être défini dans le fichier ./Products/MonProduit/profiles/default/skinks.xml

Modifier l'ordre des viewlets

Pour changer l'ordre d'apparition des viewlets, il faut utiliser la balise order. Dans notre exemple, nous allons manipuler le provider "plone.portaltop" et placer son viewlet "plone.personal_bar" avant son viewlet "plone.header". Cela se fait via le contenu suivant pour le fichier viewlets.xml :

<?xml version="1.0"?>
<object>
<order manager="plone.portaltop" skinname="MaSkin">
<viewlet name="plone.personal_bar"
insert-after="plone.header"/>
</order>
</object>

Utiliser un viewlet Plone dans un autre provider que celui par défaut

Si vous souhaitez afficher un viewlet dans un autre provider que celui auquel il est destiné par défaut, il est nécessaire de le redéfinir. Dans notre exemple, nous allons placer le viewlet "plone.path_bar" dans un autre provider que "plone.portaltop".

Définition du nouveau provider

Nous allons créer le provider "monproduit.contenttop" qui viendra se placer au sommet du contenu.

En premier lieu, placez-vous dans le dossier de votre produit.

Créez ensuite le dossier browser et son fichier __init__.py :

/bin/mkdir browser
/bin/touch browser/__init__.py

Créez ensuite le fichier browser/interfaces.py avec le contenu suivant :

from zope.viewlet.interfaces import IViewletManager

class IContentTop(IViewletManager):
"""A viewlet manager that sits at the very top of the rendered page content
"""

Ou IContentTop est l'interface de notre nouveau provider.

Nous déclarons maintenant notre nouveau provider dans le fichier configure.zcml. Créez le fichier browser/configure.zcml et placez-y le contenu suivant:

<configure
xmlns="http://namespaces.zope.org/zope"
xmlns:browser="http://namespaces.zope.org/browser">

<!-- Register viewlet managers - used in plone's main_template -->

<browser:viewletManager
name="monproduit.contenttop"
provides=".interfaces.IContentTop"
permission="zope2.View"
class="plone.app.viewletmanager.manager.OrderedViewletManager"
/>

</configure>

Une fois ceci fait, nous déclarons notre dossier browser dans le fichier configure.zcml situé à la racine de notre produit en y ajoutant la ligne suivante:

 <include package=".browser" />

Enfin, copiez le fichier main_template.pt dans la skin de votre produit :

/bin/cp ../CMFPlone/skins/plone_templates/main_template.pt ./skins/monproduit_templates/

Et modifiez le.

Au dessus la ligne:

              <metal:block define-slot="content">

Ajoutez les lignes :

              <div id="content-top" i18n:domain="plone">
                <div tal:replace="structure provider:monproduit.contenttop" />
              </div>

Le provider "monproduit.contenttop" est maintenant défini, et vous pouvez y ajouter des viewlets.

Définition du viewlet destiné à être contenu par le nouveau provider

Nous devons re-déclarer le viewlet "plone.path_bar" pour qu'il soit utilisable dans le provider "monproduit.contenttop". Pour ce faire, ajoutez les lignes suivantes au fichier browser/configure.zcml :

    <browser:viewlet
name="monproduit.path_bar"
manager=".interfaces.IContentTop"
class="plone.app.layout.viewlets.common.PathBarViewlet"
permission="zope2.View"
/>

Remarque: Si vous souhaitez redéfinir un autre viewlet que "plone.path_bar", vous pouvez vous inspirer des définitions de viewlets présentes dans le fichier :

../../lib/python/plone/app/layout/viewlets/configure.zcml

Pour utiliser le viewlet que nous venons de déclarer, ajoutez les lignes suivantes au fichier profiles/default/viewlets.xml :

  <order manager="monproduit.contenttop" skinname="MaSkin">
    <viewlet name="monproduit.path_bar" />
  </order>

Il ne vous reste plus qu'a redémarrer Zope, et réinstaller votre produit pour voir les modification de mise en page que nous venons d'effectuer.