Easier and faster Plone theming with Deliverance and xdv

Nate Aune (@natea)
www.jazkarta.com
Plone Conference 2010
Deliverance
a compelling way to Plone sites
1

Obstacles
Plone theming has a
high barrier to entry
2

jazkarta
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
3

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

jazkarta
Does your head hurt yet?
5

jazkarta
What is Deliverance?
• Middleware tool that serves as a proxy
• Maps content HTML into design HTML
• Keeps presentation separate from content
6

Are you a f’ender
or a b’ender?
7

jazkarta
Who is it for?
• Designers
8

jazkarta
Who is it for?
• Designers
• Integrators
8

jazkarta
Who is it for?
• Designers
• Integrators
• Developers
8

jazkarta
Who is it for?
• Designers
• Integrators
• Developers
• Customers
8

The current
compromise
People that
have design skills
People that have
coding skills
People competent at both
9

The Deliverance Way
People that know CSS
Web Designers
Web
Developers
10

jazkarta
How does it work?
move elements from your content
11

jazkarta
How does it work?
into placeholders in your theme
11

jazkarta
How does it work?
into placeholders in your theme
... without touching the theme or content
11

jazkarta
Python
is
magical
http://xkcd.com/353/
12

jazkarta
Knowledge needed
• HTML
• CSS
• Firebug
• simple editing of XML file
14

jazkarta
Four simple rules
• drop
• replace
• prepend
• append
15

jazkarta
Deliverance benefits
• web designer doesn't need to learn CMS templating
• separation of concerns
• theme multiple apps with one design
(trac, wiki, blog, etc.)
16

jazkarta
Who is using Deliverance?
17

jazkarta
• Harvard School of Engineering
17

jazkarta
• City of Albuquerque
17

jazkarta
• HaiVision.com
17

jazkarta
• HaiVision.com
• ploneconf2009.org (get the buildout!)
17

jazkarta
• HaiVision.com
• ploneconf2009.org (get the buildout!)
• and many others...
17

Case study
A real world example of using Deliverance
18

jazkarta
HaiVision
"Replace our custom backend with Plone CMS."
22

jazkarta
HaiVision
"Sure, we can do that."
Jazkarta
22

jazkarta
HaiVision
Jazkarta
"Keep the frontend design the same."
HaiVision
22

jazkarta
HaiVision
Jazkarta
HaiVision
"No problem."
Jazkarta
22

jazkarta
HaiVision
Jazkarta
HaiVision
"No problem."
Jazkarta
"We're going to change the design soon, and
we want to be able to change the HTML/CSS
ourselves."
HaiVision
22

jazkarta
HaiVision
Jazkarta
HaiVision
"No problem."
Jazkarta
"We're going to change the design soon, and
we want to be able to change the HTML/CSS
ourselves."
HaiVision
"Umm. Ok, you will be able to do that."
Jazkarta
22

Customers
change their
mind about
their identity
all the time.
Don't make it painful than
it already is for them.
23

Jazkarta
"Oh, and we need this done
in two weeks."
HaiVision
24

Jazkarta
"Oh, and we need this done
in two weeks."
HaiVision
"WTF!?"
24

Deliverance
to the rescue!
DELIVERANCE
25

jazkarta
Why Deliverance?
• They have three different sections of the
site, each needing to be themed differently.
• They want to change the design, but their
staff only knows HTML/CSS.
• They might want to theme another web
app to have the same look-n-feel as their
website.
• Oh, and they want this done ASAP.
26

jazkarta
Why not a Plone theme?
• Significant man hours to make a pixel perfect Plone
theme
• Difficult to apply a different theme for different
sections of the site
• The customer should not have to learn Plone
theming technology to make design changes.
• One less piece of software that we have to maintain
• Difficult to upgrade to newer versions of Plone
when there are many theme customizations
27

jazkarta
Seven Steps to Heaven
28

jazkarta
1. Check out and run the Deliverance demo buildout
28

jazkarta
2. Prepare your HTML/CSS files (might need to do
some cleanup)
28

jazkarta
2. Prepare your HTML/CSS files (might need to do
some cleanup)
3. Stick the files in a /static folder in buildout dir
28

jazkarta
4. Identify the CSS selectors of the elements in the
Plone site that we wish to map to the static
theme.
29

jazkarta
theme.
5. Identify the CSS selectors in the static theme that
should serve as placeholders for the dynamic
content coming from Plone.
29

jazkarta
theme.
6. Create a rules file that maps Plone content
elements to placeholder elements in the theme
29

jazkarta
theme.
6. Create a rules file that maps Plone content
elements to placeholder elements in the theme
7. Set up an Apache vhost to proxy to Deliverance
29

jazkarta
Start your engines!
30

jazkarta
1. Check out and run
the demo buildout
svn co http://svn.plone.org/svn/collective/deliverancedemo/trunk/ dd
cd dd
python bootstrap.py
bin/buildout -v
Run the bootstrap command and run the buildout
This will install Deliverance and it's dependencies (lxml)
and install a Plone site at /Plone
31

jazkarta
2. Prepare your HTML/CSS
• An HTML/CSS template that you downloaded
from somewhere
• Design assets that were given to you by a
customer, design agency or your designer
• A design from an existing website
32

jazkarta
3. Stick them in a /static
dir in your buildout
34

jazkarta
4. Identify elements in
Plone to map to design
• Firebug is your friend (www.getfirebug.com)
• Click on elements to get their class or id
• Can also get XPath expression by right-
clicking on element
35

jazkarta
5. Identify the corresponding
element in the theme
• You may need to add a class or ID to better
identify the element.
• You can use an absolute path to the element in
the DOM, but if the element gets moved, the
mapping rule will not work anymore.
• So it's best to always use a class or ID to avoid
breakage.
37

jazkarta
rules-training.xml
<?xml version="1.0" encoding="UTF-8"?>
<ruleset>
<server-settings>
<server>0.0.0.0:5000</server>
<execute-pyref>true</execute-pyref>
<dev-allow>127.0.0.1</dev-allow>
<dev-user username="guest" password="guest" />
</server-settings>
<proxy path="/static" class="static" editable="1">
<dest href="{here}/static/" />
</proxy>
<proxy path="/" class="plone">
<dest href="http://localhost:8080/VirtualHostBase/http/
localhost:5000/Plone/VirtualHostRoot/" />
</proxy>
<rule class="static" />
39

jazkarta
rules-training.xml
Open the rules-training.xml file
in the buildout directory.
<?xml version="1.0" encoding="UTF-8"?>
<ruleset>
<server-settings>
<server>0.0.0.0:5000</server>
<execute-pyref>true</execute-pyref>
<dev-allow>127.0.0.1</dev-allow>
</server-settings>
<proxy path="/static" class="static" editable="1">
<dest href="{here}/static/" />
</proxy>
localhost:5000/Plone/VirtualHostRoot/" />
</proxy>
<rule class="static" />
39

jazkarta
The "plone" rule class
<rule class="plone">

<theme href="/static/index.html" />

</rule>
</ruleset>
40

jazkarta
Replace rule
for page heading
<replace content='children:_______________________'
theme='children:_________________' />
41

jazkarta
Replace rule
for page heading
<replace content='children:h1.documentFirstHeading'
theme='children:_________________' />
42

jazkarta
Replace rule
for page heading
theme='children:span.sectionTitle' />
43

jazkarta
6. Insert our rule into the
rules-training.xml file
<rule class="plone">

<theme href="/static/index.html" />

theme='children:span.sectionTitle' />
</rule>
</ruleset>
44

jazkarta
Let's start up Zope and
the Deliverance proxy
$ cd dd
$ bin/instance start
. . daemon process started, pid=3556
$ bin/deliverance-proxy rules-training.xml
To see logging, visit http://127.0.0.1:5000/.deliverance/login
after login go to http://127.0.0.1:5000/?deliv_log
serving on http://127.0.0.1:5000
45

Go to
http://localhost:5000
... to see the Plone site themed with Deliverance
46

Replace navigation tree
<drop content='.portletNavigationTree dt.portletHeader' />
49

<drop content='li.navTreeItem img' />
49

<replace content="dl.portletNavigationTree"
49

theme="children:#left-navigation" />
49

theme="children:#left-navigation" />
Must place drop rules before replace rule.
49

How do you theme the
sections differently?
50

jazkarta
haivision.com/products
51

jazkarta
Apply page class by path
<match path="/" class="default" />
<match path="/applications" class="applications" />
<match path="exact:/" class="frontpage" />
52

jazkarta
haivision.com/applications
53

jazkarta
Repurpose static portlet
54

jazkarta
Each page class can have
a separate theme & rules
55

jazkarta
Each page class can have
a separate theme & rules
<rule class="applications" suppress-standard="1">
<theme href="/static/applications.html" />
<replace content='children:p.documentDescription'
theme='children:span.SectionSubtitle' />
<replace content='children:#portal-column-two'
theme='children:#right-column' />
</rule>
55

jazkarta
frontpage: haivision.com/
56

jazkarta
Repurpose the news portlet
57

jazkarta
Frontpage has it's own
theme and rules
<rule class="frontpage">
<theme href="/static/frontpage.html"/>
<drop content=".portletNews dt.portletHeader" />
<drop content='.portletNews dd.portletFooter' />
<drop content='.portletNews dd.portletItem img' />
<replace content='dl.portletNews'
theme='children:#newsbox' />
</rule>
58

jazkarta
Serve up different web apps
59

jazkarta
Serve up different web apps
<proxy path="/trac" class="trac">
<dest href="http://localhost:10002" />
</proxy>
<proxy path="/blog" class="blog">
<dest href="http://localhost:10003" />
</proxy>
<transform rewrite-links="1" keep-host="1" />
{HOST}/sites/haivision-manage/VirtualHostRoot/" />
</proxy>
59

jazkarta
How do I deploy Deliverance
into production?
• Run as a proxy on port 5000.Apache or
Nginx proxies to port 5000.
• two separate python processes
• Run as WSGI middleware.
• only one python process running
60

jazkarta
Where does Deliverance
sit in the stack?
Name
Title
Deliverance
Apache
61

jazkarta
7. Make the Apache vhost
<VirtualHost *:80>
ServerName www.haivision.com
ProxyPreserveHost On
RewriteEngine On
RewriteRule ^/(.*) http://127.0.0.1:5000/$1 [L,P]
</VirtualHost>
The ProxyPreserveHost is very important.
62

Tips and Tricks
From the many Plone sites
we’ve themed with Deliverance
63

jazkarta
Append the id/class
attributes from the body tag
<append content="attributes(id,class):/html/body"
theme="attributes:/html/body" />
Here is an example from the Haivision site:
<body class=”section-products template-document-view”>
64

jazkarta
Drop the right column on
pages with a particular
template
<drop if-content=".searchPage ||
.template-login_form ||
body.template-mail_password_form ||
.template-default_error_message"
theme=".col2" />
65

jazkarta
Embed HTML forms from
other sites into Plone
<match path="/donate/in-honor-of" class="honorform" />
<match path="/donate/in-memory-of" class="memoryform" />
<match path="/donate/personal" class="personalform" />
Rule class for honor form.
<rule class="honorform">
<theme href="/static/subpage.html" />
<prepend href='/static/forms/honor.html'
content="#honorform"
theme=".documentActions" />
</rule>
67

jazkarta
Embed Constant Contact
subscribe form
68

jazkarta
subscribe form
constant-contact.html
<div id="constant-contact">
<form ...>
...
</form>
</div>
68

jazkarta
subscribe form
<append href="/static/forms/constant-contact.html"
content="#constant-contact"
theme="children:#leftboxgreen" />
constant-contact.html
<div id="constant-contact">
<form ...>
...
</form>
</div>
68

jazkarta
Place the portlets in order
<replace content="children:/html/body/div/table/tbody/tr/td/div/div[1]/dl/dd"
theme="children:#leftboxpink" />
<replace content="/html/body/div/table/tbody/tr/td/div/div[2]/dl"
theme="children:#leftboxpurple" />
<replace content="/html/body/div/table/tbody/tr/td/div/div[3]/dl"
theme="children:#leftboxgreen" />
We don’t know the name of the portlets, so we use XPath.
69

jazkarta
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
...
<li><a class="MenuBarItemSubmenu" href="#">News & Events</a>
<ul>
<li><a href="#">Events </a></li>
<li><a href=”#”>Past Events</a></li>
<li><a href="#">In the News</a></li>
</ul>
</li>
...
</div>
menu.html
70

jazkarta
One replace rule to
embed the menubar
<replace href="/static/menubar.html"
content="children:#menu"
theme="children:#menu" />
71

jazkarta
Copy the edit bar
<prepend content='div.contentActions'
theme='#body-content' />
<prepend content='#content-views'
theme='#body-content' />
72

jazkarta
Make sure all the proper CSS
and Javascripts get imported
<prepend content="link[href *= 'authoring']"
theme="link[href *= 'style']" />
<append content="link[href *= 'public']"
theme="children:/html/head" />
<prepend content="/html/head/style"
theme="link[href *= 'style']" />
<append content="/html/head/script"
theme="children:/html/head" />
CSS files need their settings change from the default 'import'
to 'link' in order for the rules to work
73

jazkarta
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Deco Grid System</title>
<link rel="stylesheet" href="css/decogrids-16.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="css/main.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="css/fixes.css" type="text/css" charset="utf-8" />
<script src="js/jquery.tools.min.js" />
<body>
<div id="wrapper">
<div id="header">
<div class="row">
<div class ="cell width-13 position-0" id="logo"><a href="/"><img src="images/logo.png"/></a></div>
<div class ="cell width-3 position-13" id="searchbox"><a id="contact" href="/contact">contact</a></div>
</div>
<div class="row" id="top-nav">
<div class ="cell width-15 position-0 navTabs">
<ul>
<a id="home-tab"href="/">Home</a>
<a id="services-tab" href="/services">Services</a>
<a id="clients-tab" href="/clients">Clients</a>
<a id="about-tab" href="/about">About</a>
<li><a id="blog-tab" href="http://blog.jazkarta.com">Blog</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class ="cell width-3 position-0" id="left-column">left column </div>
<div class ="cell width-10 position-3" id="body-content">about</div>
<div class ="cell width-3 position-13" id="right-column">right column</div>
</div>
<div class="row" id="footer">
</div>
</div>
</body>
</html>
74

jazkarta
Injects the Plone toolbar
75

jazkarta
PyQuery
for link in doc('#menu a'):
li = doc('<li></li>')
link.after(li)
link.remove()
li.append(link)
76

jazkarta
What about
performance?
• Deliverance respects caching headers
• Pages load fast because they don't have to
load all of Plone's assets
• Deliverance runs in small memory footprint
and takes hardly any server resources
77

jazkarta
Deliverance vs
XDV/Diazo
78

jazkarta
Deliverance vs
XDV/Diazo
• Both use CSS selectors or XPath
78

jazkarta
Deliverance vs
XDV/Diazo
• Deliverance
78

jazkarta
Deliverance vs
XDV/Diazo
• Deliverance
• <replace theme="#main" content="#portal-content > *" />
78

jazkarta
Deliverance vs
XDV/Diazo
• Deliverance
• XDV
78

jazkarta
Deliverance vs
XDV/Diazo
• Deliverance
• XDV
• <copy css:theme="#main" css:content="#portal-content > *" />
78

jazkarta
Deliverance vs
XDV/Diazo
• Deliverance
• XDV
• <copy css:theme="#main" css:content="#portal-content > *" />
• Can combine multiple themes without Apache magic
78

jazkarta
Deliverance advantages
• Serves static resources directly from the file system.
No need to make a skin or serve from Apache.
• Deliverance has a very useful debugging console
• Deliverance lets you edit files (HTML, CSS,
rules.xml) through-the-web
79

Edit rules TTW
http://codespeak.net/svn/z3/deliverance/trunk/deliverance/editor/
81

jazkarta
Enable TTW editing
<server-settings>
<dev-allow>
127.0.0.1
24.218.111.149
98.216.49.27
209.104.75.94
</dev-allow>
<edit-local-files>true</edit-local-files>
</server-settings>
82

Go to Laurence’s
XDV talk!
12:05 at Wessex on thursday
http://laplone.org/presentations/deliverance-vs-xdv-wpd2010.pdf
83

Future
• CSSZenGarden for Plone themes
• theme1.demo.plone.org
• theme2.demo.plone.org
• ...
Anyone want to sprint on this?
Combine with one-click demo Plone sites on EC2
84

Thanks to...
Paul Everitt Ian Bicking
85

Thanks to...
Paul Everitt Ian Bicking AaronVanDerlip
85

jazkarta
http://coactivate.org/projects/deliverance/
http://coactivate.org/projects/banjo/
http://svn.plone.org/svn/collective/ploneconf/buildout/ploneconf/trunk/
http://svn.plone.org/svn/collective/deliverancedemo/trunk
Sample Deliverance buildouts
http://deliverance.openplans.org
http://plone.org/docu
Deliverance documentation and tutorial
Project pages
87

jazkarta
Photo credits
• http://www.flickr.com/photos/sir_mervs/2697096089/
• http://www.flickr.com/photos/foxypar4/1004464889
• http://www.flickr.com/photos/pamilne/2271490945
• http://www.flickr.com/photos/motleye/1459699804
• http://www.flickr.com/photos/kaptainkobold/351967847
• http://www.flickr.com/photos/aldoaldoz/2332755401
• http://xkcd.com/353/
88

Easier and faster Plone theming with Deliverance and xdv

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Viewers also liked

Viewers also liked (20)

Similar to Easier and faster Plone theming with Deliverance and xdv

Similar to Easier and faster Plone theming with Deliverance and xdv (20)

More from Jazkarta, Inc.

More from Jazkarta, Inc. (20)

Recently uploaded

Recently uploaded (20)

Easier and faster Plone theming with Deliverance and xdv