Post on 24-Jun-2015
description
What is Diazo?
Douwe van der Meij
Goldmund, Wyldebeast & Wunderliebe
vandermeij@gw20e.com@douwevandermeij
Introduction
● With Diazo you can theme websites○ Your own website○ Someone else's website○ Any website
■ On any technology
Diazo
How?
● Website HTML○ Content provider
● Design HTML○ Theme provider
● Together:○ Themed website
Diazo
● All about merging (X)HTML○ In a convenient way
Diazo
● Legacy websites● Legacy HTML templates● New era of front-end "frameworks"
○ Media queries■ Twitter Bootstrap■ Skeleton
● Improved MVC● Responsibility● Flexibility
Why (this presentation)?
Background
Diazo concept
http://docs.diazo.org/en/latest/index.html
● Ever heard of MDE?
Model Driven Engineering
● Meta Object Facility (MOF)○ Proposed by OMG
● MOF metamodeling stack
Metamodeling
Metametamodel level
Metamodel level
Model level
Real world
M3:
M2:
M1:
M0:
Object Management Group (OMG). (2002, april 3). Meta Object Facility (MOF) Specification.
● Mappings
Metamodeling
XML
XML schema
XML document
Real world
M3:
M2:
M1:
M0:
EBNF
Programming language
Code
Real world
M3:
M2:
M1:
M0:
Model transformations
Kurtev, I. (2008). State of the Art of QVT: A Model Transformation Language Standard. In Applications of Graph Transformations with Industrial Relevance (Vol. 5088/2008, pp. 377‐393). Springer Berlin / Heidelberg.
input output
Transformation language
Transformation specification
Transformation engine
Metamodel A Metamodel B
written in
usesuses
executed by
Model A Model B
instance ofinstance of
source target
Model transformations
Transformation language
Transformation specification
Transformation engine
Metamodel A Metamodel B
Model A Model B
M2:
M1:
M0:
Model transformations
Transformation language
Transformation specification
Transformation engine
Metamodel A Metamodel B
Model A Model B
Metametamodel
conforms to
M3:
M2:
M1:
M0:
conforms to
conforms to
Model transformations
XSL
Transformation specification
Transformation engine
HTML theme A HTML theme B
Website A Website B
XMLM3:
M2:
M1:
M0:
● Traditional XSLT
Model transformations
XSL
Transformation specification
Transformation engine
HTML theme A HTML theme B
Website A Website B
XMLM3:
M2:
M1:
M0:
HTML theme A
Website A
Diazo according to MDE
Diazo syntax
Diazo rules
Diazo
HTML theme BHTML theme B
Theme site BWebsite
XMLM3:
M2:
M1:
M0:
HTML theme A
Content site A
● Two HTML sites○ A content system○ A theme
● One set of rules
● Regardless of pre-processors○ Underlying dynamic systems
Diazo explained
Why should we use it?
Case 1
Designers vs. developers
● At some point a designer delivers a design○ Drawing (PSD)○ Sliced / not sliced○ HTML + CSS + JS
Designers
● Develop features● Minimal / functional design
● Integrate the design into the application○ Convert HTML pages into templates (Django)○ Alter existing CSS (Plone)
Developers
● The designer delivers HTML + CSS
● Problem: Clearly in CSS○ Designer is responsible○ A developer will fix the problem
● Result:○ Developer is responsible
Responsibility
Model View Controller
TemplatesView
Controller
Model
Code representation
Model View Controller
View
Controller
Model
View
View
Diazo
application design
● An extra level of abstraction
● Diazo offers an interface between designers and developers
Diazo stack
Case 2
● The existing website works perfectly
● Possible problems when re-styling (the old way):○ Risk in losing functionality○ Website is written in another language○ No templates
Re-style an existing website
● Diazo only needs the HTML output of the existing website
● The existing website remains available● Easy re-style again with Diazo● Multiple designs for a single website, at the
same time
Re-style an existing website
Tooling
● Download the example themes○ https://intranet.gw20e.com/diazo-themes○ https://intranet.gw20e.com/new-diazo-theme
Plone themes
Plone
Plone.app.theming
Plone.app.theming
Plone.app.theming
Plone.app.theming
Plone.app.theming
Plone.app.theming
Plone.app.theming
Diazo replace rule
<replacetheme="//div[@id='content']/div[1]/h2/a"css:content="h1#parent-fieldname-title"/>
Is it really that simple?
Unfortunately not...
● Be careful with your selectors
Advanced Diazo
<replacetheme="//div[@id='content']/div[1]/h2/a"css:content="h1#parent-fieldname-title"/>
● Fine tune your rules
Advanced Diazo
<replacetheme-children="//div[@id='content']/div[1]/h2" content="//h1[@id='parent-fieldname-title']/text()"/>
<replacetheme="//div[@id='content']/div[1]/h2/a"css:content="h1#parent-fieldname-title"/>
● Fine tune your rules
Advanced Diazo
<replacetheme-children="//div[@id='content']/div[1]/h2" content="//h1[@id='parent-fieldname-title']/text()"/>
<replacetheme="//div[@id='content']/div[1]/h2/a"css:content="h1#parent-fieldname-title"/>
Advanced Diazo
Changing the navigation tabs
Advanced Diazo
<ul><li class="current_page_item"><a href="#">Homepage</a></li><li class=""><a href="#">Services</a></li><li class=""><a href="#">Portfolio</a></li><li class=""><a href="#">About</a></li><li class=""><a href="#">Contact</a></li>
</ul>
Advanced Diazo
<ul><li class="selected"><a href="#">Home</a></li><li class="plain"><a href="#">News</a></li><li class="plain"><a href="#">Events</a></li><li class="plain"><a href="#">Users</a></li>
</ul>
● The easy way
Advanced Diazo
<replacecss:theme="div#menu ul"css:content="ul#portal-globalnav"/>
● Add extra CSS (file)○ Class "selected" → "current_page_item"
● The advanced way○ http://pastebin.com/4HaG3KRx
Advanced Diazo
<replace css:theme-children="div#menu ul"><xsl:for-each select="//ul[@id='portal-globalnav']/li">
<xsl:element name="li"><xsl:if test="./@class = 'selected'">
<xsl:attribute name="class">current_page_item
</xsl:attribute></xsl:if><xsl:copy-of select="./a" />
</xsl:element></xsl:for-each>
</replace> ● No extra CSS needed
Conclusion
● XSLT wrapper○ XSLT reborn
● Seamless integration○ Proxy all your websites
● Higher level of abstraction● Fallback to regular XSLT
○ If all else fails● State-of-the-art technology
○ Lack of tooling○ Widely adopted in the Plone community
Conclusion
Future work
● Feature requests / bugs○ Filter out comments in XSL○ Easier replace rules for dynamic elements while
preserving theme attributes○ More visual way to create rules
■ Also apart from Plone.app.theming○ <xsl:template> doesn't work in embedded
<rules>
● Sprints● Fork it
○ https://github.com/plone/diazo
Future work
Additional workshop content
Creating a new Diazo theme
● Go to:○ http://www.freecsstemplates.org/
● Pick one!
Create a new Diazo theme
● Unzip the file● Open the folder● Create the following files:
○ manifest.cfg○ rules.xml○ preview.png (optional)
Create a new Diazo theme
● Zip the folder
Create a new Diazo theme
Plone.app.theming
● Download the new example theme○ https://intranet.gw20e.com/new-diazo-theme
Plone themes
Mark's blog
● Mark van Lent wrote a blog article about the workshop○ http://www.vlent.nl/weblog/2012/12/14/workshop-
theming-with-diazo/
Blog article