In the cpsskins architecture everything is an element (cf. cpsskins.elements) There are three categories

of elements:

– content and canvas elements (portlets, cells, slots, pages, …)

– These are pure content classes without any notion of display or view.

– display element (areas, boxes, groups of box, ..)

– Display element contain information about the way in which elements are displayed, disposed on

a canvas (window states, visual ordering) without any notion of formatting.

– format elements (styles, widgets, layout, …)

– Format elements define the way in which elements are formatted (style, colors, widgets,

effects, …)

Displayable elements

An element that is “Displayable” can be associated to a display element.

A content elements will not be displayed unless it is associated with a display element.

There is an IDisplayable adapter (also available as a path adapter named “displayable”) that is used to make elements displayable.

>>> displayable = IDisplayable(element)

>>> displayable.addDisplay(…)

>>> displayable.getDisplay(…)

addDisplay() and getDisplay() are implemented with help of relations with:

1. dyadic predicates ( __ has display __)

2. triadic predicates ( __ has display __ from __ perspective __ ) if there is a context such as a perspective

In a page template it is possible to obtain the display of an element by using the named path adapter “displayable”:

tal:define=”display element/displayable:getDisplay”

Formattable elements

Display elements can be formatted. A display element that is formattable can be associated with a format element.

There is an IFormattable adapter (also available as a path adapter named “formattable”) that makes display elements formattable.

>>> formattable = IFormattable(display)

>>> formattable.addFormat(…)

>>> formattable.getFormat(…)

addFormat() and getFormat() are implemented with help of relations

In a page template the format associated to a display can be obtained by using the path adapter named “formattable”:


widget display/formattable:widget;

style display/formattable:style

formats display/formattable:getFormats;

Format filters

Format elements are used to give an appearance or to change the appearance of content elements. They are associated to filters. Each type of format element has its own filter.

Filters are adapters that adapt format elements and the request into format renderers (we omit the request to simplify the notation):

>>> filter = Ifilter(format)

A filter takes some input data that it transforms to return some output data:

>>> output = filter(input)

On this diagram we show a series of filters applied to some data: the widget filter is applied first, then

comes the style, and finally the layout.

The ZCML syntax is:

<!– Style filter: adds CSS classes to control the style of elements –>·






Display filters

It is possible to associate filters directly to a display element. In that case the IFilter adapter will be a named adapter and the format elements associated to a given element are not taken into account. The ZCML syntax is:

<filter name=”htmlcleaner” for=”cpsskins.elements.displays.interfaces.IDisplay” factory=”.htmlcleaner.HTMLCleaner”/>


The series of filters associated to a content element are part of a pipeline. As we have seen above, the content elements are related in the DOM tree by containment and they are ordered. We can represent the entire tree as a combination of pipelines with as many branches are there are leaves.

The content elements that represent inner nodes in the DOM tree are located in the middle of the rendering pipeline. The leaves are located at the beginning of the rendering pipeline.

To use a metaphor from nature, the inputs into the pipelines would be the mountain glaciers, the pipeline would be the rivers and the end of the pipeline the sea into which the rivers end. The filters would be all the dams located on the rivers path.