Grails Layouts & Sitemesh

Chicago, October 19 - 22, 2010

Grails Layouts & Sitemesh

Colin Harrington – Object Partners

Sitemesh :: sitemesh.org

SpringOne 2GX 2010. All rights reserved. Do not distribute without permission.

whoami

Colin Harrington

Senior Consultant

[email protected]

[email protected]

mailto:[email protected]

mailto:[email protected]


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+)


GSP

GSP = Groovy Server Pages

GroovyPage (org.codehaus.groovy.grails.web.pages.GroovyPage)

Part of the

GroovyPagesGrailsPlugin


Rich View layer

GSP

Taglibs

Page Directives

Expressions

Views

Templates

...


Grails Layouts

Templating only goes so far...

view + layout

DRY


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”

~ Wikipediahttp://en.wikipedia.org/wiki/Java:_View_Technologies_and_Frameworks

http://en.wikipedia.org/wiki/SiteMesh


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/


Mesh!

← Layout

Views →

Rendered Result →


Demo



web.xml

...

<filter>

<filter-name>sitemesh</filter-name>

<filter-class>...GrailsPageFilter</filter-class>

</filter>

...

(org.codehaus.groovy.grails.web.sitemesh.GrailsPageFilter)


sitemesh.xml

<sitemesh>

<page-parsers>

<parser content-type="text/html"

class="...GrailsHTMLPageParser"/>

<parser

content-type="text/html;charset=ISO-8859-1"


<parser content-type="text/html;charset=UTF-8"


</page-parsers>

...

</sitemesh>

(org.codehaus.groovy.grails.web.sitemesh.GrailsHTMLPageParser)


sitemesh.xml

<sitemesh> ... <decorator-mappers> <mapper class="...GrailsLayoutDecoratorMapper" />

</decorator-mappers></sitemesh>

(org.codehaus.groovy.grails.web.sitemesh.GrailsLayoutDecoratorMapper)


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

meta.layout

<html><head> <meta name="layout" content="main"/> ...</head><body>...</body></html>

This triggers grails-app/views/layouts/main.gsp

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)

${controller}/${action} convention

Controller & Controller Action Convention

class BookController { def list = { … } }

grails-app/views/layouts/book/list.gspIf not → it looks for:

grails-app/views/layouts/book.gsp

Otherwise it gives up and doesn't decorate the Page

${controller}/${action} convention

Controller & Controller-Action Convention

class BookController { def list = { … } }

grails-app/views/layouts/book/list.gspIf not → it looks for:

grails-app/views/layouts/book.gsp

grails.sitemesh.default.layout

// grails-app/conf/Config.groovygrails.sitemesh.default.layout='myLayoutName'

application.gsp

When all else fails:

grails-app/views/layouts/application.gsp


Basic layout tags

{layoutTitle, layoutHead, layoutBody}

<html><head> <title><g:layoutTitle default="my page" /></title> <g:layoutHead /></head><body> <div class="menu"></div> <div class="body"> <g:layoutBody /> </div></body></html>


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>


<g:pageProperty/>

<g:pageProperty name="page.mainNav"/>

<g:pageProperty name="page.mainNav" default="home"/>


<g:ifPageProperty/>

<g:ifPageProperty name=”showTheContent”>

This content is only displayed if the page property is present

</g:ifPageProperty>


<parameter/>

<parameter name=”myParameter” value=”foo”>

Accessible as a page property

${pageProperty(name: 'page.myParameter')}


<content/>

View:

<body>...<content tag="sidebar">

Page specific Sidebar...</content>...</body>

Layout:

<div id="sidebar"><g:pageProperty name="page.sidebar" default=""/></div>


<meta/>

<meta> tags get added as a pageProperty

'meta.propertyName'

<meta name="myProp" content="myContent"/>

<g:pageProperty name="meta.myProp" />


<g:applyLayout/>

<g:applyLayout name="fieldsetWrapper">This goes into the layoutBody of 'fieldsetWrapper' layout

</g:applyLayout>


Q&A


Thank you!

Technology

Grails Layouts & Sitemesh