Tuesday, April 28, 2009

Creating home and admin page

[From the series - creating software books reviews grails web application]

In the previous post I have explained some basic aspects of grails front-end. Having this knowledge it is a time to create home page of sbr application. For the list of steps how I got up to this point you may want to have a look at this post pointing to all posts related to sbr series.

If you start sbr application (grails run-app) default home page generated by grails is displayed. This is not very useful page as a home page but will be very useful as admin page. It can be very useful as a admin page because it displays all controllers in your application. For each controller you can generate default list/show/create/edit pages.

So let create home page. To create home page I usually create HomeController. So the first step is to generate home controller. To create home controller type the following command:

grails create-controller Home

This command will generate HomeController.groovy file in the grails-app/controllers folder and home folder in the grails-app/views folder. In this folder we should put our new home page.

So to create home page in the home folder create file home.gsp that should look like this one:

<html>
<head>
<title>SBR</title>
<meta name="layout" content="main" />
</head>
<body>
Welcome to the SBR
</body>
</html>

We want to display this page when ever the HomeController is accessed. This is very easy to achieve. Update the code of the HomeController to look like this:

class HomeController {
def index = {
render (view:'home')
}
}

index closure is default closure of the controller and is executed when controller is accessed without specifying action to be executed. So if you type in your browser http://localhost:8080/sbr/home, index action will be executed. And this action is telling that the view 'home' should be displayed. As you are in the HomeController it will look for the file home.gsp in the grails-app/views/home folder. But if you want in the render closure you can specify the full path to the page to be displayed relative to the views folder. So render (view:'home/home') would be valid too.

Now it is time to create admin page. For admin page we will need AdminController. To create AdminController execute following command:

grails create-controller admin

Same as for the HomeController this command will create file AdminController.groovy and folder admin. To create admin page in the admin folder create admin.gsp file. Copy the content of the web-app/index.gsp file into the admin.gsp file. At the end admin.gsp should look like this:

<html>
<head>
<title>SBR admin</title>
<meta name="layout" content="main" />
</head>
<body>
<div class="dialog" style="margin-left:20px;width:60%;">
<ul>
<g:each var="c" in="${grailsApplication.controllerClasses}">
<li class="controller"><g:link controller="${c.logicalPropertyName}">${c.fullName}</g:link></li>
</g:each>
</ul>
</div>
</body>
</html>

We still need ability to display admin page. To process is the same as for the HomeController. Change the AdminController so it looks like this:

class AdminController {
def index = {
render (view:'admin')
}
}

But still, when you start application and access the link http://localhost:8080/sbr you are getting old index page. To change this change the web-app/index.gsp file to this:

<html>
<body>
<%response.sendRedirect(request.getContextPath()+"/home/");%>
</body>
</html>

This will redirect you to the HomeController and home page will be displayed after accessing sbr application.

We are almost done. But what is still remaining is to update template that we use for our pages. So go the the grails-app/views/layouts/main.gsp file and change it to look like this:

<html>
<head>
<title><g:layoutTitle default="Grails" /></title>
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'main.css')}" />
<g:layoutHead />
<g:javascript library="application" />
</head>
<body>
<g:layoutBody />
</body>
</html>

What I did are just simple changes to this file. Actually I have only removed some code from file generated by default.

As it turned out that this post is longer than I have expected let me summarize steps I have done. So after your grails application is generated you are ready to create home and future admin page. I am usually doing these steps:

  • Create HomeController and home.gps page
  • Create AdminController and admin.gsp page
  • Change index.gsp file so it redirects to the HomeController
  • Make main.gsp layout file simple.

After those steps basic skeleton of the grails application is prepared.

What remains is to prepare layout of the home.page and this can be achieved by changing main.gsp file. If you remember from the previous post, main.gsp is actually template that we can reuse for all the pages in the grails application. Actually we already did it for the home and admin page.

In the next post I will describe layouting of the main.gsp file or to be more precise I will integrate blueprint css framework into sbr application.

P.S. Don't forget to write some review or post summary on the software books reviews.

1 comment:

Santhosh Kumar Nagulanchi said...

Hi I spent most of the time in this blog only to learn Grails. its very good one.
All the best.

Thanks and Regards,
Santhosh kumar nagulanchi