[From the series - creating software books reviews grails web application]
In the previous post we have created home and admin page. Now it is time to create layout of the application. If you visit software books reviews site you can see that layout of the page is header and footer and three columns. If you are not a CSS expert creating such layout can be probably complex so it is good idea to use help of some CSS framework. My CSS framework is blueprint.
Blueprint is the grid based framework with the fixed width. Screen is divided into 24 columns and you can specify "boxes" and number of columns they should span through. The most important thing to remember is that sum of the box widths may not be bigger than 24. It can be smaller but not bigger.
The short example of the web page with the blueprint can look like this:
<div class="container">
<div id="one" class="span-24 last">
<!-- some content -->
</div>
<hr/>
<div id="two" class="span-4 colborder">
<!-- some content -->
</div>
<div id="three" class="span-14 colborder">
<!-- some content -->
</div>
<div class="span-4 last">
</div>
</div>
In this short code example the most important features of the blueprint framework are already visible.
The first div with class container is mandatory and blueprint will work inside this div.
<div id="one" class="span-24 last"> defines box that should spread through all 24 columns. This means that content will take the whole row of the screen. "last" class is used to specified that it is last box in the given row. This class has more sense when the sum of box widths is less than 24 but you want to put next box into the new row.
<hr> is blueprint tag that just makes more space between two rows.
Next three <divs> are actually more interesting. Here you are defining that row should be divided into three columns. First column of the width 4, next column of the width 14, and last column of the width 4. What you can notice immediately is that sum of these numbers is 22.
The reason is that class colborder separates two columns and actually takes the space of the whole column.
Now when we have basic knowledge about blueprint it is time to integrate it into our sbr application. The first step is to download the blueprint framework from their site. When you extract the downloaded zip file, copy the three css files from the blueprint folder. The file to copy are: ie.css, screen.css, and print.css.
You should copy them into web-app/css folder of the sbr application.
Now it is time to define layout of our application. As already mentioned we want that all pages are same and have header/footer and three columns: left, middle and right column. If you have read Starting with front-end in Grails application post then it should be clear that the right place where to specify this is the main.gsp template. This template specifies how all pages that are based on this template will look like. First of all we need to reference css files we have copied to the css folder. To do this change to grails-app/views/layouts/main.gsp to look like this:
<html>
<head>
<title><g:layoutTitle default="Grails" /></title>
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'main.css')}" />
<g:layoutHead />
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'screen.css')}" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'print.css')}" type="text/css" media="print" />
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'ie.css')}" type="text/css" media="screen, projection" />
<g:javascript library="application" />
</head>
<body>
<g:layoutBody />
</body>
</html>
The three lines to notice are:
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'screen.css')}" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'print.css')}" type="text/css" media="print" />
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'ie.css')}" type="text/css" media="screen, projection" />They are added as specified by the blueprint framework. The only difference is that I have used createLinkTo grails construct.
Now when we are referencing necessary css files we can specify layout of the template.
<html>
<head>
<title><g:layoutTitle default="Grails" /></title>
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'main.css')}" />
<g:layoutHead />
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'screen.css')}" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'print.css')}" type="text/css" media="print" />
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'ie.css')}" type="text/css" media="screen, projection" />
<g:javascript library="application" />
</head>
<body>
<div class="container">
<div id="header" class="span-24 last">
header
</div>
<hr/>
<div id="left-sidebar" class="span-4 colborder">
left sidebar
</div>
<div id="content" class="span-14 colborder">
<g:layoutBody />
</div>
<div id="right-sidebar" class="span-4 last">
right sidebar
</div>
<hr/>
<div id="footer" class="span-24 last">
footer
</div>
</div>
</body>
</html>
As you can see that is quiet easy and understandable. And what is good it is all what we need to the to get required layout. If you start the application now you will see that home page of the sbr application has correct layout. Of course we still need to populate all parts with the real content but that will be part of the next posts.
I know that usually I am announcing what will be topic of the next post but this time I am not sure. But for sure good reading is introduction into grails templates and tag libs mechanism that I have described in this and this post.
P.S. Don't forget to write some review or post summary on the software books reviews.
from Manning. And of course I have promised to write review of the book.
.
