Grails Tutorial for Beginners - Layout Templates

Sep 23, 2013 Beginner comments

When coding screens, there are many elements that are common and repetitive. Usually the header, footer, and sidebars stays the same and only the content at the middle of the screen that change. The best approach is to have your GSP page contain only the specific business content, and have the repeating content re-factored outside. Grails supports layout templates for this particular purpose.

A template is a GSP page located in special folder called layouts:

There is already a default template named main.gsp included in a skeleton Grails application. To understand how it works, I created a simpler template named test.gsp:

<!DOCTYPE html>
<html>
	<head>
		<title><g:layoutTitle default="Grails"/></title>
		<style>
			#header {background-color:#ffe0e0;text-align: center;}
			#footer {background-color:#e0e0ff;text-align: center;}
		</style>
		<g:layoutHead/>
	</head>
	<body>
		<div id="header">HEADER</div>
		<g:layoutBody/>
		<div id="footer">FOOTER</div>
	</body>
</html>

To use it, just specify the layout meta tag in your specific GSP. For example:

<!DOCTYPE html>
<html>
	<head>
		<meta name="layout" content="test"/>
		<title>I am a test page</title>
		<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
	</head>
	<body>
		<p>The quick brown fox jumps over the lazy dog.</p>
	</body>
</html>

Since you specified the value test in the layout meta tag, that layout will be applied in your GSP. To understand how it works, imagine that the layout (test.gsp) is what will be rendered. And then the portion with the tags layoutTitle, layoutHead, and layoutBody will be replaced with the contents coming from your page.

layoutTitle

The portion in the template that says:

<title><g:layoutTitle default="Grails"/></title>

Will be replaced with the value inside the title tag in your gsp page. Since we have:

<title>I am a test page</title>

The content I am a test page will replace the layoutTitle.

layoutHead

The portion in your template with:

<g:layoutHead/>

will be replaced with what you have inside the head tag, except the title:

<meta name="layout" content="test"/>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">

layoutBody

The portion in your template with:

<g:layoutBody/>

will be replaced with what you have inside the body tag:

<p>The quick brown fox jumps over the lazy dog.</p>

Result

The resulting code and output will be:

<!DOCTYPE html>
<html>
	<head>
		<title>I am a test page</title>
		<style>
			#header {background-color:#ffe0e0;text-align: center;}
			#footer {background-color:#e0e0ff;text-align: center;}
		</style>
		<meta name="layout" content="test"/>
		<link rel="stylesheet" href="/sample/static/css/main.css" type="text/css">
	</head>
	<body>
		<div id="header">HEADER</div>
		<p>The quick brown fox jumps over the lazy dog.</p>
		<div id="footer">FOOTER</div>
	</body>
</html>

Remarks

A hack-ish way of achieving layouts is to render other GSP pages in your GSP page. But that is very hard to maintain. The layout template framework of Grails is much cleaner. Understanding it is a very good investment for your projects.

List of Tutorials for Beginners

Tags: beginner, gsp, layout, template, tutorial

Beginners Tutorial

Example Applications

If you like my posts, like my Facebook page please :)

Links

Grails Tutorial for Beginners - Layout Templates

Remarks

Grails 3 Tutorials

Grails Project Themes

Java Samples

Plugins

Examples

Groovy SQL

Snippet

Groovy

Tag Reference