Deliverance: Plone theming without the learning curve from Plone Symposium East 2009
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 13,659 views

This talk describes how to theme a Plone site using Deliverance, and discusses why you might want to use Deliverance.

This talk describes how to theme a Plone site using Deliverance, and discusses why you might want to use Deliverance.

Statistics

Views

Total Views
13,659
Views on SlideShare
13,443
Embed Views
216

Actions

Likes
13
Downloads
233
Comments
2

7 Embeds 216

http://blogs.onenw.org 94
http://www.slideshare.net 76
http://jstahl.org 33
http://www.techgig.com 6
http://www.tcag.com 4
http://www.linkedin.com 2
http://static.slidesharecdn.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Great work Nate.

    I couldn't attend the conference but our main Plone development partner had great things to say about Deliverance. While some of the technical details are beyond me, the practical applications are not. We are working on launching a new technology platform for one of our association clients that will require 3 different applications (including Plone) to share the same theme. Deliverance may be the perfect answer.

    Thanks for your hard work (and to those who helped you!). This is very important if we are going to continue to compete with other CMS's where theming is a little easier.

    Brett
    Are you sure you want to
    Your message goes here
    Processing…
  • very useful
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • Designers - \"for people who think Photoshop is lickable\" as Paul Everitt says) <br /> Integrators (\"People who's job it is to make Plone work for other people\") <br /> Customers (who already have and manage a corporate identity) <br /> First-timers (who want a quick win without too many new concepts) <br />
  • Consulting projects (where \"branding\" is already managed by non-developer) <br /> Heterogenous environment where the same theme must be shared across multiple applications (wiki, blog, mailman, bug tracker) <br /> Designers are not familiar with Plone and you need to iterate rapidly with design <br /> <br /> <br />
  • - Performance and flexibility (designers' css, js, images can be served up from disk, rather than plone) <br /> - Works with Python (and non-Python) \"we catch the markup on the way out the door and modify it\" <br />
  • - I'm both the developer and UI person (separation of concerns is overhead) <br /> <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • blog using pyblogsom <br />
  • roundup for bug tracking <br />
  • Mailman for mailing lists <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />

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

  • 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...
  • Put this nav and content...
  • Put this nav and content...
  • ...into this website design.
  • ...into this website design.
  • ...into this website design.
  • Voila!
  • Voila!
  • 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 configure.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 flexibility • 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
  • Blog
  • 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 file 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/configuration.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 identifiers for the description and body text fields • We can use Firebug to tell us the XPath expression for these elements.
  • children:#parent-fieldname-title
  • children:div#leftbar h2
  • Rule to replace heading <replace content=quot;children:#parent-fieldname-titlequot; theme=quot;children:div#leftbar h2quot; />
  • p.documentDescription
  • No class or id for this
  • Use XPath to get the element identifier
  • 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 first paragraph with the document description <replace content=quot;p.documentDescriptionquot; theme=quot;//*[@id=quot;leftbarquot;]/pquot; />
  • children:#parent-fieldname-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-fieldname-textquot; theme=quot;children://*[@id=quot;leftbarquot;]/p[2]quot; />
  • Logo, nav, heading, description, body text
  • 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 file • 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; /> <!-- we don't need the reddit zine links --> <drop content=quot;//div[@class='reddit']quot;/> <!-- let's drop the breadcrumbs from the plone theme --> <drop theme=quot;#portal-breadcrumbsquot;/> <!-- let's drop the plone login box --> <drop theme=quot;//td[@id='portal-column-one']/div/divquot;/> <!-- put the zine portlets in column one --> <append theme=quot;//td[@id='portal-column-one']/divquot; content=quot;//div[@class='sidebar']/*quot; nocontent=quot;ignorequot;/> <!-- put the body of the zine in the content region --> <append theme=quot;children:#region-contentquot; content=quot;children://div[@class='contents']quot; nocontent=quot;ignorequot; /> <!-- put the administrative links in column two --> <prepend theme=quot;children:#portal-column-twoquot; content=quot;//div[@class='body']/ulquot; nocontent=quot;ignorequot;/> <!-- make sure the login box has a spot when we need it --> <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-fly 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-ified 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
  • Thanks to... Paul Everitt Ian Bicking
  • 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 Definitive 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 Definitive • 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/configuration.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.flickr.com/photos/sir_mervs/ 2697096089/