collective.xdv 1.0rc11

Installation

collective.xdv depends on:

• plone.transformchain to hook the transformation into the publisher

• plone.registry and plone.app.registry to manage settings

• plone.autoform, plone.z3cform and plone.app.z3cform to render the control panel

• five.globalrequest and zope.globalrequest for internal request access

• XDV, containing XDV itself itself

• lxml to perform the final transform

These will all be pulled in automatically if you are using zc.buildout and follow the installation instructions.

To install collective.xdv into your Plone instance, locate the file buildout.cfg in the root of your Plone instance directory on the file system, and open it in a text editor. Locate the section that looks like this:

# extends = http://dist.plone.org/release/3.3/versions.cfg
extends = versions.cfg
versions = versions

It may also have a URL in the “extends” section, similar to the commented-out first line, depending on whether you pull the Plone configuration from the network or locally.

To add collective.xdv to our setup, we need some slightly different versions of a couple of the packages, so we extend the base config with a version list from the good-py service, so change this part of the configuration so it looks like this:

extends =
    versions.cfg
    http://good-py.appspot.com/release/collective.xdv/1.0?plone=3.3.5
versions = versions

Note that the last part of the URL above before the ? is the xdv version number. There may be a newer version by the time you read this, so check out the overview page for the known good set.

Replace ?plone=3.3.5 with the version of Plone you are using. This dependency versions appropriate to your Plone.

What happens here is that the dependency list for collective.xdv specifies some new versions for you via the good-py URL. This way, you don’t have to worry about getting the right versions, Buildout will handle it for you.

Next step is to add the actual collective.xdv add-on to the “eggs” section of buildout.cfg. Look for the section that looks like this:

eggs =
    Plone

This section might have additional lines if you have other add-ons already installed. Just add the collective.xdv on a separate line, like this:

eggs =
    Plone
    collective.xdv [Zope2.10]

Note the use of the [Zope2.10] extra, which brings in the ZPublisherEventsBackport package for forward compatibility with Zope 2.12 / Plone 4. If you are using Zope 2.12 or later (e.g. with Plone 4), you should do:

eggs =
    Plone
    collective.xdv

Note that there is no need to add a ZCML slug as collective.xdv uses z3c.autoinclude to configure itself automatically.

Once you have added these lines to your configuration file, it’s time to run buildout, so the system can add and set up collective.xdv for you. Go to the command line, and from the root of your Plone instance (same directory as buildout.cfg is located in), run buildout like this:

$ bin/buildout

You will see output similar to this:

Getting distribution for 'collective.xdv==1.0'.
Got collective.xdv 1.0.
Getting distribution for 'plone.app.registry'.
Got plone.app.registry 1.0a1.
Getting distribution for 'plone.synchronize'.
Got plone.synchronize 1.0b1.
...

If everything went according to plan, you now have collective.xdv installed in your Zope instance.

Next, start up Zope, e.g with:

$ bin/instance fg

Then go to the “Add-ons” control panel in Plone as an administrator, and install the “XDV theme support” product. You should then notice a new “XDV Theme” control panel in Plone’s site setup.

Usage

In the “XDV Theme” control panel, you can set the following options:

Enabled yes/no

Whether or not the transform is enabled.

Domains

A list of domains (including ports) that will be matched against the HOST header to determine if the theme should be applied. Note that 127.0.0.1 is never styled, to ensure there’s always a way back into Plone to change these very settings. However, ‘localhost’ should work just fine.

Theme

A file path or URL pointing to the theme file. This is just a static HTML file.

Rules

The filesystem path to the rules XML file.

Alternate themes

A list of definitions of alternate themes and rules files for a different path. Should be of the form ‘path theme rules’ where path may use a regular expression syntax, theme is a file path or URL to the theme template and rule is a file path to the rules file. If the theme or a rules string starts with ‘python://’ a path resolve is done, so for example you could refer to a theme file in your theme package as python://yourtheme.xdvtheme/static/page.html .

XSLT extension file

It is possible to extend XDV with a custom XSLT file. If you have such a file, give its URL here.

Absolute prefix

If given, any relative URL in an <img />, <link />, <style /> or <script /> in the theme HTML file will be prefixed by this URL snippet when the theme is compiled. This makes it easier to develop theme HTML/CSS on the file system using relative paths that still work on any URL on the server.

Unstyled paths

This is used to give a list of URL patterns (using regular expression syntax) for pages that will not be styled even if XDV is enabled. By default, this includes the ‘emptypage’ view that is necessary for the Kupu editor to work, and the manage_* pages that make up the ZMI.

Note that when Zope is in debug mode, the theme will be re-compiled on each request. In non-debug mode, it is compiled once on startup, and then only if the control panel values are changed.

``python://my.package/mytheme/rules.xml``

<configure
    xmlns="http://namespaces.zope.org/zope"
    xmlns:browser="http://namespaces.zope.org/browser">

    ...

    <browser:resourceDirectory
        name="my.package"
        directory="mytheme"
        />

    ...

</configure>

http://localhost:8080/Plone/++resource++my.package/theme.html

<drop theme="/html/head/link" />
<drop theme="/html/head/style" />

<!-- Pull in Plone CSS -->
<append theme="/html/head" content="/html/head/link | /html/head/style" />

/plone-site/portal_css/Suburst+Theme/merged-cachekey-1234.css

request/HTTP_X_XDV | nothing

not: request/HTTP_X_XDV | nothing

A worked example

There are many ways to set up an XDV theme. For example, you could upload the theme and rules as content in Plone use absolute paths to configure them. You could also serve them from a separate static web server, or even load them from the filesystem.

To create a deployable theme, however, it is often best to create a simple Python package. This also provides a natural home for theme-related customisations such as template overrides.

Although a detailed tutorial is beyond the scope of this help file, a brief, worked example is shown below.

1. Create a package and install it in your buildout:

   $ cd src
   $ paster create -t plone my.theme

See the buildout manual for details

If you have a recent ZopeSkel installed, this should work. Pick easy mode. Answer “yes” when asked if you want to register a profile.

Then edit buildout.cfg to add your new package (my.theme above) to the develop and eggs lists.

2. Edit setup.py inside the newly created package

The install_requires list should be:

install_requires=[
      'setuptools',
      'collective.xdv',
  ],

Re-run buildout:

$ bin/buildout

3. Edit configure.zcml inside the newly created package.

Add a resource directory inside the <configure /> tag. Note that you may need to add the browser namespace, as shown.

<configure

xmlns=”http://namespaces.zope.org/zope” xmlns:browser=”http://namespaces.zope.org/browser” xmlns:i18n=”http://namespaces.zope.org/i18n” xmlns:genericsetup=”http://namespaces.zope.org/genericsetup” i18n_domain=”my.theme”>

<genericsetup:registerProfile

name=”default” title=”my.theme” directory=”profiles/default” description=”Installs the my.theme package” provides=”Products.GenericSetup.interfaces.EXTENSION” />

<browser:resourceDirectory

name=”my.theme” directory=”static” />

</configure>

Here, we have used the package name, my.theme, for the resource directory name. Adjust as appropriate.

4. Add a static directory next to configure.zcml.

5. Put your theme and rules files into this directory.

For example, you may have a theme.html that references images in a sub-directory images/ and stylesheets in a sub-directory css/. Place this file and the two directories inside the newly created static directory.

Make sure the theme uses relative URLs (e.g. <img src="images/foo.jpg" />) to reference its resources. This means you can open theme up from the filesystem and view it in its splendour.

Also place a rules.xml file there. See the XDV documentation for details about its syntax. You can start with some very simple rules if you just want to test:

<?xml version="1.0" encoding="UTF-8"?>
<rules
    xmlns="http://namespaces.plone.org/xdv"
    xmlns:css="http://namespaces.plone.org/xdv+css">

    <!-- Head: title -->
    <replace theme="/html/head/title" content="/html/head/title" />

    <!-- Base tag -->
    <replace theme="/html/head/base" content="/html/head/base" />

    <!-- Drop styles in the head - these are added back by including them from Plone -->
    <drop theme="/html/head/link" />
    <drop theme="/html/head/style" />

    <!-- Pull in Plone CSS -->
    <append theme="/html/head" content="/html/head/link | /html/head/style " />

</rules>

These rules will pull in the <title /> tag (i.e. the browser window’s title), the <base /> tag (necessary for certain Plone URLs to work correctly), and Plone’s stylesheets.

See below for some more useful rules.

6. Create the installation profile

The generated code above for the <genericsetup:registerProfile /> tag contains a reference to a directory profiles/default. You may need to create this next to configure.zcml if it doesn’t exist already, i.e. create a new directory profiles and inside it another directory default.

In this directory, add a file called metadata.xml containing:

<metadata>
    <version>1</version>
    <dependencies>
        <dependency>profile-collective.xdv:default</dependency>
    </dependencies>
</metadata>

This will install collective.xdv into Plone when my.theme is installed via the add-on control panel later.

Also create a file called registry.xml, with the following contents:

<registry>

    <!-- collective.xdv settings -->

    <record interface="collective.xdv.interfaces.ITransformSettings" field="domains">
        <value>
            <element>domain.my:8080</element>
        </value>
    </record>

    <record interface="collective.xdv.interfaces.ITransformSettings" field="rules">
        <value>python://my.theme/static/rules.xml</value>
    </record>

    <record interface="collective.xdv.interfaces.ITransformSettings" field="theme">
        <value>python://my.theme/static/theme.html</value>
    </record>

    <record interface="collective.xdv.interfaces.ITransformSettings" field="absolute_prefix">
        <value>/++resource++my.theme</value>
    </record>

</registry>

Replace my.theme with your own package name, and rules.xml and theme.html as appropriate.

This file configures the settings behind the XDV control panel.

Hint: If you have played with the control panel and want to export your settings, you can create a snapshot in the portal_setup tool in the ZMI. Examine the registry.xml file this creates, and pick out the records that relate to collective.xdv. You should strip out the <field /> tags in the export, so that you are left with <record /> and <value /> tags as shown above.

Also, add a cssregistry.xml in the profiles/default directory to configure the portal_css tool:

<?xml version="1.0"?>
<object name="portal_css">

 <!-- Set conditions on stylesheets we don't want to pull in -->
 <stylesheet
     expression="not:request/HTTP_X_XDV | nothing"
     id="public.css"
     />

 <!-- Add new stylesheets -->
 <!-- Note: applyPrefix is not available in Plone < 4.0b3 -->

 <stylesheet title="" authenticated="False" cacheable="True"
    compression="safe" conditionalcomment="" cookable="True" enabled="on"
    expression="request/HTTP_X_XDV | nothing"
    id="++resource++my.theme/css/styles.css" media="" rel="stylesheet"
    rendering="link"
    applyPrefix="True"
    />

</object>

This shows how to set a condition on an existing stylesheet, as well as registering a brand new one. We’ve set applyPrefix to True here, as explained above. This will only work in Plone 4.b3 and later. For earlier versions, simply take this out.

7. Test

Start up Zope and go to your Plone site. Your new package should show as installable in the add-on product control panel. When installed, it should install collective.xdv as a dependency and pre-configure it to use your theme and rule set. By default, the theme is not enabled, so you will need to go to the control panel to switch it on.

You can now compare your untouched theme, the unstyled Plone site, and the themed site by using the following URLs:

• http://localhost:8080 (or whatever you have configured as the styled domain) for a styled Plone. If you used the sample rule above, this will look almost exactly like your theme, but with the <title /> tag (normally shown in the title bar of your web browser) taken from Plone.

• http://127.0.0.1:8080 (presuming this is the port where Plone is running) for an unstyled Plone.

• http://localhost:8080/++resource++my.theme/theme.html for the pristine theme. This is served as a static resource, almost as if it is being opened on the filesystem.

Common rules

To copy the page title:

<!-- Head: title -->
<replace theme="/html/head/title" content="/html/head/title" />

To copy the <base /> tag (necessary for Plone’s links to work):

<!-- Base tag -->
<replace theme="/html/head/base" content="/html/head/base" />

To drop all styles and JavaScript resources from the theme and copy them from Plone’s portal_css tool instead:

<!-- Drop styles in the head - these are added back by including them from Plone -->
<drop theme="/html/head/link" />
<drop theme="/html/head/style" />

<!-- Pull in Plone CSS -->
<append theme="/html/head" content="/html/head/link | /html/head/style" />

To copy Plone’s JavaScript resources:

<!-- Pull in Plone CSS -->
<append theme="/html/head" content="/html/head/script" />

To copy the class of the <body /> tag (necessary for certain Plone JavaScript functions and styles to work properly):

<!-- Body -->
<prepend theme="/html/body" content="/html/body/attribute::class" />

Other tips

• Firebug is an excellent tool for inspecting the theme and content when building rules. It even has an XPath extractor.

• Read up on XPath. It’s not as complex as it looks and very powerful.

• Run Zope in debug mode whilst developing so that you don’t need to restart to see changes to theme, rules or, resources.

Changelog