Grails Tutorial for Beginners - Layout Templates
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
<!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
- Setup Grails 3 Windows Development Environment
- Setup Grails 2 Windows Development Environment
- Model View Controller Design Pattern
- Playing with Groovy Language
- Starting with Controllers
- Basic Groovy Server Pages
- Layout Templates
- Introduction to GORM
- Display Data from the Database
- Form Submission and Saving Data to the Database
- Scaffolding
- Grails Service Layer
- HQL Queries
- Criteria API
Grails Project Themes
