Grails Tutorial for Beginners - Basic Groovy Server Pages (GSP)

Aug 31, 2013 Beginner comments

Groovy Server Pages (or GSP) is the default presentation technology for rendering views in Grails. It is very similar to JSP where you can easily combine static and dynamic contents in your output. The Grails framework have made it very easy to use yet powerful enough for most use cases.

If you are new to Grails, I suggest you setup your development environment by following this guide. If you are unfamiliar with controllers, you can review the previous post before proceeding below.

Hello World

Copying from my previous post, this is how to display a simple Hello World using GSP in Grails.
First is create a controller

And give it a name. For example Hello:

You don't need to edit the generated controller code:

package asia.grails.tutorial
class HelloController {
	def index() { }
}

A folder hello is created under view. Create index.gsp inside the folder:

And use the following code:

<!DOCTYPE html>
<html>
	<head>
		<meta name="layout" content="main"/>
		<title>Welcome to Grails</title>
	</head>
	<body>
		Hello World
	</body>
</html>

Run the application and fire up your browser with this URL: http://localhost:8080/sample/hello and the text "Hello World" is rendered.

Displaying Domain Contents

Here is an example of a domain class. If you are unfamiliar with domain, it is just like a simple Java Bean that can be persisted to a database. This topic will be discussed in future tutorials. For now, think of it as like a simple holder of data.

package asia.grails.tutorial
class Person {
    String firstName
    String lastName
    int age
}

Since I don't want to tackle persistence yet, let's have a controller code that will compose the contents of a domain object, instead of retrieving from a database. Modify the sample above to:

package asia.grails.tutorial
class HelloController {
    def index() {
        Person person = new Person(firstName: 'John', lastName:'Doe', age:55)
        [ person:person ]
    }
}

The last code in the controller's action will be the map parameters passed to your view. Hence in your view, the object named person becomes available.

<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <title>Render Domain</title>
</head>
<body>
Last Name: <g:fieldValue bean="${person}" field="lastName"/><br/>
First Name: <g:fieldValue bean="${person}" field="firstName"/><br/>
Age: <g:fieldValue bean="${person}" field="age"/><br/>
</body>
</html>

We used the tag fieldValue to get the value of a domain's property. A shorter way if you prefer is this:

<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <title>Render Domain</title>
</head>
<body>
Last Name: ${person.lastName} <br/>
First Name: ${person.firstName} <br/>
Age: ${person.age} <br/>
</body>
</html>

Notice that the content's inside ${} is evaluated and rendered.

Loop and Display a List

A simple GSP page for rendering numbers from 1 to 10

<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <title>Render Domain</title>
</head>
<body>
    <g:each in="${(1..10)}" var="number">
        ${number}<br/>
    </g:each>
</body>
</html>

A sample controller that passes a list of domain records and renders each in a GSP:

package asia.grails.tutorial
class HelloController {
    def index() {
        def list = []
        list << new Person(firstName: 'John', lastName:'Doe', age:50)
        list << new Person(firstName: 'Jane', lastName:'Smith', age:45)
        list << new Person(firstName: 'Sam', lastName:'Robinson', age:47)
        [ list:list ]
    }
}

<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <title>Render Domain</title>
</head>
<body>
    <table>
        <tr>
            <td>Name</td>
            <td>Age</td>
        </tr>
        <g:each in="${list}" var="person">
        <tr>
            <td>${person.lastName}, ${person.firstName}</td>
            <td>${person.age}</td>
        </tr>
        </g:each>        
    </table>
</body>
</html>

Form

For example, you will write a form to submit a Person's information. From the controller, you can send a person object that contains it's default values or values retrieved from a database. Here is a simple example:

package asia.grails.tutorial
class HelloController {
    def displayForm() {
        // just provide value for age. First Name and Last name are blanks.
        Person person = new Person(age:55) 
        [ person:person ]
    }
}

The HTML form:

<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <title>Render Domain</title>
</head>
<body>
<g:form action="save" >
    <label for="lastName">Last Name</label>
    <g:textField name="lastName" value="${person.lastName}"/>
    <br/>
    <label for="firstName">First Name</label>
    <g:textField name="firstName" value="${person.firstName}"/>
    <br/>
    <label for="age">Age</label>
    <g:textField name="age" value="${person.age}"/>
    <br/>
    <g:submitButton name="create" value="Save" />
</g:form>
</body>
</html>

The action property of the form tag is the action of the controller where the form is to be submitted. The rest of the form is self explanatory.

Remarks

When you are already familiar with JSP, PHP or just plain HTML, it is very easy to understand how to use GSPs. The default tags does not deviate from how you will hand code your own HTML. The above are just very basic examples. Future post will explain other use cases of views.

List of Tutorials for Beginners

Tags: beginner, Groovy Server Pages, gsp, tutorial, view

Beginners Tutorial

Example Applications

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

Links