• Like
  • Save
How diazo works
Upcoming SlideShare
Loading in...5
×
 

How diazo works

on

  • 583 views

Getting the mental model right.

Getting the mental model right.

Statistics

Views

Total Views
583
Views on SlideShare
578
Embed Views
5

Actions

Likes
3
Downloads
9
Comments
0

1 Embed 5

https://twitter.com 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

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…
Post Comment
Edit your comment
  • An interpreter reads the rules file as a list of instructions.Starts with copy of theme, applies rules, one at a time, transforming theme at each stage. Output in one step is input in the next.
  • Two parts: Part one: Rules are used to analyze and transform theme to produce an XSL template. Content is not involved in part one. Part two: template applied to content. Original theme is not involved. Variety of transformation engines available.
  • Let’s look back at part one of the processing. The important thing to realize is that the mapping of the rules onto the theme is much more like CSS than Python. The ordering of your rules makes a difference in the same way it does with CSS - as a tie-breaker.
  • Back to part two XSL template is applied to transform content. An XSLT engine is basically a node processor - a recursive one.
  • Let’s watch this in action for a simple replace. No, that’s not real XSL -- all you’ll see today is pseudo code
  • Let’s just elaborate the previous example to see how “children” specs are applied. Note that the outer div survives the transform.
  • Let’s add a conditional and see how that works
  • And, some before and after rules. Order doesn’t matter! Generated XSL stays the same.
  • What about content drop / replace rules? Here’s where the recursive character of XSL transformation comes in.
  • Let’s return to our replace example. This is a regular theme replacement. But there’s a step we didn’t show before: continued processing - content drop replaces
  • content drops/replaces are done with each pull from content, on what’s been pulled. Rule order doesn’t matter! All content rules are applied during this processing
  • First, a simple attempt at a move; move news portlet to a box of its own; leave rest of portlets. This would depend on the order of the rules; it will not work; .portletNews content will be missing from the final page. More advanced diazo users know how to fix this: with a mode directive. But note where it goes!
  • “ Cooking” is what we’ve been doing all along, executing content drops and replaces automatically. Adding mode=”raw” changes the XSLT processing after the insert.

How diazo works How diazo works Presentation Transcript

  • How Diazo Works Getting the mental model right Steve McMahon steve@dcn.org Plone Conference 2013, Brasília Thursday, October 3, 13
  • This talk has been rated T Technical Pervasive references to HTML and XML. Disturbing Thematic Elements Thursday, October 3, 13
  • XSL Thursday, October 3, 13
  • XSL Thursday, October 3, 13
  • HTML XML CSS Thursday, October 3, 13
  • Quick Review Thursday, October 3, 13
  • Theme Rules Content Thursday, October 3, 13
  • DIAZO Theme Rules Content Thursday, October 3, 13
  • DIAZO Theme Rules Content Themed Content Thursday, October 3, 13
  • ContentContentContent DIAZO Theme Rules Content Themed Content Thursday, October 3, 13
  • ContentContentContent DIAZO RulesRulesRulesTheme Rules Content Themed Content Thursday, October 3, 13
  • <html> <head> <title>Styled Page</title> <style>...</style> <script>...</script> </head> <body> ... <div id="newsbox">...</div> ... <div id="eventbox">...</div> ... <div id="rightcolumn">...</div> ... <div id="doormat">...</div> ... </body> </html> Theme — HTML Thursday, October 3, 13
  • <html> <head> <title>Styled Page</title> <style>...</style> <script>...</script> </head> <body> ... <div id="newsbox">...</div> ... <div id="eventbox">...</div> ... <div id="rightcolumn">...</div> ... <div id="doormat">...</div> ... </body> </html> Theme — HTML Thursday, October 3, 13
  • <html> <head> <title>Styled Page</title> <style>...</style> <script>...</script> </head> <body> ... <div id="newsbox">...</div> ... <div id="eventbox">...</div> ... <div id="rightcolumn">...</div> ... <div id="doormat">...</div> ... </body> </html> Theme — HTML Thursday, October 3, 13
  • <html> <head> <title>Styled Page</title> <style>...</style> <script>...</script> </head> <body> ... <div id="newsbox">...</div> ... <div id="eventbox">...</div> ... <div id="rightcolumn">...</div> ... <div id="doormat">...</div> ... </body> </html> Theme — HTML Thursday, October 3, 13
  • <html> <head> <title>Styled Page</title> <style>...</style> <script>...</script> </head> <body> ... <div id="newsbox">...</div> ... <div id="eventbox">...</div> ... <div id="rightcolumn">...</div> ... <div id="doormat">...</div> ... </body> </html> Theme — HTML Thursday, October 3, 13
  • <html> <head> <title>Content Page</title> <style>...</style> <script>...</script> </head> <body> ... <dl class="portlet portletNews"> <dt class="portletHeader"> ... </dt> <dd class="portletItem odd"> ... </dd> ... </dl> ... </body> </html> Content — HTML Thursday, October 3, 13
  • <html> <head> <title>Content Page</title> <style>...</style> <script>...</script> </head> <body> ... <dl class="portlet portletNews"> <dt class="portletHeader"> ... </dt> <dd class="portletItem odd"> ... </dd> ... </dl> ... </body> </html> Content — HTML Thursday, October 3, 13
  • <?xml version="1.0" encoding="UTF-8"?> <rules xmlns="http://namespaces.plone.org/diazo" xmlns:css="http://namespaces.plone.org/diazo/css" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <rules css:if-content="#visual-portal-wrapper"> <theme href="index.html" /> ... <replace css:theme-children="#newsbox" css:content="dl.portletNews" /> ... </rules> </rules> Rules — XML Thursday, October 3, 13
  • <?xml version="1.0" encoding="UTF-8"?> <rules xmlns="http://namespaces.plone.org/diazo" xmlns:css="http://namespaces.plone.org/diazo/css" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <rules css:if-content="#visual-portal-wrapper"> <theme href="index.html" /> ... <replace css:theme-children="#newsbox" css:content="dl.portletNews" /> ... </rules> </rules> Rules — XML Thursday, October 3, 13
  • How it works: A Naïve Mental Model Thursday, October 3, 13
  • Theme1 Theme Content Diazo Rule #1 Thursday, October 3, 13
  • Theme1 Content Thursday, October 3, 13
  • Theme1 Content Diazo Rule #2 Theme2 Thursday, October 3, 13
  • Content Theme3 Diazo Rule #3 Theme2 Thursday, October 3, 13
  • Content drops / replaces Things get messy. Thursday, October 3, 13
  • Theme Content Diazo Content Rule Thursday, October 3, 13
  • Cooked Content Theme Content Diazo Content Rule Thursday, October 3, 13
  • Cooked ContentTheme Content Remaining Diazo Rules Thursday, October 3, 13
  • Cooked ContentTheme Content Remaining Diazo Rules ? Thursday, October 3, 13
  • How it works: A Better Mental Model Thursday, October 3, 13
  • DIAZO Theme Rules XSL Template P A R T O N E Thursday, October 3, 13
  • XSL Template XSLT Content Output Page P A R T T W O Thursday, October 3, 13
  • XSL Template XSLT Content Output Page Transform Engine: plone.app.theming Apache Nginx Varnish WSGI ... P A R T T W O Thursday, October 3, 13
  • DIAZO Theme Rules XSL Template P A R T O N E Thursday, October 3, 13
  • DIAZO Theme Rules XSL Template P A R T O N E More like CSS than Python Thursday, October 3, 13
  • P A R T T W O XSL Template XSLT Content Output Page Thursday, October 3, 13
  • P A R T T W O XSL Template XSLT Content Output Page Recursive Node Processor Thursday, October 3, 13
  • P A R T T W O XSL Template XSLT Content Output Page Recursive Node Processor Processes stuff; Processes what it processed. Thursday, October 3, 13
  • <body> ... ... </body> <replace css:theme=”#theme1” css:content=”#content1” /> <div id=”theme1”> Theme1 Stuff </div> R U L E T H E M E Thursday, October 3, 13
  • <body> ... ... </body> <replace css:theme=”#theme1” css:content=”#content1” /> XSL: pull in #content1 R U L E X S L Thursday, October 3, 13
  • <body> ... ... </body> <replace css:theme=”#theme1” css:content=”#content1” /> <div id=”content1”> Content1 Stuff </div> R U L E O U T P U T Thursday, October 3, 13
  • <body> ... ... </body> <replace css:theme-children=”#theme1” css:content=”#content1” /> <div id=”theme1”> Theme1 Stuff </div> R U L E T H E M E Thursday, October 3, 13
  • <body> ... ... </body> <replace css:theme-children=”#theme1” css:content=”#content1” /> <div id=”theme1”> XSL: pull in #content1 </div> R U L E X S L Thursday, October 3, 13
  • <body> ... ... </body> <replace css:theme-children=”#theme1” css:content=”#content1” /> <div id=”theme1”> <div id=”content1”>…</div> </div> R U L E O U T P U T Thursday, October 3, 13
  • <replace css:theme=”#theme1” css:content=”#content1” css:if-content=”#something” /> R U L E X S L Thursday, October 3, 13
  • XSL:if content has #something <replace css:theme=”#theme1” css:content=”#content1” css:if-content=”#something” /> R U L E X S L Thursday, October 3, 13
  • XSL:if content has #something XSL: pull in #content1 <replace css:theme=”#theme1” css:content=”#content1” css:if-content=”#something” /> R U L E X S L Thursday, October 3, 13
  • XSL:if content has #something XSL: pull in #content1 XSL:else <replace css:theme=”#theme1” css:content=”#content1” css:if-content=”#something” /> R U L E X S L Thursday, October 3, 13
  • XSL:if content has #something XSL: pull in #content1 XSL:else <div id=”theme1”> Theme1 Stuff </div> <replace css:theme=”#theme1” css:content=”#content1” css:if-content=”#something” /> R U L E X S L Thursday, October 3, 13
  • <before theme=”#theme1” … /> <before theme-children”#theme1” …/> <after theme-children=”theme1” … /> <after theme=”theme1” … /> R U L E S X S L Thursday, October 3, 13
  • XSL: pull in #cbefore <before theme=”#theme1” … /> <before theme-children”#theme1” …/> <after theme-children=”theme1” … /> <after theme=”theme1” … /> R U L E S X S L Thursday, October 3, 13
  • XSL: pull in #cbefore <div id=”theme1”> <before theme=”#theme1” … /> <before theme-children”#theme1” …/> <after theme-children=”theme1” … /> <after theme=”theme1” … /> R U L E S X S L Thursday, October 3, 13
  • XSL: pull in #cbefore <div id=”theme1”> XSL: pull in #cbefore-children <before theme=”#theme1” … /> <before theme-children”#theme1” …/> <after theme-children=”theme1” … /> <after theme=”theme1” … /> R U L E S X S L Thursday, October 3, 13
  • XSL: pull in #cbefore <div id=”theme1”> XSL: pull in #cbefore-children Theme 1 Stuff <before theme=”#theme1” … /> <before theme-children”#theme1” …/> <after theme-children=”theme1” … /> <after theme=”theme1” … /> R U L E S X S L Thursday, October 3, 13
  • XSL: pull in #cbefore <div id=”theme1”> XSL: pull in #cbefore-children Theme 1 Stuff XSL: pull in #cafter-children <before theme=”#theme1” … /> <before theme-children”#theme1” …/> <after theme-children=”theme1” … /> <after theme=”theme1” … /> R U L E S X S L Thursday, October 3, 13
  • XSL: pull in #cbefore <div id=”theme1”> XSL: pull in #cbefore-children Theme 1 Stuff XSL: pull in #cafter-children </div> <before theme=”#theme1” … /> <before theme-children”#theme1” …/> <after theme-children=”theme1” … /> <after theme=”theme1” … /> R U L E S X S L Thursday, October 3, 13
  • XSL: pull in #cbefore <div id=”theme1”> XSL: pull in #cbefore-children Theme 1 Stuff XSL: pull in #cafter-children </div> XSL: pull in #cafter <before theme=”#theme1” … /> <before theme-children”#theme1” …/> <after theme-children=”theme1” … /> <after theme=”theme1” … /> R U L E S X S L Thursday, October 3, 13
  • <after theme-children=”theme1” … /> <before theme-children”#theme1” …/> <after theme=”theme1” … /> <before theme=”#theme1” … /> XSL: pull in #cbefore <div id=”theme1”> XSL: pull in #cbefore-children Theme 1 Stuff XSL: pull in #cafter-children </div> XSL: pull in #cafter R U L E S X S L Thursday, October 3, 13
  • Content drops / replaces Thursday, October 3, 13
  • Content drops / replaces Remember Part 2? Thursday, October 3, 13
  • <replace css:theme=”#theme1” css:content=”#content1” /> R U L E X S L Thursday, October 3, 13
  • XSL: pull in #content1 <replace css:theme=”#theme1” css:content=”#content1” /> R U L E X S L Thursday, October 3, 13
  • XSL: pull in #content1 XSL: process what just got pulled in <replace css:theme=”#theme1” css:content=”#content1” /> R U L E X S L Thursday, October 3, 13
  • XSL: pull in #content1 XSL: process what just got pulled in “content” drops / replaces <replace css:theme=”#theme1” css:content=”#content1” /> R U L E X S L Thursday, October 3, 13
  • <before css:theme=”#theme1” … /> <after css:theme=”#theme1” … /> <drop css:content=”#nastytag” /> XSL: pull in #cbefore <div id=”theme1”> Theme 1 Stuff </div> XSL: pull in #cafter R U L E S X S L Thursday, October 3, 13
  • <before css:theme=”#theme1” … /> <after css:theme=”#theme1” … /> <drop css:content=”#nastytag” /> XSL: pull in #cbefore <div id=”theme1”> Theme 1 Stuff </div> XSL: pull in #cafter R U L E S X S L — do content drop — do content drop Thursday, October 3, 13
  • <drop css:content=”#nastytag” /> <before css:theme=”#theme1” … /> <after css:theme=”#theme1” … /> XSL: pull in #cbefore <div id=”theme1”> Theme 1 Stuff </div> XSL: pull in #cafter R U L E S X S L — do content drop — do content drop Thursday, October 3, 13
  • Let’s apply that knowledge Thursday, October 3, 13
  • Let’s apply that knowledge Moving Content Thursday, October 3, 13
  • T H E M E <body> ... <div id=”#newsslot” /> ... <div id=”#rightcol” /> ... </body> <replace css:theme-children=”#newsslot” css:content=”.portletNews” /> <drop css:content=”.portletNews” /> <replace css:theme-children=”#rightcol” css:content-children=”#col3”/> R U L E Thursday, October 3, 13
  • T H E M E <body> ... <div id=”#newsslot” /> ... <div id=”#rightcol” /> ... </body> <replace css:theme-children=”#newsslot” css:content=”.portletNews” /> <drop css:content=”.portletNews” /> <replace css:theme-children=”#rightcol” css:content-children=”#col3”/> R U L E mode=”raw” /> Thursday, October 3, 13
  • mode = “raw”? Thursday, October 3, 13
  • mode = “raw”? Is there a “cooked”? Thursday, October 3, 13
  • X S L XSL: pull in #col3 XSL: do “content” drops and replaces on what was inserted <replace css:theme-children=”#rightcol” css:content-children=”#col3” /> R U L E Thursday, October 3, 13
  • X S L XSL: pull in #col3 XSL: do “content” drops and replaces on what was inserted <replace css:theme-children=”#rightcol” css:content-children=”#col3” /> R U L E mode=”raw” /> do routine cleanup, but no content drops / replaces Thursday, October 3, 13
  • Lessons Learned Thursday, October 3, 13
  • Rule order doesn’t matter. Thursday, October 3, 13
  • Rule order doesn’t matter. mostly V Thursday, October 3, 13
  • Rule order doesn’t matter. Order rules for clarity. mostly V Thursday, October 3, 13
  • Solve conflicts with specificity. Thursday, October 3, 13
  • Solve conflicts with specificity. Just like CSS. Thursday, October 3, 13
  • Where Diazo breaks down: Thursday, October 3, 13
  • Where Diazo breaks down: Manipulating content beyond drop/replace Thursday, October 3, 13
  • Where Diazo breaks down: Manipulating content beyond drop/replace Manipulating attributes/text Thursday, October 3, 13
  • Where Diazo breaks down: Manipulating content beyond drop/replace Manipulating attributes/text Require XSLT Thursday, October 3, 13
  • Where Diazo breaks down: Manipulating content beyond drop/replace Manipulating attributes/text Require XSLT And we’re not doing that today! Thursday, October 3, 13
  • Exploring Diazo Thursday, October 3, 13
  • parts = ... diazotools ... [diazotools] recipe = zc.recipe.egg eggs = diazo Thursday, October 3, 13
  • $ bin/diazocompiler rules.xml -o theme.xsl $ bin/diazorun -xsl theme.xsl content.html diazocompiler: diazorun: Thursday, October 3, 13
  • Thursday, October 3, 13