Bits and Bytes: September 2011

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:

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

Tutorial 1 - Creating our first controller in grails
Tutorial 2 - How we present ourselves to the world

Friday, September 16, 2011

How to present our views to the world - Grails Tutorial 2

In the first article of this series of grails tutorial, we created a first controller.

Well, the truth is we cannot bring our store online yet. There was only 1 controller and it is not quite my favorite camera store yet. Besides, the presentation of our store, err... kinda sucks.

On top of that, we basically embedded the HTML in our codes, which is one of the most horrendous things any programmer can do. Unless I want to overtake Billo as the worst programmer of all time, we got some serious work to do.

So, meet Groovy Server Pages (gsp) - the grails solution to move the presentation logic out so that some artistic designers can work on them, and I can focus on coding the backend logic. Now, we all know that the infamous Convention over Configuration philosophy behind grails, and if we put the right file in the right place, everything will work out just fine.

And, and, and..... there is no configuration needed!!! Yay!

OK... lets focus on our objective today:

Passing some values from the Controller to gsp,

We will talk about layout, data model and persisting data in some form of database in the following sessions.

Alright, first thing first, instead of rending HTML codes from the controller, we now do 1 step better; we keep some values here and pass them to the gsp for display. So, lets change our little controller like so:

def catalog = {
     
     def staticBrand = "Nikon"
     def staticModel = "D3S"
     def staticReview = "D3S is the best pro DSLR ever!"
     def staticReviewer = "JC Tai"
     def staticRating = 5

     [  
      brand : staticBrand, 
      model : staticModel, 
      review : staticReview, 
      reviewer: staticReviewer, 
      rating : staticRating
     ]

    }

Notice the square bracket? That's how the controller passes information to the gsp. Now, because of the convention over configuration philosophy, we do not need to create any configuration so long as we create the view here:

/grails-app/views/catalog/catalog.gsp

It is time now to write our view. Since my web designer is on leave today, I created the view by myself; and boy! This has already pushed my creativity ability to the limit! Lets see how it looks like:

<HTML>

 <HEAD>
  <TITLE>Camera Gears Review & Catalog</TITLE>
 </HEAD>
 
 <BODY>
  Brand: ${brand} <br />
  Model: ${model} <br />
  Review: ${review} <br />
  Reviewer: ${reviewer} <br />
  Rating: ${rating} stars <br />  
 </BODY>

</HTML>

Once we do that, grails automatically wires the controller and the view together. Not a line of XML has been written! Amazing! Now lets point our browser to

http://localhost:8080/camgear/catalog/catalog

and voilà!

If we are talking about cleaner codes, can any code be cleaner than this? Haha... joke aside. In just a few lines of code, we have managed to create a web application that is retrieving information from the controller, and yes, we have not done anything on database yet, but the simplicity of grails just blows me away!

OK, lets review what we have done so far:

We have created a controller.
~~We rendered HTML from the controller~~
We stored some static values in the controller
We retrieved these values from the controller and passed them to the gsp
We have a VERY CLEAN web site running in just a few lines of code!

OK, so far so good. Next time, we will talk about a consistent layout for the entire web site. Stay tuned!

Related articles

Tutorial 1 - Creating our first controller in grails
Tutorial 3 - How to create a consistent look and feel with grails layout

Thursday, September 15, 2011

Creating our first controller in grails - Grails Tutorial 1

A few months ago I wrote an article about how grails makes it possible to write a quick application in 3 minutes. I knew I should have followed up with more stuff but works caught up and I procrastinated. I know, my bad, my bad...

Anyway, I am about to write a series of grails tutorial. Hopefully it can encourage more people to adopt this wonderful framework.

I love photography, and all the camera gears. So, lets base our tutorial with an online portal of camera products for browsing. Hopefully we can evolve this to something more substantial along the way.

OK, some fundamental first. The grails framework has been designed based on the MVC framework; and those who have developed in Spring Framework will find Grails a refreshing platform for rapid application development.

MVC Concept - The solid lines are direct association and the dashed one are indirect association.

So with that, we can start building our online camera catalog, and we are going to call our project Camgears. So lets create our first project with a simple command line:

grails create-app camgear

We will then see a bunch of activities happening in front of us. Once it's done, we will be able to start our application. The first thing that we need to do is to create a controller. Controller is the engine behind every grails application and they do the following few things very well:

They receive user inputs from the web browser
They invoke the necessary business objects to get things done
They can also access your data model to retrieve information from your database
And at the end they redirect the application to the appropriate pages for the end result to be displayed.

So with that understanding, lets start generating our first controller. First lets change to the proper directory:

cd camgear

Then we will generate the controller by issuing:

grails create-controller catalog

After this, grails actually create a the skeleton of the controller at /grails-app/controllers/CatalogController.groovy. The following is how the file looks like:

package camgear

class CatalogController {

    def index = {
    }

}

It looks pretty simple right now. But note that grails has actually created a simple index action for us. Lets say we really want the users to be automatically be routed to the catalog every time they visit our site, we can do the following:

package camgear

class CatalogController {

    def index = {
     redirect( action: catalog )
    }
    
    def catalog = {
     render "<h1> Welcome to our store </h1> <br>Under construction."
    }
}

Lets try to see if this works. Grails comes with a handy web server, and even in memory database (more to that later). To execute this, all we need to do is to run the following command:

grails run-app

And when everything is ready, point your web browser to:

http://localhost:8080/camgear

And you will see a nice web page with all the dirty work that grails has done for you. You can even see that the camgear.CatalogController has already been defined for you:

Now, lets click at the camgear.CatalogController and see what happens:

Something cool happens if you type the following URL:

http://localhost:8080/camgear/catalog/index

The page automatically gets redirected to

http://localhost:8080/camgear/catalog/catalog

because of this code:

    def index = {

     redirect( action: catalog )

    }

Pretty neat huh? We only wrote a few commands and with only a few lines of codes, our first application is already up. That took less than 5 minutes.

I know, I know... some of you are going to complain about embedding HTML codes into the controller, which is a horrible idea. But we are going to make changes to this later in View and Layout.

Stay tuned.