Vous êtes ici : Accueil → Support → Documentation → Tutoriels → Créer des portlets (CpSkin2)

Créer des portlets (CpSkin2)

Note: Ceci est une impression contenant toutes les pages du Tutoriel sur une seule page. La version paginée est disponible ici.

Les différents types de portlets et les usages: Page d'accueil: - Portlet qui affiche le contenu d'un document (créé par l'administrateur et modifiable par l'utilisateur) - Portlet créé comme un document avec le produit "seneffeportlet" (configurable par l'administrateur et créé par l'utilisateur) - Portlet qui pointe sur un dossier automatique (réalisable par l'administrateur mais configurable et alimenté par l'utilisateur) - Portlet codé dans le dossier custom (réalisable par l'administrateur du site)

Portlet qui affiche le contenu d'un document

Création d'un document, création d'une page template pour l'affichage sous forme de portlet, ajout d'une valeur dans les propriétés du dossier pour afficher le portlet.

- Créons d'abord le document que nous souhaitons afficher en mode portlet à la racine du site (il existe un moyen beaucoup plus aisé pour les autres pages du site).

Il suffit comme pour un document classique de cliquer sur le lien "ajouter au dossier" et de sélectionner l'élément "document" dans la liste.

Nous nommerons ce document "portlet_photo", "photo" étant la partie du nom qui peut changer selon notre souhait. Nous pourrions ainsi créer une document destiné à la page d'accueil qui s'appellerait "portlet_adresse" pour spécifier l'adresse de la maison communale, etc.

- Il faut maintenant créer une page template dans le dossier "/portal_skins/custom".
Pour ce faire, il faut sélectionner l'élément "Page Template" et cliquer sur le bouton "Add".

Nommez la Page Template: "portlet_document_view"
et insérez-y le code suivant:

  <html xmlns:tal="http://xml.zope.org/namespaces/tal"
        xmlns:metal="http://xml.zope.org/namespaces/metal"
        i18n:domain="plone">
  <body>
    <div metal:define-macro="portlet" tal:omit-tag="">
        <tal:block>
            <dl class="portlet">
                <dt class="portletHeader" tal:content="here/title_or_id">Title</dt>
                <dd class="portletItem" tal:content="structure here/getText">Content</dd>
            </dl>
        </tal:block>
    </div>
  </body>
  </html>

Cliquez ensuite sur "Save Changes" et le tour est joué.

Il reste à appeler le document "portlet_photo" en lui appliquant la vue "portlet_document_view"
dans les propriétés du slot de gauche ou de droite de la racine du site.

Donc, à la racine de la ZMI, cliquez sur l'onglet "Properties" et ajouter la ligne suivante comme valeur pour le "left_slots" ou le "right_slots":

portal/nom du document/nom de la template
soit
portal/portlet_photo/portlet_document_view

Finalement, le document doit être renommé pour ne pas afficher un titre "portlet_photo". Il faut bien sûr le renommer sans changer l'id.
 

Utiliser le produit seneffeportlets

seneffe portlet permet à un utilisateur final de créer des portlets aussi facilement qu'un document

Après avoir installé le produit sur son instance il faut ajouter, par la ZMI, la valeur <br /> <br /> here/portlet_content_portlets/macros/portlet<br /> <br /> à la propriété &quot;left_slots&quot; ou &quot;right_slots&quot; des dossiers dans lesquels on souhaite utiliser l'outil (les dossiers &quot;thèmes&quot; par exemple).<br /> <br /> <img width="493" height="496" alt="valeurportletseneffe.jpg" src="/support/documentation/tutorial/creer-des-portlets-dans-plone/valeurportletseneffe.jpg" /><br /> <br /> <br /> <br /> Pour créer un portlet, on clique sur ajout d'un élément et on sélectionne &quot;Portlet&quot;<br /> <br /> <br /> <img width="621" height="728" src="/support/documentation/tutorial/creer-des-portlets-dans-plone/portletlocal.jpg" alt="portletlocal.jpg" /><br /> <br /> <br /> Si l'on coche &quot;Portlet local&quot;, le portlet ne s'affichera pas dans les sous-dossiers.<br /> Par contre, si l'on crée un portlet dans un sous-dossier, ce dernier prendra le dessus sur celui qui aurait été créé dans le dossier &quot;parent&quot;.

Portlet qui affiche le contenu d'un dossier automatique

Le portlet affiche le 'contenu" d'un dossier automatique (topic) en fonction des critères de recherche de ce dernier

Il faut tout d'abord créer un portlet dans le dossier custom par la ZMI

/portal_skins/custom/

en ajoutant une Page Template

lui donnant un nom de type: portlet_lenomdemonportlet

et en y collant le code suivant:

<html xmlns:tal="http://xml.zope.org/namespaces/tal"
      xmlns:metal="http://xml.zope.org/namespaces/metal"
      i18n:domain="plone">
<body>
<div metal:define-macro="portlet">
<dl class="portlet">

    <dt class="portletHeader">
        <span class="portletTopLeft"></span>
           Titre de mon portlet
        <span class="portletTopRight"></span>
    </dt>

<tal: define="brains context/urldudossierautomatique/nomdudossierautomatique/queryCatalog">

       <dd  class="portlet" tal:condition="brains">
       <tal:loop repeat="brain brains">
         <p>
           <img src="#" alt="" tal:replace="structure here/event_icon.gif" />  
            <a href="" tal:attributes="href python: brain.getObject().absolute_url()">
              <span class="link-event" tal:content="python: brain.getObject().Title()" />
            </a>
            <br />
              <span tal:content="python: brain.getObject().Description()" />
        </p>
       </tal:loop>
       </dd>

      </tal:>

</dl>
</div>
</body>
</html>

Il faut maintenant créer un dossier automatique en reprenant le nom mentionné dans le code du portlet.
Créer des critères de recherche pour le dossier automatique.

et finalement

appeler le portlet dans les propriétés du site ou d'un dossier (right_slots , left_slots)
en y ajoutant la ligne

here/nomdemonportlet/macros/portlet

Remarque:
le code suivant repris plus haut:

           <img src="#" alt="" tal:replace="structure here/event_icon.gif" />

permet l'affichage d'une image; dans ce cas ci l'icône event_icon.gif

Si l'on ne souhait pas afficher d'image, il suffit de commenter le code ou de le supprimer

Le code commenté =


<!--           <img src="#" alt="" tal:replace="structure here/event_icon.gif" / >   -->

on peut aussi utiliser une autre image de plone qui se trouve dans le dossier /portal_skins/plone_images

ou créer sa propre image et l'ajouter dans le dossier custom

Le graphisme du portlet peut aussi être adapté en css