ZMS Helper Tag

The ZMSHelper tag is a special DTML-tag which encapsulates some recurring tasks during the setup of ZMS templates in easy to use one-line tags.
The target audience are people who build ZMS templates from scratch. The tag is useful for beginners as well as experienced Zope coders.

Objective

We wanted to reduce the effort of building own custom templates in ZMS.

  • the code should be kept as readable as possible
  • the length of code necessary for a template should be reduced by 50% to 70%
  • the code rendered by the templates should be valid XHTML, aware of accessibility features
  • the appearance should be controlled as much as possible by the CSS. No tables should be used at all
  • the tool should be bundled in a Zope Product

Solution

We started with implementing a Python Script library located in the parent folder of our ZMS instances but later switched to a Zope Product based solution which is easier to port to another Zope Instance and better to keep under version control.

The ZMS Helper Tag

  • is a new DTML tag like <dtml-var...> it looks like this: <dtml-zms...>
  • has a mandatory attribute cmd="COMMANDNAME" which controls the render results.
    Possible values are, e.g. "tag", "tree" or "breadcrumbs"
  • renders links, images or whole navigational elements like breadcrumbs and tree lists
  • works especially on ZMS specific objects but also with, e.g. Zope Images
  • requires newer Zope and ZMS installations. It has been tested with Zope 2.7.0 and ZMS 2.3.

Features

  • to render a complete link to a given Zope object with its title is just one line of code: <dtml-zms cmd="tag" obj="content">
  • href or src attributes of anchor or image elements are shortened: host and protocol are cut from the absolute url. This helps to keep your pages as small as possible.
  • anchor and image tags are rendered with a title attribute which is taken from the long title property of the ZMS object. This helps bringing your site closer to accessibility standards and shows, e.g. a popup box when you move the mouse pointer over the hyperlink.
  • images are correctly rendered with specified width and height attributes according to their physical dimensions. You can even override these attributes.
  • to include navigational elements only one line of code is necessary. The rest is done by CSS
  • with the include command you can easily include text/html from remote sites and optionally strip unwanted HTML tags