Questo tutorial è una libera traduzione di http://plone.org/documentation/tutorial/customizing-main-template-viewlets/tutorial-all-pages di David Convent.

Plone 3 utilizza i componenti viewlet di Zope3 invece delle tradizionali macro METAL.

Questo tutorial spiega cosa sono le viewlet e i viewlet manager e come si possono usare per personalizzare l'interfaccia di Plone 3 e per creare un nuovo tema (skin).

La scopo di questo documento è mostrare come fare ciò utilizzando un prodotto Python sul filesystem anche se tutto può essere fatto mediante l'accesso via web.

Cominciamo guardando il codice del main_template di Plone, che è il template che monta le varie aree della pagina attorno al contenuto (es: testata, piede, le due colonne laterali, ecc...):

Nel main_template.pt, che si trova in $INSTANCE_HOME/Products/CMFPlone/skins/plone_templates/, possiamo vedere che il tag <div /> con id portal-top contiene solo tre righe di codice. Invece nelle versioni di Plone precedenti alla 3.0 conteneva una lista di chiamate alle macro che generavano le site actions, il box di ricerca, il logo, ecc...

Ecco come appariva quella porzione di codice nelle vecchie versioni del main_template.pt:

<div id="portal-top" i18n:domain="plone">

<div id="portal-header">
  <p class="hiddenStructure">
    <a accesskey="2"
       tal:attributes="href string:${current_page_url}#documentContent"
       i18n:translate="label_skiptocontent">Skip to content.</a> |

    <a accesskey="6"
       tal:attributes="href string:${current_page_url}#portlet-navigation-tree"
       i18n:translate="label_skiptonavigation">Skip to navigation</a>
  </p>

     <div metal:use-macro="here/global_siteactions/macros/site_actions">
       Site-wide actions (Contact, Sitemap, Help, Style Switcher etc)
     </div>

     <div metal:use-macro="here/global_searchbox/macros/quick_search">
       The quicksearch box, normally placed at the top right
     </div>

     <a metal:use-macro="here/global_logo/macros/portal_logo">
       The portal logo, linked to the portal root
     </a>

     <div metal:use-macro="here/global_skinswitcher/macros/skin_tabs">
       The skin switcher tabs. Based on which role you have, you
       get a selection of skins that you can switch between.
     </div>

     <div metal:use-macro="here/global_sections/macros/portal_tabs">
       The global sections tabs. (Welcome, News etc)
     </div>
  </div>

  <div metal:use-macro="here/global_personalbar/macros/personal_bar">
     The personal bar. (log in, logout etc...)
   </div>

   <div metal:use-macro="here/global_pathbar/macros/path_bar">
     The breadcrumb navigation ("you are here")
   </div>
</div>

 Mentre ora è così:

<div id="portal-top" i18n:domain="plone">
    <div tal:replace="structure provider:plone.portaltop" />
</div>

L'espressione TAL provider è un'espressione di Zope 3 utilizzata per cercare un content provider in una pagina.

In Zope 3 (a partire dalla 3.2) un content provider è un componente che genera una parte di una pagina HTML.

Come le viste di Zope 3, i content provider sono dei multi adapter che adattano il context e la request, e in aggiunta adattano la vista da cui sono richiamati.

Le viewlet sono content provider, piccoli componenti di una pagina che generano un piccolo pezzo di codice HTML.

Nei template di Plone le viewlet non sono richiamate direttamente, ma, per permetterne una gestione organizzata e flessibile, sono aggregate nei viewlet manager.

Anche i viewlet manager sono content provider che restituiscono l'insieme delle viewlet registrate.

Nelle prossime sezioni verrà mostrato cosa sono le viewlet e i viewlet manager, cosa vi si possa fare e quali sono i vantaggi di questo approccio. Per approfondire questo argomento puoi consultare il libro di Philipp Web Component Development with Zope 3 - 2d. edition, chapter 10.4.