I have been working with Groovy on Grails for a while as a front-end developer, and I hit snags from time to time, getting it to behave as I would like. Here is a list of some of the things that I am sick of researching every time I work on a new project:

I hate that when I drop in the meta tag for applying a layout (<meta name="layout" content="main" />) it leaves that useless meta tag in the head of the document. So, I looked around, and learned that dropping the following Grails tag at the very beginning of the document will apply the desired layout without cluttering up your markup:

<g:applyLayout name="main" />

Additionally, adding the following directive to the config.groovy file will remove the need for using that directive in cases where you are using the main template:

grails.sitemesh.default.layout = 'layoutName'

W00T!

Next,

  • Use either of the following two options to display a date:
    • <g:formatDate format="yyyy"/>
    • ${new Date().format("yyyy")}
  • Use either of the following two to create a link (relative to the application’s root):
    In the cases below, link creates a full anchor (<a>) tag/element, whilc createLink only returns/prints the URL/href/src.

    • <g:link uri="/blah/" class="css-class">Link</g:link>
    • ${link(uri:'/blah/')}
    • <a href="${createLink(uri:'/blah/')}" class="css-class">Link</a>
    • <a href="${link(uri:'/blah/')}" class="css-class">Link</a>
    • createLink is used to create a URL. <g:createLink/> is the markup-flavored way to do the same: ${createLink(controller:'application',action:'archive',id:application.id,params:[key1:'value1',key2:'value2'])} and <g:createLink controller="application" action="archive" id="${application.id}" params="[key1: 'value1', key2: 'value2']" /> would both resolve to something like this: /hello/world/1?key1=value1&key2=value2
    • link and <g:link/> are correlary, and are used for building out an entire anchor tag (standard hyperlink).
    • RAW${raw('test')} – you get the idea! – h/t Tony
    • <g:message code="page.header.${params.searchType}"></g:message>  ==
    • ${message(code:'page.header.'+params.searchType)}

Use

You can nest layouts using that same g:applyLayout tag to a sub-template (e.g. <g:applyLayout name="global"/>).

If you want to place in the contents of the inheriting view/page properly within the title, wrap g:layoutTitle in the title tag in the head (e.g. <title><g:layoutTitle/></title>). Then wrap the actual title in a title tag on the inheriting view (e.g. <title>actual title</title>).

Similarly, if you want to place the contents of the head of the document in the head of the template, use the g:layoutHead tag thus: <g:layoutHead/>

If you would like to include blocks of JavaScript below late loading JavaScript calls (e.g. <script src="./some-script.js"></script>, etc.) at the bottom of the body of a page, add the following to a template file (e.g. main.gsp.

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

Then add your code block (whether a referential script tag or a block of code), add it to the appropriate view (.gsp) file thus:

<content tag="endjs">
<script>
  $(document).ready(function() {
    blah();	
  });
</script>
</content>

Find more related help over on the terminal crib sheet.