Saturday, September 17, 2011

How to create a consistent look and feel with Grails Layout ~ Grails Tutorial 3

So far we have created a controller and a view, and we have learned how to pass values from the controller to the view. Although we can now start improving the look and feel of the store with fancy HTML or CSS codes, but that means we would need to do that with every single gsp we create.

Would it not be great if we can create a template for all the pages in the application with the same header, the same menu, the same footer? That way we can always be assured of a consistent look and feel across the store.

The answer for this question lies in Grails Layout, and our objective in this session is to:
  1. Create a template that apply to all the different views in the application with Grails Layout
To have all the actions in our CatalogController share the same layout, we will need to create a layout file with the same name at /grails-app/views/layouts. Lets create the following file now then:
/grails-app/views/layouts/catalog.gsp
Again, grails' convention over configuration is put at work here. We don't have to write any XML files to wire the two together. Everything works just perfectly. Below is the code snippet for catalog.gsp:
<html>

 <head> <title> Camgear - <g:layoutTitle/></title>
  <link rel="stylesheet" href="
   <g:createLinkTo dir='css' file='camgear.css' />
  " />
  
  <g:layoutHead />
 </head>
 
 <body>
  
  <div id="header">
   <img src="
    <g:createLinkTo dir='images' file='camgear-logo.gif' />
   " alt='logo' height='100'/>
   <hr />
  </div>
  <g:layoutBody />
  
  <div id="footer">
   <a>All Rights Reserved</a>
  </div>
  
 </body>
 
</html>
Of course, we will still need to put the camgear.css file in the
/camgear/web-app/css
folder. The following is a sample css file that I used:
body {
 font: "Helvetica Neue", Trebuchet MS, Verdana, Helvetica;
 margin: 0px;
}
#review sub {
 font-size: 2.5em;
 display: block;
 margin: .5em;
 padding: .5em;
 background: url(../images/background.png) repeat-x;
 border: 1px dotted black;
}
#review con   {
 font-size: 1.5em;
 text-align:right;
 margin-right: 2em;
}
#nav {
 text-align:right;
 margin-right: 1em;
}

#header {
  background: url(../images/logo-background.gif) repeat-x;
 padding: 0px;  
}
#header img {
 padding: 1em;
}
#footer {
  background: url(../images/background.png) repeat-x;
 padding: 0px;  
}

#footer a {
 font-size: 0.7em;
 display: block;
 color: white;
 text-align:center;
 margin-top:30px;
 font-family:"Lucida Handwriting", Verdana, Helvetica;
}

#menu {
 background: url(../images/logo-background.gif) repeat-x;
 padding: 5px; 
}
#menu li {
 display: inline;
 margin-left: 5px;
 margin-right: 5px;

}

#menu a {
 font-size: 1.5em;
 text-decoration: none;
 color: #4F82B5; // #14477A
}
Once all these are done, all we need to do is to refresh our browser, and we will see a totally different web page; I mean it feels as though technology has evolved for 10 years with just these two changes. We now have a standard header, standard footer and more importantly, a standard theme. Note that we have not done anything to the view we created yesterday.
So, that's all for today. We will talk about binding to the database tomorrow.
Related Articles
  1. Tutorial 1 - Creating our first controller in grails
  2. Tutorial 2 - How we present ourselves to the world

3 comments:

  1. Thank you.
    Fun.
    Taking in Grails as fast as possible - your tutorial series was unique and Fun.

    ReplyDelete
  2. Amazingly newbie-friendly tutorial...
    waiting to read more (on further adv topics)

    ReplyDelete