collective.examples.diazo 0.2

Example of Diazo (xdv) usage in Plone

Introduction

This package shows how you might use collective.xdv / Diazo in a Plone site. It aims to be more verbose (and probably more redundant) than xdv-worked-example.

It’s aimed towards developers, and it focuses especially on adding worked examples of more complex XSLT. Eventually we’re hoping to get the code examples in the xdv package itself, as they’re not specific to Plone.

Contents

• Introduction

  • Installation

  • Examples in this package

  • Credits / Who to bug

  • Collective.xdv worked example

    • Multiple themes

    • Including extra rules files

  • The orange_sunset theme example

    • Installation

    • Extending

• Changelog

Installation

Include collective.examples.diazo in your buildout.

There’s a buildout on https://svn.plone.org/svn/collective/collective.examples.diazo/trunk/buildout. It won’t work on Mac…yet. But you can install collective.xdv on a Mac using statically compiled lxml, don’t use the buildout contained here, but use the collective.examples.diazo by checking out the source to your /src directory and updating your own buildout.cfg and re-running buildout -N.

Examples in this package

We do not have a single static directory. Instead, we have directories for each theme.

Themes:

collective-xdv-example: the example from the collective.xdv product.

Credits / Who to bug

Package created during the sprint after the Plone Conference 2010.

Team:

• Jamie Lentin

• Ken Wasetis

• Laurence Rowe

• Peter Uittenbroek

• Kees Hink

Collective.xdv worked example

The initial rulesfile was taken from the collective.xdv documentation. To this, we added:

Multiple themes

We want to use a different theme for the “News” section. This is done using the <theme> directive.

We did this by setting a selector for the body element’s content class:

<theme href="theme.html" />
<theme
    href="theme-news.html"
    css:if-content="body.section-news"
    />

Note that we have to set the fallback theme. Failing to do so will result in an unthemed page.

To use a specific theme for a content type, you can use another selector for the body element’s class, ie:

<theme href="theme.html" />
<theme
    href="theme-news.html"
    css:if-content="body.portaltype-folder"
    />

You could also theme for a specific template in this way.

This only works on xdv >= 0.4b3, which the current KGS does not include. To force the right version of xdv, add this to your buildout:

[versions]
xdv = 0.4b3

Including extra rules files

To include an extra rules file, use the XInclude statement. You could use this statement to slit up a large rules file into separate files.

For example, this rule in rules.xml calls another rules file rules-standard.xml:

<!-- Stuff that happens on all pages -->
<xi:include href="rules-standard.xml" />

This one executes the rules-document.xml, but only for Plone Document objects:

<!-- Stuff that happens on Plone's Documents (standard pages) only -->
<rules css:if-content="body.portaltype-document">
    <xi:include href="rules-document.xml" />
</rules>

The orange_sunset theme example

• The Orange Sunset theme was downloaded from oswd.org, a site with Open Source Web Design templates.

• The original static HTML/CSS theme was developed by D Carter, while the this collective.xdv-based theme was developed in collaboration with the members of the Diazo sprint at the Bristol, U.K. Plone Conference, October 30th, 2010.

• Terms: The downloaded zip file from oswd.org has a CSS file that refers to a license.txt that does not exist, but the author’s website indicates the terms of the themes developed by DCarter. These terms indicate that this theme should generally maintain the ‘Design by DCarter’ attribution in the footer of the page, or that a contribution should be made to its creator. More information at: http://www.dcarter.co.uk/terms.html

• Recommendation: This Diazo/xdv theme is meant to provide a nice reference for developers and designers who wish to leverage Diazo to theme their own Plone-based websites (although the contained rules.xml could provide useful tips on rules syntax when attempting to use standalone XDV (or as part of a WSGI pipeline) to theme any type of web application. This theme is not intended to be leveraged to theme your website directly.

Hopefully. you’ll find it useful as an example when building your own Diazo themes.

Installation

You have obviously already installed the collective.examples.xdv product that contains the orange_sunset theme and its directory containing static HTML, image, and CSS files.

Once you have installed the collective.examples.xdv product in your Plone site via the Site Setup -> Add Ons area (click checkbox next to this product and then click the ‘Activate’ button.)

Once you have activated the product, click on the new ‘XDV theme’ configlet link under the Add-on Configuration section of Site Setup.

In the ‘Theme template’ field enter: python://collective.examples.diazo/static/orange_sunset/index.html

In the ‘Rules file’ field enter: python://collective.examples.diazo/static/orange_sunset/rules.xml

In the ‘Absolute URL Prefix’ field enter:

/++resource++collective.examples.diazo/orange_sunset

You can modify the ‘Domains’ box to use the IP and/or port that will work for reaching your Plone site. It typically defaults to port :8080 on localhost, but if your Zope is running on port 6000, change it to that.

Be sure to have the ‘Enabled’ checkbox at the top checked in order to have this theme applied to your site.

Note: Do not try to enter ‘127.0.0.1:your-port’ as one of the themed domains in your configuration, as the 127.0.0.1 address has been reserved, so that you always have a way to get back to viewing the unthemed-through-Diazo Plone website (in case you break your theme so badly when modifying your rules file that it renders the site unviewable.)

Extending

You can modify the rules.xml file in this distribution to adjust the existing theme mapping rules, create your own, or whatever.

To create your own theme, you might copy/paste the orange_sunset directory in this product’s /static directory, rename the new directory to a unique name for your new theme, and then copy in whatever static html/css/images you’d like to use under that directory, as well as modify the rules.xml file in your new Diazo theme directory. We hope this jumpstarts your Diazo theme development!

Changelog

0.2 (2010-10-30)

• Initial release, PloneConf2010.