How Diazo Works
Getting the mental model right
Steve McMahon
steve@dcn.org
Plone Conference 2013, Brasília
Thursday, Octob...
This talk has been rated
T Technical
Pervasive references to HTML and XML.
Disturbing Thematic Elements
Thursday, October ...
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">...<...
<html>
<head>
<title>Styled Page</title>
<style>...</style>
<script>...</script>
</head>
<body>
...
<div id="newsbox">...<...
<html>
<head>
<title>Styled Page</title>
<style>...</style>
<script>...</script>
</head>
<body>
...
<div id="newsbox">...<...
<html>
<head>
<title>Styled Page</title>
<style>...</style>
<script>...</script>
</head>
<body>
...
<div id="newsbox">...<...
<html>
<head>
<title>Styled Page</title>
<style>...</style>
<script>...</script>
</head>
<body>
...
<div id="newsbox">...<...
<html>
<head>
<title>Content Page</title>
<style>...</style>
<script>...</script>
</head>
<body>
...
<dl class="portlet po...
<html>
<head>
<title>Content Page</title>
<style>...</style>
<script>...</script>
</head>
<body>
...
<dl class="portlet po...
<?xml version="1.0" encoding="UTF-8"?>
<rules
xmlns="http://namespaces.plone.org/diazo"
xmlns:css="http://namespaces.plone...
<?xml version="1.0" encoding="UTF-8"?>
<rules
xmlns="http://namespaces.plone.org/diazo"
xmlns:css="http://namespaces.plone...
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
Thur...
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....
<body>
...
...
</body>
<replace
css:theme=”#theme1”
css:content=”#content1”
/>
<div id=”theme1”>
Theme1 Stuff
</div>
R
U
L...
<body>
...
...
</body>
<replace
css:theme=”#theme1”
css:content=”#content1”
/>
XSL: pull in #content1
R
U
L
E
X
S
L
Thursd...
<body>
...
...
</body>
<replace
css:theme=”#theme1”
css:content=”#content1”
/>
<div id=”content1”>
Content1 Stuff
</div>
R...
<body>
...
...
</body>
<replace
css:theme-children=”#theme1”
css:content=”#content1”
/>
<div id=”theme1”>
Theme1 Stuff
</d...
<body>
...
...
</body>
<replace
css:theme-children=”#theme1”
css:content=”#content1”
/>
<div id=”theme1”>
XSL: pull in #co...
<body>
...
...
</body>
<replace
css:theme-children=”#theme1”
css:content=”#content1”
/>
<div id=”theme1”>
<div id=”content...
<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
...
XSL:if content has #something
XSL: pull in #content1
<replace
css:theme=”#theme1”
css:content=”#content1”
css:if-content=”...
XSL:if content has #something
XSL: pull in #content1
XSL:else
<replace
css:theme=”#theme1”
css:content=”#content1”
css:if-...
XSL:if content has #something
XSL: pull in #content1
XSL:else
<div id=”theme1”>
Theme1 Stuff
</div>
<replace
css:theme=”#t...
<before theme=”#theme1” … />
<before theme-children”#theme1” …/>
<after theme-children=”theme1” … />
<after theme=”theme1”...
XSL: pull in #cbefore
<before theme=”#theme1” … />
<before theme-children”#theme1” …/>
<after theme-children=”theme1” … />...
XSL: pull in #cbefore
<div id=”theme1”>
<before theme=”#theme1” … />
<before theme-children”#theme1” …/>
<after theme-chil...
XSL: pull in #cbefore
<div id=”theme1”>
XSL: pull in #cbefore-children
<before theme=”#theme1” … />
<before theme-children...
XSL: pull in #cbefore
<div id=”theme1”>
XSL: pull in #cbefore-children
Theme 1 Stuff
<before theme=”#theme1” … />
<before ...
XSL: pull in #cbefore
<div id=”theme1”>
XSL: pull in #cbefore-children
Theme 1 Stuff
XSL: pull in #cafter-children
<before...
XSL: pull in #cbefore
<div id=”theme1”>
XSL: pull in #cbefore-children
Theme 1 Stuff
XSL: pull in #cafter-children
</div>
...
XSL: pull in #cbefore
<div id=”theme1”>
XSL: pull in #cbefore-children
Theme 1 Stuff
XSL: pull in #cafter-children
</div>
...
<after theme-children=”theme1” … />
<before theme-children”#theme1” …/>
<after theme=”theme1” … />
<before theme=”#theme1”...
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
...
XSL: pull in #content1
XSL: process what just got
pulled in
“content” drops / replaces
<replace
css:theme=”#theme1”
css:co...
<before css:theme=”#theme1” … />
<after css:theme=”#theme1” … />
<drop css:content=”#nastytag” />
XSL: pull in #cbefore
<d...
<before css:theme=”#theme1” … />
<after css:theme=”#theme1” … />
<drop css:content=”#nastytag” />
XSL: pull in #cbefore
<d...
<drop css:content=”#nastytag” />
<before css:theme=”#theme1” … />
<after css:theme=”#theme1” … />
XSL: pull in #cbefore
<d...
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”...
T
H
E
M
E
<body>
...
<div id=”#newsslot” />
...
<div id=”#rightcol” />
...
</body>
<replace
css:theme-children=”#newsslot”...
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”...
X
S
L
XSL: pull in #col3
XSL: do “content” drops and
replaces on what was
inserted
<replace
css:theme-children=”#rightcol”...
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, Octo...
Where Diazo
breaks down:
Manipulating content beyond drop/replace
Manipulating attributes/text
Require XSLT
And we’re not
...
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,...
Thursday, October 3, 13
Upcoming SlideShare
Loading in …5
×

How diazo works

806
-1

Published on

Getting the mental model right.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
806
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • 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

    1. 1. How Diazo Works Getting the mental model right Steve McMahon steve@dcn.org Plone Conference 2013, Brasília Thursday, October 3, 13
    2. 2. This talk has been rated T Technical Pervasive references to HTML and XML. Disturbing Thematic Elements Thursday, October 3, 13
    3. 3. XSL Thursday, October 3, 13
    4. 4. XSL Thursday, October 3, 13
    5. 5. HTML XML CSS Thursday, October 3, 13
    6. 6. Quick Review Thursday, October 3, 13
    7. 7. Theme Rules Content Thursday, October 3, 13
    8. 8. DIAZO Theme Rules Content Thursday, October 3, 13
    9. 9. DIAZO Theme Rules Content Themed Content Thursday, October 3, 13
    10. 10. ContentContentContent DIAZO Theme Rules Content Themed Content Thursday, October 3, 13
    11. 11. ContentContentContent DIAZO RulesRulesRulesTheme Rules Content Themed Content Thursday, October 3, 13
    12. 12. <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
    13. 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
    14. 14. <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
    15. 15. <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
    16. 16. <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
    17. 17. <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
    18. 18. <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
    19. 19. <?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
    20. 20. <?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
    21. 21. How it works: A Naïve Mental Model Thursday, October 3, 13
    22. 22. Theme1 Theme Content Diazo Rule #1 Thursday, October 3, 13
    23. 23. Theme1 Content Thursday, October 3, 13
    24. 24. Theme1 Content Diazo Rule #2 Theme2 Thursday, October 3, 13
    25. 25. Content Theme3 Diazo Rule #3 Theme2 Thursday, October 3, 13
    26. 26. Content drops / replaces Things get messy. Thursday, October 3, 13
    27. 27. Theme Content Diazo Content Rule Thursday, October 3, 13
    28. 28. Cooked Content Theme Content Diazo Content Rule Thursday, October 3, 13
    29. 29. Cooked ContentTheme Content Remaining Diazo Rules Thursday, October 3, 13
    30. 30. Cooked ContentTheme Content Remaining Diazo Rules ? Thursday, October 3, 13
    31. 31. How it works: A Better Mental Model Thursday, October 3, 13
    32. 32. DIAZO Theme Rules XSL Template P A R T O N E Thursday, October 3, 13
    33. 33. XSL Template XSLT Content Output Page P A R T T W O Thursday, October 3, 13
    34. 34. 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
    35. 35. DIAZO Theme Rules XSL Template P A R T O N E Thursday, October 3, 13
    36. 36. DIAZO Theme Rules XSL Template P A R T O N E More like CSS than Python Thursday, October 3, 13
    37. 37. P A R T T W O XSL Template XSLT Content Output Page Thursday, October 3, 13
    38. 38. P A R T T W O XSL Template XSLT Content Output Page Recursive Node Processor Thursday, October 3, 13
    39. 39. 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
    40. 40. <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
    41. 41. <body> ... ... </body> <replace css:theme=”#theme1” css:content=”#content1” /> XSL: pull in #content1 R U L E X S L Thursday, October 3, 13
    42. 42. <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
    43. 43. <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
    44. 44. <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
    45. 45. <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
    46. 46. <replace css:theme=”#theme1” css:content=”#content1” css:if-content=”#something” /> R U L E X S L Thursday, October 3, 13
    47. 47. 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
    48. 48. 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
    49. 49. 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
    50. 50. 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
    51. 51. <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
    52. 52. 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
    53. 53. 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
    54. 54. 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
    55. 55. 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
    56. 56. 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
    57. 57. 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
    58. 58. 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
    59. 59. <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
    60. 60. Content drops / replaces Thursday, October 3, 13
    61. 61. Content drops / replaces Remember Part 2? Thursday, October 3, 13
    62. 62. <replace css:theme=”#theme1” css:content=”#content1” /> R U L E X S L Thursday, October 3, 13
    63. 63. XSL: pull in #content1 <replace css:theme=”#theme1” css:content=”#content1” /> R U L E X S L Thursday, October 3, 13
    64. 64. 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
    65. 65. 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
    66. 66. <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
    67. 67. <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
    68. 68. <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
    69. 69. Let’s apply that knowledge Thursday, October 3, 13
    70. 70. Let’s apply that knowledge Moving Content Thursday, October 3, 13
    71. 71. 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
    72. 72. 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
    73. 73. mode = “raw”? Thursday, October 3, 13
    74. 74. mode = “raw”? Is there a “cooked”? Thursday, October 3, 13
    75. 75. 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
    76. 76. 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
    77. 77. Lessons Learned Thursday, October 3, 13
    78. 78. Rule order doesn’t matter. Thursday, October 3, 13
    79. 79. Rule order doesn’t matter. mostly V Thursday, October 3, 13
    80. 80. Rule order doesn’t matter. Order rules for clarity. mostly V Thursday, October 3, 13
    81. 81. Solve conflicts with specificity. Thursday, October 3, 13
    82. 82. Solve conflicts with specificity. Just like CSS. Thursday, October 3, 13
    83. 83. Where Diazo breaks down: Thursday, October 3, 13
    84. 84. Where Diazo breaks down: Manipulating content beyond drop/replace Thursday, October 3, 13
    85. 85. Where Diazo breaks down: Manipulating content beyond drop/replace Manipulating attributes/text Thursday, October 3, 13
    86. 86. Where Diazo breaks down: Manipulating content beyond drop/replace Manipulating attributes/text Require XSLT Thursday, October 3, 13
    87. 87. 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
    88. 88. Exploring Diazo Thursday, October 3, 13
    89. 89. parts = ... diazotools ... [diazotools] recipe = zc.recipe.egg eggs = diazo Thursday, October 3, 13
    90. 90. $ bin/diazocompiler rules.xml -o theme.xsl $ bin/diazorun -xsl theme.xsl content.html diazocompiler: diazorun: Thursday, October 3, 13
    91. 91. Thursday, October 3, 13
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×