Grails Layouts & Sitemesh

13,956 views

Published on

A deep dive on how Grails uses Sitemesh and explore integration/customization points as well as some light live-coding examples of how to use the apply layout tag in conjunction with layouts to achieve a very flexible and intuitive approach to developing DRY applications with Grails.

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
13,956
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
155
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Grails Layouts & Sitemesh

  1. 1. Chicago, October 19 - 22, 2010 Grails Layouts & Sitemesh Colin Harrington – Object Partners Sitemesh :: sitemesh.org
  2. 2. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission. whoami Colin Harrington Senior Consultant colin.harrington@gmail.com colin.harrington@objectpartners.com
  3. 3. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission. When & What Grails 1.3.5 Groovy 1.7.5 Spring 3.0.3 Servlet 2.5 Sitemesh 2.4 (new to Grails 1.1+)
  4. 4. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission. GSP GSP = Groovy Server Pages GroovyPage (org.codehaus.groovy.grails.web.pages.GroovyPage) Part of the GroovyPagesGrailsPlugin
  5. 5. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission. Rich View layer GSP Taglibs Page Directives Expressions Views Templates ...
  6. 6. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission. Grails Layouts Templating only goes so far... view + layout DRY
  7. 7. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission. Sitemesh 'It is a HTML templating framework based on the "Decoration" model' ”It is a web-page layout and decoration framework and web application integration framework to aid in creating large sites consisting of many pages for which a consistent look/feel, navigation and layout scheme is required” ~ Wikipedia http://en.wikipedia.org/wiki/Java:_View_Technologies_and_Frameworks http://en.wikipedia.org/wiki/SiteMesh
  8. 8. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission. Sitemesh Orignally Developed in 1999 by Joe Walnes. Now part of the OpenSymphony Project Implemented in Java Can decorate any html so Compatible with {php, asp, perl, python ...} http://www.opensymphony.com/sitemesh/
  9. 9. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission. Mesh! ← Layout Views → Rendered Result →
  10. 10. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission. Demo
  11. 11. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission.
  12. 12. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission.
  13. 13. web.xml ... <filter>   <filter­name>sitemesh</filter­name>   <filter­class>...GrailsPageFilter</filter­class> </filter> ... (org.codehaus.groovy.grails.web.sitemesh.GrailsPageFilter)
  14. 14. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission.
  15. 15. sitemesh.xml <sitemesh>   <page­parsers>     <parser content­type="text/html"                        class="...GrailsHTMLPageParser"/>     <parser        content­type="text/html;charset=ISO­8859­1"       class="...GrailsHTMLPageParser"/>     <parser content­type="text/html;charset=UTF­8"       class="...GrailsHTMLPageParser"/>   </page­parsers>   ... </sitemesh> (org.codehaus.groovy.grails.web.sitemesh.GrailsHTMLPageParser)
  16. 16. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission.
  17. 17. sitemesh.xml <sitemesh>     ...     <decorator­mappers>         <mapper  class="...GrailsLayoutDecoratorMapper" />     </decorator­mappers> </sitemesh> (org.codehaus.groovy.grails.web.sitemesh.GrailsLayoutDecoratorMapper)
  18. 18. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission.
  19. 19. Triggering layouts In order of precedence:   meta.layout  static 'layout' property on the controller  controller/action conventions:  /layouts/${controller}/${action}.gsp  /layouts/${controller}.gsp   configured grails.sitemesh.default.layout    /layouts/application.gsp
  20. 20. meta.layout <html> <head>   <meta name="layout" content="main"/>   ... </head> <body>...</body> </html> This triggers grails­app/views/layouts/main.gsp
  21. 21. static layout Static property on the controller class BookController {     static layout = 'customLayout'     def list = { … }  } This will trigger grails­app/views/layouts/customLayout.gsp for all of the controller actions in the BookController (meta.layout has first precedence)
  22. 22. ${controller}/${action} convention Controller & Controller Action Convention class BookController {     def list = { … }  } grails­app/views/layouts/book/list.gsp If not → it looks for: grails­app/views/layouts/book.gsp Otherwise it gives up and doesn't decorate the Page
  23. 23. ${controller}/${action} convention Controller & Controller-Action Convention class BookController {     def list = { … }  } grails­app/views/layouts/book/list.gsp If not → it looks for: grails­app/views/layouts/book.gsp
  24. 24. grails.sitemesh.default.layout // grails­app/conf/Config.groovy grails.sitemesh.default.layout='myLayoutName'
  25. 25. application.gsp When all else fails: grails­app/views/layouts/application.gsp
  26. 26. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission. Basic layout tags {layoutTitle, layoutHead, layoutBody} <html> <head>     <title><g:layoutTitle default="my page" /></title>     <g:layoutHead /> </head> <body>      <div class="menu"><!-- common menu here--></div>      <div class="body">          <g:layoutBody />      </div> </body> </html>
  27. 27. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission. Page properties View: <html> <head>     <meta name="layout" content="myLayout" /> </head> <body onload="alert('hello');"> Page to be decorated </body> </html> Layout (myLayout.gsp): <html> <head><g:layoutHead /></head> <body onload="${pageProperty(name:'body.onload')}">     <g:layoutBody /> </body> </html>
  28. 28. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission. <g:pageProperty/> <g:pageProperty name="page.mainNav"/> <g:pageProperty name="page.mainNav" default="home"/>
  29. 29. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission. <g:ifPageProperty/> <g:ifPageProperty name=”showTheContent”> This content is only displayed if the page property is present </g:ifPageProperty>
  30. 30. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission. <parameter/> <parameter name=”myParameter” value=”foo”> Accessible as a page property ${pageProperty(name: 'page.myParameter')}
  31. 31. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission. <content/> View: <body> ... <content tag="sidebar"> Page specific Sidebar... </content> ... </body> Layout: <div id="sidebar"> <g:pageProperty name="page.sidebar" default=""/> </div><!-- #sidebar -->
  32. 32. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission. <meta/> <meta> tags get added as a pageProperty 'meta.propertyName' <meta name="myProp" content="myContent"/> <g:pageProperty name="meta.myProp" />
  33. 33. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission. <g:applyLayout/> <g:applyLayout name="fieldsetWrapper"> This goes into the layoutBody of 'fieldsetWrapper' layout </g:applyLayout>
  34. 34. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission. Q&A
  35. 35. SpringOne 2GX 2010. All rights reserved. Do not distribute without permission. Thank you!

×