Deliverance: Plone theming without the learning curve from Plone Symposium East 2009

Deliverance Deliverance Plone theming without the learning curve Plone Symposium East 2009 State College, PA May 29, 2009 Nate Aune www.jazkarta.com

Who am I? • Using Plone since 2002 • Founder/President of Jazkarta since 2004 • Not a designer but work with many designers

Put this nav and content...

...into this website design.

Voila!

How long did this take?

2 minutes

How many lines of code?

2 rules

And I didn't touch www.psu.edu (honest)

Agenda • What is the problem with Plone theming? • What is Deliverance? • Who is it for? • When might you consider using Deliverance? • Who is using it? • How do you use it? • Q&A

Theming in Plone an exercise in patience • Install dependencies (Python, XCode, GCC) • Create a theme egg using paster • Put your stylesheets and images in /browser • But override Plone assets in /skins • To turn off viewlets, must edit conﬁgure.zcml • To make new viewlets must code Python • Must learn ZPT to edit page templates

Knowledge needed • Buildout • Paster • Zope page templates (ZPT) • Python • ZCML • resource registry (for CSS and JS) • /skins vs. /browser

Designers are not coders quot;It is a significant disadvantage if the designers and HTML/CSS coders are not familiar with Plone, but it's incredibly difficult to find top designers who have even heard of Plone.quot; - Scott Paley (Abstract Edge)

Who is it for? • Designers • Integrators • Customers • First-timers

When you might consider using Deliverance? • Consulting projects • Heterogenous environment • Designers are not familiar with Plone

Why use it? • Designers don't want to learn unusual stuff • Sometimes the design already exists • Reduce size of stuff-unique-to-Plone • Performance and ﬂexibility • Works with Python (and non-Python)

Why not? • Plone 2.5/3.0 is easy enough to theme • Might be hard, but worth it • I'm both the developer and UI person • I'll need to stray over the line anyway • Plone needs to stop changing

Who is using it? • The Open Planning Project • repoze.org • plone.tv • plone.org

TOPP • Many different systems • All being themed using Deliverance • topp.openplans.org

TOPP One Deliverance theme for: • Plone site • Wordpress site • Task tracker

repoze.org nginx Deliverance proxy proxy

Home page

Issue tracker

Mailing lists

plone.tv uses Deliverance

plone.org uses Deliverance

How does it work? move elements from your content into placeholders in your theme ... without touching the theme or content

Black magic? (well, not really) • uses a rule ﬁle to govern the merging • rules are verbs of common actions • use CSS selectors or XPath to identify elements to act on

What are the verbs? • drop • append • prepend • replace Rules documentation: http://deliverance.openplans.org/conﬁguration.html

Let's look at an example

How do I make this...

...look like this? http://www.oswd.org/design/preview/id/3293

With Deliverance! Deliverance

Replace the logo • Replace the logo in the theme with the logo in the Plone site. • Use Firebug to identify the CSS selectors • Use the <replace> verb since we only want one logo.

#portal-logo img

#logo h1

Rule to replace logo <replace content=quot;____________quot; theme=quot;_______quot; />

Rule to replace logo <replace content=quot;#portal-logo imgquot; theme=quot;________quot; />

Rule to replace logo <replace content=quot;#portal-logo imgquot; theme=quot;#logo h1quot; />

Logo placeholder is replaced with real logo

Slightly more complex example • Replace horizontal navigation tabs with Plone's portal_tabs • Uses children: to select the children elements • Keeps parent which has the proper CSS attributes for the theme style.

children:#portal-globalnav

children:#links ul

Rule to replace navigation <replace content=quot;__________________quot; theme=quot;____________quot; />

Rule to replace navigation <replace content=quot;children:#portal-globalnavquot; theme=quot;____________quot; />

Rule to replace navigation <replace content=quot;children:#portal-globalnavquot; theme=quot;children:#links ulquot; />

Dummy text for top navigation is replaced

Introducing XPath • Replace page title and description and body text • Theme doesn't have explicit identiﬁers for the description and body text ﬁelds • We can use Firebug to tell us the XPath expression for these elements.

children:#parent-ﬁeldname-title

children:div#leftbar h2

Rule to replace heading <replace content=quot;children:#parent-ﬁeldname-titlequot; theme=quot;children:div#leftbar h2quot; />

p.documentDescription

No class or id for this

Use XPath to get the element identiﬁer

XPath • The XPath expression that Firebug gives us: • /html/body/div/div/div[3]/div[2]/p • since the <div> above the <p> has an ID, we can use this shorthand notation: • //*[@id=quot;leftbarquot;]/p

Replace the ﬁrst paragraph with the document description <replace content=quot;p.documentDescriptionquot; theme=quot;//*[@id=quot;leftbarquot;]/pquot; />

children:#parent-ﬁeldname-text

What is the XPath for the 2nd paragraph?

What is the XPath for the 2nd paragraph? • children://*[@id=quot;leftbarquot;]/p[2]

Map body text to 2nd paragraph <replace content=quot;children:#parent-ﬁeldname-textquot; theme=quot;children://*[@id=quot;leftbarquot;]/p[2]quot; />

Logo, nav, heading, description, body text

XPath of more link

Remove the more link with drop <drop theme='/html/body/div/div/div[3]/div/a' />

Other cool features of Deliverance 0.3 • modify attributes • drop a particular CSS ﬁle • conditionals (when logged in, when not) • load content from external sources • rewriting - don't need a local dev environment • debugging console

Modify attributes Replace tags

Debugging console

Edit rules TTW

Ways to run deliverance • proxy • WSGI middleware using repoze • xdv (using Martin's collective.xdv)

Proxy • Deliverance runs on port 5000 and forwards requests on to port 8080 • Two separate Python processes

WSGI Middleware • Deliverances runs as WSGI middleware • Only one Python process • Example showing Zope and Zine running in same process

Make your blog look like your Plone site

Zine - python blogging tool

paste.ini [pipeline:zope] [filter:deliverance] pipeline = egg:Paste#cgitb use = egg:deliverance#main egg:Paste#httpexceptions rule_filename = %(here)s/rules.xml egg:repoze.retry#retry egg:repoze.tm#tm [server:main] egg:repoze.vhm#vhm_xheaders use = egg:repoze.zope2#zserver errorlog host = localhost zope2 port = 8080cat [pipeline:blog] [composite:main] pipeline = egg:Paste#cgitb use = egg:Paste#urlmap egg:Paste#httpexceptions /blog = blog errorlog /zope = zope deliverance zine

rules.xml <ruleset> <theme href=quot;/zope/Plone/main_templatequot; /> <rule> <prepend theme=quot;//headquot; content=quot;//head/linkquot; nocontent=quot;ignorequot; /> <prepend theme=quot;//headquot; content=quot;//head/stylequot; nocontent=quot;ignorequot; /> <append theme=quot;//headquot; content=quot;//head/scriptquot; nocontent=quot;ignorequot; /> <append theme=quot;//headquot; content=quot;//head/metaquot; nocontent=quot;ignorequot; /> <replace theme=quot;//head/titlequot; content=quot;//head/titlequot; nocontent=quot;ignorequot; />  <drop content=quot;//div[@class='reddit']quot;/>  <drop theme=quot;#portal-breadcrumbsquot;/>  <drop theme=quot;//td[@id='portal-column-one']/div/divquot;/>  <append theme=quot;//td[@id='portal-column-one']/divquot; content=quot;//div[@class='sidebar']/*quot; nocontent=quot;ignorequot;/>  <append theme=quot;children:#region-contentquot; content=quot;children://div[@class='contents']quot; nocontent=quot;ignorequot; />  <prepend theme=quot;children:#portal-column-twoquot; content=quot;//div[@class='body']/ulquot; nocontent=quot;ignorequot;/>  <append theme=quot;#viewlet-above-contentquot; content=quot;//div[@class='login-box']quot; nocontent=quot;ignorequot;/> </rule> </ruleset>

Zine themed as Plone

collective.xdv • tightly integration solution with Plone • applies a transformation to Plone's HTML output, using the XDV compiler • XDV is an implementation of Deliverance, specifically the original Deliverance XML- based syntax • Compiles the theme (an HTML file) and rules (an XML file) into a single XSLT file, which is then applied to Plone's HTML on render.

collective.xdv

xdv vs. Deliverance 0.3 Pros and Cons

Pros for xdv • Deployment is simpler, as pure XSLT • No runtime overhead of another long- running Python process

Cons for xdv • Somewhat less natural selectors/rules (i.e. you can't use CSS selectors, at least not directly) • Less momentum • The dv.xdvproxy that lets you use xdv on- the-ﬂy with WSGI has some issues and is not intended for production use.

Pros for Deliverance 0.3 • Has a dedicated maintainer • More powerful - can combine multiple themes without requiring Apache magic, for example • CSS selectors

Cons for Deliverance 0.3 • More power means people will start doing crazy things • Makes most sense (for Plone) in a WSGI pipeline, but that aspect is not quite as developed yet, and Plone is not WSGI-iﬁed until 4.0. • Requires a long-running process until we're talking about a full WSGI stack or mod_wsgi

Thanks to... Paul Everitt

Thanks to... Paul Everitt Ian Bicking

Thanks to... Paul Everitt Ian Bicking Aaron VanDerlip

Your chance to contribute and learn! Deliverance documentation sprint • produce the Deﬁnitive Deliverance tutorial • help promote and disseminate information about Deliverance • make Plone theming easier for all!

Your chance to contribute and learn! Deliverance documentation sprint • produce the Deﬁnitive • learn the easiest way to theme your Plone Deliverance tutorial sites • help promote and • learn hands-on how disseminate information Deliverance works about Deliverance • make Plone theming • get all your Deliverance questions easier for all! answered

More info • http://svn.plone.org/svn/collective/deliverancedemo/ • http://www.openplans.org/projects/deliverance/ introduction • http://deliverance.openplans.org/conﬁguration.html • http://plone.tv/media/1884178516/view (Ian's talk) • http://plone.tv/media/1099397680/view (Paul's talk) • http://pypi.python.org/pypi/collective.xdv/ • http://www.sixfeetup.com/blog/2009/4/27/deploying- plone-and-zine-together-with-deliverance-using- repoze

Photo credits • http://www.ﬂickr.com/photos/sir_mervs/ 2697096089/

http://blogs.onenw.org	94
http://www.slideshare.net	76
http://jstahl.org	28
http://www.tcag.com	4
http://www.techgig.com	4
http://static.slidesharecdn.com	1

Deliverance: Plone theming without the learning curve from Plone Symposium East 2009

by Jazkarta, Inc.

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 207

Statistics

Deliverance: Plone theming without the learning curve from Plone Symposium East 2009 Presentation Transcript