Workshop slides

1. What is Diazo?
Douwe van der Meij
Goldmund, Wyldebeast & Wunderliebe
vandermeij@gw20e.com
@douwevandermeij

2. Introduction

3. Diazo
● With Diazo you can theme websites
○ Your own website
○ Someone else's website
○ Any website
■ On any technology

4. How?

5. Diazo
● Website HTML
○ Content provider
● Design HTML
○ Theme provider
● Together:
○ Themed website

6. Diazo
● All about merging (X)HTML
○ In a convenient way

7. Why (this presentation)?
● Legacy websites
● Legacy HTML templates
● New era of front-end "frameworks"
○ Media queries
■ Twitter Bootstrap
■ Skeleton
● Improved MVC
● Responsibility
● Flexibility

8. Background

9. Diazo concept
http://docs.diazo.org/en/latest/index.html

10. Model Driven Engineering
● Ever heard of MDE?

11. Metamodeling
● Meta Object Facility (MOF)
○ Proposed by OMG Metametamodel
M3:
● MOF metamodeling stack level
M2: Metamodel level
M1: Model level
M0: Real world
Object Management Group (OMG). (2002, april 3). Meta Object Facility (MOF) Specification.

12. Metamodeling
● Mappings
M3: EBNF M3: XML
M2: Programming M2: XML schema
language
M1: Code M1: XML document
M0: Real world M0: Real world

13. Model transformations
Transformation
language
written in
uses Transformation uses
Metamodel A Metamodel B
specification
instance of executed by instance of
Transformation
Model A Model B
input engine output
source target
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.

14. Model transformations
M2: Transformation
Metamodel A Metamodel B
language
M1: Transformation
Model A specification Model B
M0: Transformation
engine

15. Model transformations
M3: Metametamodel
conforms to conforms to
conforms to
M2: Transformation
Metamodel A Metamodel B
language
M1: Transformation
Model A specification Model B
M0: Transformation
engine

16. Model transformations
M3: XML ● Traditional XSLT
M2: HTML theme A XSL HTML theme B
M1: Transformation
Website A specification Website B
M0: Transformation
engine

17. Model transformations
M3: XML
HTML theme A
M2: HTML theme A XSL HTML theme B
Website A Transformation
M1: Website A Website B
specification
M0: Transformation
engine

18. Diazo according to MDE
M3: XML
HTML theme A
M2: Diazo syntax HTML theme B
HTML theme B
Content site A
M1: Diazo rules Website
Theme site B
M0: Diazo

19. Diazo explained
● Two HTML sites
○ A content system
○ A theme
● One set of rules
● Regardless of pre-processors
○ Underlying dynamic systems

20. Why should we use it?

21. Case 1

22. Designers vs. developers

23. Designers
● At some point a designer delivers a design
○ Drawing (PSD)
○ Sliced / not sliced
○ HTML + CSS + JS

24. Developers
● Develop features
● Minimal / functional design
● Integrate the design into the application
○ Convert HTML pages into templates (Django)
○ Alter existing CSS (Plone)

25. Responsibility
● The designer delivers HTML + CSS
● Problem: Clearly in CSS
○ Designer is responsible
○ A developer will fix the problem
● Result:
○ Developer is responsible

26. Model View Controller
Templates
View
Code
representation
Controller
Model

27. Model View Controller
View
Diazo
application design
View View
Controller
Model

28. Diazo stack
● An extra level of abstraction
● Diazo offers an interface between designers
and developers

29. Case 2

30. Re-style an existing website
● 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

31. 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

32. Tooling

33. Plone themes
● Download the example themes
○ https://intranet.gw20e.com/diazo-themes
○ https://intranet.gw20e.com/new-diazo-theme

34. Plone

35. Plone.app.theming

36. Plone.app.theming

37. Plone.app.theming

38. Plone.app.theming

39. Plone.app.theming

40. Plone.app.theming

41. Plone.app.theming

42. Diazo replace rule
<replace
theme="//div[@id='content']/div[1]/h2/a"
css:content="h1#parent-fieldname-title"
/>

43. Is it really that simple?

44. Unfortunately not...

45. Advanced Diazo
● Be careful with your selectors
<replace
theme="//div[@id='content']/div[1]/h2/a"
css:content="h1#parent-fieldname-title"
/>

46. Advanced Diazo
● Fine tune your rules
<replace
theme="//div[@id='content']/div[1]/h2/a"
css:content="h1#parent-fieldname-title"
/>
<replace
theme-children="//div[@id='content']/div[1]/h2"
content="//h1[@id='parent-fieldname-title']/text()"
/>

47. Advanced Diazo
● Fine tune your rules
<replace
theme="//div[@id='content']/div[1]/h2/a"
css:content="h1#parent-fieldname-title"
/>
<replace
theme-children="//div[@id='content']/div[1]/h2"
content="//h1[@id='parent-fieldname-title']/text()"
/>

48. Advanced Diazo

49. Changing the navigation
tabs

50. 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>

51. 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>

52. Advanced Diazo
● The easy way
<replace
css:theme="div#menu ul"
css:content="ul#portal-globalnav"
/>
● Add extra CSS (file)
○ Class "selected" → "current_page_item"

53. Advanced Diazo
● The advanced way
○ http://pastebin.com/4HaG3KRx
<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

54. Conclusion

55. 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

56. Future work

57. 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

58. Additional workshop
content

59. Creating a new Diazo
theme

60. Create a new Diazo theme
● Go to:
○ http://www.freecsstemplates.org/
● Pick one!

61. Create a new Diazo theme
● Unzip the file
● Open the folder
● Create the following files:
○ manifest.cfg
○ rules.xml
○ preview.png (optional)

62. Create a new Diazo theme
● Zip the folder

63. Plone.app.theming

64. Plone themes
● Download the new example theme
○ https://intranet.gw20e.com/new-diazo-theme

65. Mark's blog

66. Blog article
● Mark van Lent wrote a blog article about the
workshop
○ http://www.vlent.nl/weblog/2012/12/14/workshop-
theming-with-diazo/