20. Writing Viewlets¶

A viewlet for the social behavior¶

A viewlet is not a view but a snippet of html and logic that can be put in various places in the site. These places are called viewletmanager.

• Inspect existing viewlets and their managers by going to http://localhost:8080/Plone/@@manage-viewlets.
• We already customized a viewlet (collophon.pt). Now we add a new one.
• Viewlets don’t save data (portlets do)
• Viewlets have no user-interface (portlets do)

social-viewlet¶

Let’s add a link to the site that uses the information that we collected using the social-behavior.

We register the viewlet in browser/configure.zcml.

1
2
3
4
5
6
7
8
9

<browser:viewlet
  name="social"
  for="ploneconf.site.behaviors.social.ISocial"
  manager="plone.app.layout.viewlets.interfaces.IBelowContentTitle"
  class=".viewlets.SocialViewlet"
  layer="zope.interface.Interface"
  template="templates/social_viewlet.pt"
  permission="zope2.View"
  />

This registers a viewlet called social. It is visible on all content that implements the interface ISocial from our behavior. It is also good practice to bind it to the BrowserLayer IPloneconfSiteLayer of our addon so it only shows up if our addon is actually installed.

The viewlet-class SocialViewlet is expected in a file browser/viewlets.py.

1
2
3
4

from plone.app.layout.viewlets import ViewletBase

class SocialViewlet(ViewletBase):
    pass

This class does nothing except rendering the associated template (That we have to write yet)

1
2
3
4
5
6

from five import grok
from plone.app.layout.viewlets import interfaces as viewletIFs
from zope.component import Interface

class SocialViewlet(grok.Viewlet):
    grok.viewletmanager(viewletIFs.IBelowContentTitle)

Let’s add the missing template templates/social_viewlet.pt.

1
2
3
4
5
6
7
8
9

<div id="social-links">
    <a href="#"
       class="lanyrd-link"
       tal:define="link view/lanyrd_link"
       tal:condition="link"
       tal:attributes="href link">
         See this talk on Lanyrd!
    </a>
</div>

As you can see this is not a valid html document. That is not needed, because we don’t want a complete view here, just a html snippet.

There is a tal define statement, querying for view/lanyrd_link. Like in page templates the template has access to its class.

We have to extend the Social Viewlet now to add the missing attribute:

1
2
3
4
5
6
7
8

from plone.app.layout.viewlets import ViewletBase
from ploneconf.site.behaviors.social import ISocial

class SocialViewlet(ViewletBase):

    def lanyrd_link(self):
        adapted = ISocial(self.context)
        return adapted.lanyrd

So far, we

• register the viewlet to content that has the ISocial Interface.
• adapt the object to it’s behavior to be able to access the fields of the behavior
• return the link

Exercise 1¶

Register a viewlet ‘number_of_talks’ in the footer that is only visible to admins (the permission you are looking for is cmf.ManagePortal). Use only a template (no class) to display the number of talks already submitted. Hint: Use Aquisition to get the catalog (You know, you should not do this but there is plenty of code out there that does it...)

<browser:viewlet
  name="number_of_talks"
  for="*"
  manager="plone.app.layout.viewlets.interfaces.IPortalFooter"
  layer="zope.interface.Interface"
  template="templates/number_of_talks.pt"
  permission="cmf.ManagePortal"
  />

<div class="number_of_talks"
     tal:define="catalog python:context.portal_catalog;
                 talks python:len(catalog(portal_type='talk'));">
    There are <span tal:replace="talks" /> talks.
</div>

<div class="number_of_talks"
     tal:define="catalog context/@@plone_tools/catalog;
                 talks python:len(catalog(portal_type='talk'));">
    There are <span tal:replace="talks" /> talks.
</div>

<div class="number_of_talks"
     tal:define="catalog python:context.restrictedTraverse('plone_tools').catalog();
                 talks python:len(catalog(portal_type='talk'));">
    There are <span tal:replace="talks" /> talks.
</div>

Exercise 2¶

Register a viewlet ‘days_to_conference’ in the header. Use a class and a template to display the number of days until the conference. You get many bonus-points if you display it in a nice format (think “In 2 days” and “Last Month”) by using an existing javascript or python library.