View
581
Download
4
Category
Preview:
DESCRIPTION
Getting the mental model right.
Citation preview
How Diazo WorksGetting the mental model right
Steve McMahonsteve@dcn.org
Plone Conference 2013, Brasília
Thursday, October 3, 13
This talk has been rated
T TechnicalPervasive references to HTML and XML.
Disturbing Thematic Elements
Thursday, October 3, 13
XSLThursday, October 3, 13
XSLThursday, October 3, 13
HTMLXMLCSS
Thursday, October 3, 13
QuickReview
Thursday, October 3, 13
Theme Rules Content
Thursday, October 3, 13
DIAZO
Theme Rules Content
Thursday, October 3, 13
DIAZO
Theme Rules Content
ThemedContent
Thursday, October 3, 13
ContentContentContent
DIAZO
Theme Rules Content
ThemedContent
Thursday, October 3, 13
ContentContentContent
DIAZO
RulesRulesRulesTheme Rules Content
ThemedContent
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
DiazoRule #1
Thursday, October 3, 13
Theme1 Content
Thursday, October 3, 13
Theme1 Content
DiazoRule #2
Theme2
Thursday, October 3, 13
Content
Theme3
DiazoRule #3
Theme2
Thursday, October 3, 13
Contentdrops / replaces
Things get messy.
Thursday, October 3, 13
Theme Content
DiazoContent
Rule
Thursday, October 3, 13
CookedContent
Theme Content
DiazoContent
Rule
Thursday, October 3, 13
CookedContentTheme Content
RemainingDiazoRules
Thursday, October 3, 13
CookedContentTheme Content
RemainingDiazoRules
?Thursday, October 3, 13
How it works:
A Better Mental Model
Thursday, October 3, 13
DIAZO
Theme Rules
XSLTemplate
PART
ONE
Thursday, October 3, 13
XSLTemplate
XSLT
Content
OutputPage
PART
TWO
Thursday, October 3, 13
XSLTemplate
XSLT
Content
OutputPage
Transform Engine:plone.app.themingApacheNginxVarnishWSGI ...
PART
TWO
Thursday, October 3, 13
DIAZO
Theme Rules
XSLTemplate
PART
ONE
Thursday, October 3, 13
DIAZO
Theme Rules
XSLTemplate
PART
ONE
More like CSSthan Python
Thursday, October 3, 13
PART
TWO
XSLTemplate
XSLT
Content
OutputPage
Thursday, October 3, 13
PART
TWO
XSLTemplate
XSLT
Content
OutputPage
RecursiveNode Processor
Thursday, October 3, 13
PART
TWO
XSLTemplate
XSLT
Content
OutputPage
RecursiveNode Processor
Processes stuff;Processes whatit processed.
Thursday, October 3, 13
<body> ...
...</body>
<replace css:theme=”#theme1” css:content=”#content1”/>
<div id=”theme1”> Theme1 Stuff</div>
RULE
THEME
Thursday, October 3, 13
<body> ...
...</body>
<replace css:theme=”#theme1” css:content=”#content1”/>
XSL: pull in #content1
RULE
XSL
Thursday, October 3, 13
<body> ...
...</body>
<replace css:theme=”#theme1” css:content=”#content1”/>
<div id=”content1”> Content1 Stuff</div>
RULE
OUTPUT
Thursday, October 3, 13
<body> ...
...</body>
<replace css:theme-children=”#theme1” css:content=”#content1”/>
<div id=”theme1”> Theme1 Stuff</div>
RULE
THEME
Thursday, October 3, 13
<body> ...
...</body>
<replace css:theme-children=”#theme1” css:content=”#content1”/>
<div id=”theme1”> XSL: pull in #content1 </div>
RULE
XSL
Thursday, October 3, 13
<body> ...
...</body>
<replace css:theme-children=”#theme1” css:content=”#content1”/>
<div id=”theme1”> <div id=”content1”>…</div></div>
RULE
OUTPUT
Thursday, October 3, 13
<replace css:theme=”#theme1” css:content=”#content1” css:if-content=”#something”/>
RULE
XSL
Thursday, October 3, 13
XSL:if content has #something
<replace css:theme=”#theme1” css:content=”#content1” css:if-content=”#something”/>
RULE
XSL
Thursday, October 3, 13
XSL:if content has #something XSL: pull in #content1
<replace css:theme=”#theme1” css:content=”#content1” css:if-content=”#something”/>
RULE
XSL
Thursday, October 3, 13
XSL:if content has #something XSL: pull in #content1XSL:else
<replace css:theme=”#theme1” css:content=”#content1” css:if-content=”#something”/>
RULE
XSL
Thursday, October 3, 13
XSL:if content has #something XSL: pull in #content1XSL:else <div id=”theme1”> Theme1 Stuff </div>
<replace css:theme=”#theme1” css:content=”#content1” css:if-content=”#something”/>
RULE
XSL
Thursday, October 3, 13
<before theme=”#theme1” … />
<before theme-children”#theme1” …/>
<after theme-children=”theme1” … />
<after theme=”theme1” … />
RULES
XSL
Thursday, October 3, 13
XSL: pull in #cbefore
<before theme=”#theme1” … />
<before theme-children”#theme1” …/>
<after theme-children=”theme1” … />
<after theme=”theme1” … />
RULES
XSL
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” … />
RULES
XSL
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” … />
RULES
XSL
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” … />
RULES
XSL
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” … />
RULES
XSL
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” … />
RULES
XSL
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” … />
RULES
XSL
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
RULES
XSL
Thursday, October 3, 13
Contentdrops / replaces
Thursday, October 3, 13
Contentdrops / replaces
Remember Part 2?
Thursday, October 3, 13
<replace css:theme=”#theme1” css:content=”#content1”/>
RULE
XSL
Thursday, October 3, 13
XSL: pull in #content1
<replace css:theme=”#theme1” css:content=”#content1”/>
RULE
XSL
Thursday, October 3, 13
XSL: pull in #content1XSL: process what just got pulled in
<replace css:theme=”#theme1” css:content=”#content1”/>
RULE
XSL
Thursday, October 3, 13
XSL: pull in #content1XSL: process what just got pulled in “content” drops / replaces
<replace css:theme=”#theme1” css:content=”#content1”/>
RULE
XSL
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
RULES
XSL
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
RULES
XSL
— 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
RULES
XSL
— do content drop
— do content drop
Thursday, October 3, 13
Let’s applythat knowledge
Thursday, October 3, 13
Let’s applythat knowledge
Moving Content
Thursday, October 3, 13
THEME
<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”/>
RULE
Thursday, October 3, 13
THEME
<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”/>
RULE
mode=”raw” />
Thursday, October 3, 13
mode = “raw”?
Thursday, October 3, 13
mode = “raw”?
Is there a “cooked”?
Thursday, October 3, 13
XSL
XSL: pull in #col3XSL: do “content” drops and replaces on what was inserted
<replace css:theme-children=”#rightcol” css:content-children=”#col3” />
RULE
Thursday, October 3, 13
XSL
XSL: pull in #col3XSL: do “content” drops and replaces on what was inserted
<replace css:theme-children=”#rightcol” css:content-children=”#col3” />
RULE mode=”raw” />
do routine cleanup, but no content drops /replaces
Thursday, October 3, 13
LessonsLearned
Thursday, October 3, 13
Rule orderdoesn’t matter.
Thursday, October 3, 13
Rule orderdoesn’t matter.
mostlyV
Thursday, October 3, 13
Rule orderdoesn’t matter.
Order rulesfor clarity.
mostlyV
Thursday, October 3, 13
Solve conflictswith specificity.
Thursday, October 3, 13
Solve conflictswith specificity.
Just like CSS.
Thursday, October 3, 13
Where Diazobreaks down:
Thursday, October 3, 13
Where Diazobreaks down:
Manipulating content beyond drop/replace
Thursday, October 3, 13
Where Diazobreaks down:
Manipulating content beyond drop/replace
Manipulating attributes/text
Thursday, October 3, 13
Where Diazobreaks down:
Manipulating content beyond drop/replace
Manipulating attributes/text
Require XSLT
Thursday, October 3, 13
Where Diazobreaks down:
Manipulating content beyond drop/replace
Manipulating attributes/text
Require XSLT
And we’re not
doing that today!
Thursday, October 3, 13
ExploringDiazo
Thursday, October 3, 13
parts = ... diazotools
...
[diazotools]recipe = zc.recipe.eggeggs = 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
Recommended