zope.viewlet 3.4.0

Design Notes

As mentioned above, besides inserting snippets of HTML at places, we more frequently want to define a region in our page and allow specialized content providers to be inserted based on configuration. Those specialized content providers are known as viewlets and are only available inside viewlet managers, which are just a more complex example of content providers.

Unfortunately, the Java world does not implement this layer separately. The viewlet manager is most similar to a Java “channel”, but we decided against using this name, since it is very generic and not very meaningful. The viewlet has no Java counterpart, since Java does not implement content providers using a component architecture and thus does not register content providers specifically for viewlet managers, which I believe makes the Java implementation less useful as a generic concept. In fact, the main design goal in the Java world is the implementation of reusable and sharable portlets. The scope for Zope 3 is larger, since we want to provide a generic framework for building pluggable user interfaces.

The Viewlet Manager

In this implementation of viewlets, those regions are just content providers called viewlet managers that manage a special type of content providers known as viewlets. Every viewlet manager handles the viewlets registered for it:

>>> class ILeftColumn(interfaces.IViewletManager):
...     """Viewlet manager located in the left column."""

You can then create a viewlet manager using this interface now:

>>> from zope.viewlet import manager
>>> LeftColumn = manager.ViewletManager('left', ILeftColumn)

Now we have to instantiate it:

>>> import zope.interface
>>> class Content(object):
...     zope.interface.implements(zope.interface.Interface)
>>> content = Content()

>>> from zope.publisher.browser import TestRequest
>>> request = TestRequest()

>>> from zope.publisher.interfaces.browser import IBrowserView
>>> class View(object):
...     zope.interface.implements(IBrowserView)
...     def __init__(self, context, request):
...         pass
>>> view = View(content, request)

>>> leftColumn = LeftColumn(content, request, view)

So initially nothing gets rendered:

>>> leftColumn.update()
>>> leftColumn.render()
u''

But now we register some viewlets for the manager

>>> import zope.component
>>> from zope.publisher.interfaces.browser import IDefaultBrowserLayer

>>> class WeatherBox(object):
...     zope.interface.implements(interfaces.IViewlet)
...
...     def __init__(self, context, request, view, manager):
...         self.__parent__ = view
...
...     def update(self):
...         pass
...
...     def render(self):
...         return u'<div class="box">It is sunny today!</div>'

>>> # Create a security checker for viewlets.
>>> from zope.security.checker import NamesChecker, defineChecker
>>> viewletChecker = NamesChecker(('update', 'render'))
>>> defineChecker(WeatherBox, viewletChecker)

>>> zope.component.provideAdapter(
...     WeatherBox,
...     (zope.interface.Interface, IDefaultBrowserLayer,
...     IBrowserView, ILeftColumn),
...     interfaces.IViewlet, name='weather')

>>> from zope.location.interfaces import ILocation
>>> class SportBox(object):
...     zope.interface.implements(interfaces.IViewlet,
...         ILocation)
...
...     def __init__(self, context, request, view, manager):
...         self.__parent__ = view
...
...     def update(self):
...         pass
...
...     def render(self):
...         return u'<div class="box">Patriots (23) : Steelers (7)</div>'

>>> defineChecker(SportBox, viewletChecker)

>>> zope.component.provideAdapter(
...     SportBox,
...     (zope.interface.Interface, IDefaultBrowserLayer,
...      IBrowserView, ILeftColumn),
...     interfaces.IViewlet, name='sport')

and thus the left column is filled. Note that also events get fired before viewlets are updated. We register a simple handler to demonstrate this behaviour.

>>> from zope.contentprovider.interfaces import IBeforeUpdateEvent
>>> events = []
>>> def handler(ev):
...     events.append(ev)
>>> zope.component.provideHandler(handler, (IBeforeUpdateEvent,))
>>> leftColumn.update()
>>> [(ev, ev.object.__class__.__name__) for ev in events]
[(<zope.contentprovider.interfaces.BeforeUpdateEvent...>, 'SportBox'),
 (<zope.contentprovider.interfaces.BeforeUpdateEvent...>, 'WeatherBox')]

>>> print leftColumn.render()
<div class="box">Patriots (23) : Steelers (7)</div>
<div class="box">It is sunny today!</div>

But this is of course pretty lame, since there is no way of specifying how the viewlets are put together. But we have a solution. The second argument of the ViewletManager() function is a template in which we can specify how the viewlets are put together:

>>> import os, tempfile
>>> temp_dir = tempfile.mkdtemp()
>>> leftColTemplate = os.path.join(temp_dir, 'leftCol.pt')
>>> open(leftColTemplate, 'w').write('''
... <div class="left-column">
...   <tal:block repeat="viewlet options/viewlets"
...              replace="structure viewlet/render" />
... </div>
... ''')

>>> LeftColumn = manager.ViewletManager('left', ILeftColumn,
...                                     template=leftColTemplate)
>>> leftColumn = LeftColumn(content, request, view)

TODO: Fix this silly thing; viewlets should be directly available.

As you can see, the viewlet manager provides a global options/viewlets variable that is an iterable of all the avialable viewlets in the correct order:

>>> leftColumn.update()
>>> print leftColumn.render().strip()
<div class="left-column">
  <div class="box">Patriots (23) : Steelers (7)</div>
  <div class="box">It is sunny today!</div>
</div>

If a viewlet provides ILocation the __name__ attribute of the viewlet is set to the name under which the viewlet is registered.

>>> [getattr(viewlet, '__name__', None) for viewlet in leftColumn.viewlets]
[u'sport', None]

You can also lookup the viewlets directly for management purposes:

>>> leftColumn['weather']
<WeatherBox ...>
>>> leftColumn.get('weather')
<WeatherBox ...>

If the viewlet is not found, then the expected behavior is provided:

>>> leftColumn['stock']
Traceback (most recent call last):
...
ComponentLookupError: No provider with name `stock` found.

>>> leftColumn.get('stock') is None
True

Customizing the default Viewlet Manager

One important feature of any viewlet manager is to be able to filter and sort the viewlets it is displaying. The default viewlet manager that we have been using in the tests above, supports filtering by access availability and sorting via the viewlet’s __cmp__() method (default). You can easily override this default policy by providing a base viewlet manager class.

In our case we will manage the viewlets using a global list:

>>> shown = ['weather', 'sport']

The viewlet manager base class now uses this list:

>>> class ListViewletManager(object):
...
...     def filter(self, viewlets):
...         viewlets = super(ListViewletManager, self).filter(viewlets)
...         return [(name, viewlet)
...                 for name, viewlet in viewlets
...                 if name in shown]
...
...     def sort(self, viewlets):
...         viewlets = dict(viewlets)
...         return [(name, viewlets[name]) for name in shown]

Let’s now create a new viewlet manager:

>>> LeftColumn = manager.ViewletManager(
...     'left', ILeftColumn, bases=(ListViewletManager,),
...     template=leftColTemplate)
>>> leftColumn = LeftColumn(content, request, view)

So we get the weather box first and the sport box second:

>>> leftColumn.update()
>>> print leftColumn.render().strip()
<div class="left-column">
  <div class="box">It is sunny today!</div>
  <div class="box">Patriots (23) : Steelers (7)</div>
</div>

Now let’s change the order…

>>> shown.reverse()

and the order should switch as well:

>>> leftColumn.update()
>>> print leftColumn.render().strip()
<div class="left-column">
  <div class="box">Patriots (23) : Steelers (7)</div>
  <div class="box">It is sunny today!</div>
</div>

Of course, we also can remove a shown viewlet:

>>> weather = shown.pop()
>>> leftColumn.update()
>>> print leftColumn.render().strip()
<div class="left-column">
  <div class="box">Patriots (23) : Steelers (7)</div>
</div>

Viewlet Base Classes

To make the creation of viewlets simpler, a set of useful base classes and helper functions are provided:

>>> from zope.viewlet import viewlet

The first class is a base class that simply defines the constructor:

>>> base = viewlet.ViewletBase('context', 'request', 'view', 'manager')
>>> base.context
'context'
>>> base.request
'request'
>>> base.__parent__
'view'
>>> base.manager
'manager'

But a default render() method implementation is not provided:

>>> base.render()
Traceback (most recent call last):
...
NotImplementedError: `render` method must be implemented by subclass.

If you have already an existing class that produces the HTML content in some method, then the SimpleAttributeViewlet might be for you, since it can be used to convert any class quickly into a viewlet:

>>> class FooViewlet(viewlet.SimpleAttributeViewlet):
...     __page_attribute__ = 'foo'
...
...     def foo(self):
...         return 'output'

The __page_attribute__ attribute provides the name of the function to call for rendering.

>>> foo = FooViewlet('context', 'request', 'view', 'manager')
>>> foo.foo()
'output'
>>> foo.render()
'output'

If you specify render as the attribute an error is raised to prevent infinite recursion:

>>> foo.__page_attribute__ = 'render'
>>> foo.render()
Traceback (most recent call last):
...
AttributeError: render

The same is true if the specified attribute does not exist:

>>> foo.__page_attribute__ = 'bar'
>>> foo.render()
Traceback (most recent call last):
...
AttributeError: 'FooViewlet' object has no attribute 'bar'

To create simple template-based viewlets you can use the SimpleViewletClass() function. This function is very similar to its view equivalent and is used by the ZCML directives to create viewlets. The result of this function call will be a fully functional viewlet class. Let’s start by simply specifying a template only:

>>> template = os.path.join(temp_dir, 'demoTemplate.pt')
>>> open(template, 'w').write('''<div>contents</div>''')

>>> Demo = viewlet.SimpleViewletClass(template)
>>> print Demo(content, request, view, manager).render()
<div>contents</div>

Now let’s additionally specify a class that can provide additional features:

>>> class MyViewlet(object):
...     myAttribute = 8

>>> Demo = viewlet.SimpleViewletClass(template, bases=(MyViewlet,))
>>> MyViewlet in Demo.__bases__
True
>>> Demo(content, request, view, manager).myAttribute
8

The final important feature is the ability to pass in further attributes to the class:

>>> Demo = viewlet.SimpleViewletClass(
...     template, attributes={'here': 'now', 'lucky': 3})
>>> demo = Demo(content, request, view, manager)
>>> demo.here
'now'
>>> demo.lucky
3

As for all views, they must provide a name that can also be passed to the function:

>>> Demo = viewlet.SimpleViewletClass(template, name='demoViewlet')
>>> demo = Demo(content, request, view, manager)
>>> demo.__name__
'demoViewlet'

In addition to the the generic viewlet code above, the package comes with two viewlet base classes and helper functions for inserting CSS and Javascript links into HTML headers, since those two are so very common. I am only going to demonstrate the helper functions here, since those demonstrations will fully demonstrate the functionality of the base classes as well.

The viewlet will look up the resource it was given and tries to produce the absolute URL for it:

>>> class JSResource(object):
...     def __init__(self, request):
...         self.request = request
...
...     def __call__(self):
...         return '/@@/resource.js'

>>> zope.component.provideAdapter(
...     JSResource,
...     (IDefaultBrowserLayer,),
...     zope.interface.Interface, name='resource.js')

>>> JSViewlet = viewlet.JavaScriptViewlet('resource.js')
>>> print JSViewlet(content, request, view, manager).render().strip()
<script type="text/javascript" src="/@@/resource.js">
</script>

There is also a javascript viewlet base class which knows how to render more then one javascript resource file:

>>> class JSSecondResource(object):
...     def __init__(self, request):
...         self.request = request
...
...     def __call__(self):
...         return '/@@/second-resource.js'

>>> zope.component.provideAdapter(
...     JSSecondResource,
...     (IDefaultBrowserLayer,),
...     zope.interface.Interface, name='second-resource.js')

>>> JSBundleViewlet = viewlet.JavaScriptBundleViewlet(('resource.js',
...                                                    'second-resource.js'))
>>> print JSBundleViewlet(content, request, view, manager).render().strip()
<script type="text/javascript"
        src="/@@/resource.js"> </script>
<script type="text/javascript"
        src="/@@/second-resource.js"> </script>

The same works for the CSS resource viewlet:

>>> class CSSResource(object):
...     def __init__(self, request):
...         self.request = request
...
...     def __call__(self):
...         return '/@@/resource.css'

>>> zope.component.provideAdapter(
...     CSSResource,
...     (IDefaultBrowserLayer,),
...     zope.interface.Interface, name='resource.css')

>>> CSSViewlet = viewlet.CSSViewlet('resource.css')
>>> print CSSViewlet(content, request, view, manager).render().strip()
<link type="text/css" rel="stylesheet"
      href="/@@/resource.css" media="all" />

You can also change the media type and the rel attribute:

>>> CSSViewlet = viewlet.CSSViewlet('resource.css', media='print', rel='css')
>>> print CSSViewlet(content, request, view, manager).render().strip()
<link type="text/css" rel="css" href="/@@/resource.css"
      media="print" />

There is also a bundle viewlet for CSS links:

>>> class CSSPrintResource(object):
...     def __init__(self, request):
...         self.request = request
...
...     def __call__(self):
...         return '/@@/print-resource.css'

>>> zope.component.provideAdapter(
...     CSSPrintResource,
...     (IDefaultBrowserLayer,),
...     zope.interface.Interface, name='print-resource.css')

>>> items = []
>>> items.append({'path':'resource.css', 'rel':'stylesheet', 'media':'all'})
>>> items.append({'path':'print-resource.css', 'media':'print'})
>>> CSSBundleViewlet = viewlet.CSSBundleViewlet(items)
>>> print CSSBundleViewlet(content, request, view, manager).render().strip()
<link type="text/css" rel="stylesheet"
      href="/@@/resource.css" media="all" />
<link type="text/css" rel="stylesheet"
      href="/@@/print-resource.css" media="print" />

A Complex Example

Cleanup

>>> import shutil
>>> shutil.rmtree(temp_dir)

Error Scenarios

Neither the class or template have been specified:

>>> context = xmlconfig.string('''
... <configure xmlns="http://namespaces.zope.org/browser" i18n_domain="zope">
...   <viewlet
...       name="testviewlet"
...       manager="zope.viewlet.directives.ILeftColumn"
...       permission="zope.Public"
...       />
... </configure>
... ''', context=context)
Traceback (most recent call last):
...
ZopeXMLConfigurationError: File "<string>", line 3.2-7.8
    ConfigurationError: Must specify a class or template

The specified attribute is not __call__, but also a template has been specified:

>>> context = xmlconfig.string('''
... <configure xmlns="http://namespaces.zope.org/browser" i18n_domain="zope">
...   <viewlet
...       name="testviewlet"
...       manager="zope.viewlet.directives.ILeftColumn"
...       template="test_viewlet.pt"
...       attribute="faux"
...       permission="zope.Public"
...       />
... </configure>
... ''', context=context)
Traceback (most recent call last):
...
ZopeXMLConfigurationError: File "<string>", line 3.2-9.8
    ConfigurationError: Attribute and template cannot be used together.

Now, we are not specifying a template, but a class that does not have the specified attribute:

>>> context = xmlconfig.string('''
... <configure xmlns="http://namespaces.zope.org/browser" i18n_domain="zope">
...   <viewlet
...       name="testviewlet"
...       manager="zope.viewlet.directives.ILeftColumn"
...       class="zope.viewlet.directives.Sport"
...       attribute="faux"
...       permission="zope.Public"
...       />
... </configure>
... ''', context=context)
Traceback (most recent call last):
...
ZopeXMLConfigurationError: File "<string>", line 3.2-9.8
  ConfigurationError: The provided class doesn't have the specified attribute

Cleanup

>>> import shutil
>>> shutil.rmtree(temp_dir)