SlideShare a Scribd company logo
1 of 66
Download to read offline
What is Diazo?

            Douwe van der Meij

   Goldmund, Wyldebeast & Wunderliebe
vandermeij@gw20e.com
@douwevandermeij
Introduction
Diazo
● With Diazo you can theme websites
  ○ Your own website
  ○ Someone else's website
  ○ Any website
    ■ On any technology
How?
Diazo
● Website HTML
  ○ Content provider
● Design HTML
  ○ Theme provider


● Together:
  ○ Themed website
Diazo
● All about merging (X)HTML
  ○ In a convenient way
Why (this presentation)?
● Legacy websites
● Legacy HTML templates
● New era of front-end "frameworks"
  ○ Media queries
    ■ Twitter Bootstrap
    ■ Skeleton
● Improved MVC
● Responsibility
● Flexibility
Background
Diazo concept




                http://docs.diazo.org/en/latest/index.html
Model Driven Engineering
● Ever heard of MDE?
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.
Metamodeling
● Mappings

      M3:      EBNF       M3:       XML



      M2:   Programming   M2:   XML schema
              language


      M1:      Code       M1:   XML document



      M0:    Real world   M0:    Real world
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.
Model transformations

M2:                 Transformation
      Metamodel A                    Metamodel B
                       language




M1:                 Transformation
        Model A      specification     Model B




M0:                 Transformation
                        engine
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
Model transformations
M3:                      XML          ● Traditional XSLT

M2:   HTML theme A        XSL            HTML theme B




M1:                  Transformation
       Website A      specification       Website B




M0:                  Transformation
                         engine
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
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
Diazo explained
● Two HTML sites
  ○ A content system
  ○ A theme
● One set of rules

● Regardless of pre-processors
  ○ Underlying dynamic systems
Why should we use it?
Case 1
Designers vs. developers
Designers
● At some point a designer delivers a design
  ○ Drawing (PSD)
  ○ Sliced / not sliced
  ○ HTML + CSS + JS
Developers
● Develop features
● Minimal / functional design

● Integrate the design into the application
   ○ Convert HTML pages into templates (Django)
   ○ Alter existing CSS (Plone)
Responsibility
● The designer delivers HTML + CSS

● Problem: Clearly in CSS
  ○ Designer is responsible
  ○ A developer will fix the problem


● Result:
  ○ Developer is responsible
Model View Controller


                         Templates
        View
                            Code
                        representation
      Controller

       Model
Model View Controller

                        View

                        Diazo

   application                         design


                 View           View

         Controller

            Model
Diazo stack
● An extra level of abstraction

● Diazo offers an interface between designers
  and developers
Case 2
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
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
Tooling
Plone themes
● Download the example themes
  ○ https://intranet.gw20e.com/diazo-themes
  ○ https://intranet.gw20e.com/new-diazo-theme
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

  <replace
     theme="//div[@id='content']/div[1]/h2/a"
     css:content="h1#parent-fieldname-title"
     />
Is it really that simple?
Unfortunately not...
Advanced Diazo
● Be careful with your selectors

     <replace
        theme="//div[@id='content']/div[1]/h2/a"
        css:content="h1#parent-fieldname-title"
        />
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()"
     />
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()"
     />
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>
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"
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
Conclusion
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
Future work
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
Additional workshop
       content
Creating a new Diazo
       theme
Create 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
Plone.app.theming
Plone themes
● Download the new example theme
  ○ https://intranet.gw20e.com/new-diazo-theme
Mark's blog
Blog article
● Mark van Lent wrote a blog article about the
  workshop
  ○ http://www.vlent.nl/weblog/2012/12/14/workshop-
    theming-with-diazo/

More Related Content

Similar to What is diazo

2 trasnformation design_patterns-sandeep_katoch
2 trasnformation design_patterns-sandeep_katoch2 trasnformation design_patterns-sandeep_katoch
2 trasnformation design_patterns-sandeep_katoch
IBM
 
Model-Driven Software Engineering in Practice - Chapter 10 - Managing models
Model-Driven Software Engineering in Practice - Chapter 10 - Managing modelsModel-Driven Software Engineering in Practice - Chapter 10 - Managing models
Model-Driven Software Engineering in Practice - Chapter 10 - Managing models
Jordi Cabot
 
Model driven software engineering in practice book - Chapter 9 - Model to tex...
Model driven software engineering in practice book - Chapter 9 - Model to tex...Model driven software engineering in practice book - Chapter 9 - Model to tex...
Model driven software engineering in practice book - Chapter 9 - Model to tex...
Marco Brambilla
 
2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer
Horacio Gonzalez
 
Web technologies: Model Driven Engineering
Web technologies: Model Driven EngineeringWeb technologies: Model Driven Engineering
Web technologies: Model Driven Engineering
Piero Fraternali
 

Similar to What is diazo (20)

2 trasnformation design_patterns-sandeep_katoch
2 trasnformation design_patterns-sandeep_katoch2 trasnformation design_patterns-sandeep_katoch
2 trasnformation design_patterns-sandeep_katoch
 
Model-To-Text Transformation Language chapter 9 – J Cabot model driven engine...
Model-To-Text Transformation Language chapter 9 – J Cabot model driven engine...Model-To-Text Transformation Language chapter 9 – J Cabot model driven engine...
Model-To-Text Transformation Language chapter 9 – J Cabot model driven engine...
 
Cg 2011
Cg 2011Cg 2011
Cg 2011
 
Model-Driven Software Engineering in Practice - Chapter 10 - Managing models
Model-Driven Software Engineering in Practice - Chapter 10 - Managing modelsModel-Driven Software Engineering in Practice - Chapter 10 - Managing models
Model-Driven Software Engineering in Practice - Chapter 10 - Managing models
 
QtModeling - bringing metamodeling features into the KDE world
QtModeling - bringing metamodeling features into the KDE worldQtModeling - bringing metamodeling features into the KDE world
QtModeling - bringing metamodeling features into the KDE world
 
CityGML Integration Into the ArcGIS Platform
CityGML Integration Into the ArcGIS PlatformCityGML Integration Into the ArcGIS Platform
CityGML Integration Into the ArcGIS Platform
 
Cleaning up Sitecore Controllers
Cleaning up Sitecore ControllersCleaning up Sitecore Controllers
Cleaning up Sitecore Controllers
 
Testing Model Transformations
Testing Model TransformationsTesting Model Transformations
Testing Model Transformations
 
Blender for ArchViz.pdf
Blender for ArchViz.pdfBlender for ArchViz.pdf
Blender for ArchViz.pdf
 
What's Next for MLflow in 2019
What's Next for MLflow in 2019What's Next for MLflow in 2019
What's Next for MLflow in 2019
 
Model driven software engineering in practice book - Chapter 9 - Model to tex...
Model driven software engineering in practice book - Chapter 9 - Model to tex...Model driven software engineering in practice book - Chapter 9 - Model to tex...
Model driven software engineering in practice book - Chapter 9 - Model to tex...
 
Sig A&D - MDA
Sig A&D - MDASig A&D - MDA
Sig A&D - MDA
 
2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer
 
Modal Driven Architecture In Software Engineering By NADEEM AHMED
Modal Driven Architecture In Software Engineering By NADEEM AHMED Modal Driven Architecture In Software Engineering By NADEEM AHMED
Modal Driven Architecture In Software Engineering By NADEEM AHMED
 
Scaling machinelearning as a service at uber li Erran li - 2016
Scaling machinelearning as a service at uber li Erran li - 2016Scaling machinelearning as a service at uber li Erran li - 2016
Scaling machinelearning as a service at uber li Erran li - 2016
 
Scaling machine learning as a service at Uber — Li Erran Li at #papis2016
Scaling machine learning as a service at Uber — Li Erran Li at #papis2016Scaling machine learning as a service at Uber — Li Erran Li at #papis2016
Scaling machine learning as a service at Uber — Li Erran Li at #papis2016
 
Web technologies: Model Driven Engineering
Web technologies: Model Driven EngineeringWeb technologies: Model Driven Engineering
Web technologies: Model Driven Engineering
 
Migrating from Magento 1 to Magento 2
Migrating from Magento 1 to Magento 2Migrating from Magento 1 to Magento 2
Migrating from Magento 1 to Magento 2
 
RESTful Machine Learning with Flask and TensorFlow Serving - Carlo Mazzaferro
RESTful Machine Learning with Flask and TensorFlow Serving - Carlo MazzaferroRESTful Machine Learning with Flask and TensorFlow Serving - Carlo Mazzaferro
RESTful Machine Learning with Flask and TensorFlow Serving - Carlo Mazzaferro
 
Introduction to Microservices
Introduction to MicroservicesIntroduction to Microservices
Introduction to Microservices
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 

What is diazo

  • 1. What is Diazo? Douwe van der Meij Goldmund, Wyldebeast & Wunderliebe vandermeij@gw20e.com @douwevandermeij
  • 3. Diazo ● With Diazo you can theme websites ○ Your own website ○ Someone else's website ○ Any website ■ On any technology
  • 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
  • 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?
  • 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
  • 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
  • 33. Plone themes ● Download the example themes ○ https://intranet.gw20e.com/diazo-themes ○ https://intranet.gw20e.com/new-diazo-theme
  • 34. Plone
  • 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?
  • 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()" />
  • 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
  • 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
  • 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
  • 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
  • 64. Plone themes ● Download the new example theme ○ https://intranet.gw20e.com/new-diazo-theme
  • 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/