Friday, January 23, 2009

Grails Templates and the 960 Grid System

I stumbled across the 960 Grid System and wanted to see if it could serve as the layout foundation in a Grails application. I am pleased with the results and believe this will help speed up the initial design of new web sites. Having read several articles and blog posts demonstrating the use of templates in Grails, I could have started from scratch but decided to follow along with Mo and add the 960 Grid System to the mix.

My first impression was, "That's a lot of stylesheets!" It took me awhile to decide if I liked the modularization of the CSS but I grew to appreciate it because it helped me focus. This is the same reason I like breaking a layout into Grails templates. I haven't tried to make the result look good yet, it is intended to demonstrate a quick way to customize the structure of your layouts.

I ended up with five templates stored in a folder named common. I added a stylesheet specific to the application named layout.css since I named the application layout. Later I decided that was a confusing name but luckily this is just a quick proof of concept. I did not include the standard main.css but of course you can if desired.

The only feature of 960 Grid System that didn't perform as I wanted it to right out of the box (no offense Dave Klein) was centering the page in Internet Explorer. In order to center the page in IE I added the wrapper div with text-align: center. This required me to tweak container_12 to return everything to text-align: left. This demonstrates a very simple example but it should be easy to see how you could use Grails templates and the 960 Grid System to create just about any fixed layout you could want.

Here is main.gsp:
<html>
<head>
<title><g:layouttitle default="Layout Example"></title>
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'reset.css')}">
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'960.css')}">
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'text.css')}">
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'layout.css')}">
<g:layouthead>
</head>
<body>
<div id="wrapper">
<div class="container_12">

<div class="grid_12">
<g:render template="/common/topbar">
</div>

<div class="grid_12">
<g:render template="/common/header">
</div>

<div class="grid_12">
<g:render template="/common/menu">
</div>

<div class="grid_8">
<div id="content">
<g:layoutbody>
</div>
</div>

<div class="grid_4">
<g:render template="/common/sidepanel">
</div>

<div class="clear">

<div class="grid_12">
<g:render template="/common/footer">
</div>

</div>
</div>
</body>
</html>

Here is layout.css:
body
{
background: #99BADD;
}

#wrapper {
text-align: center;
}

.container_12 {
text-align: left;
}

#topbar {
background: url(../images/30-y.gif) repeat-x;
height: 30px;
margin-top: 20px;
}

#header {
background: url(../images/120-y.gif) repeat-x;
height: 120px;
text-align: center;
margin-top: 20px;
}

#menu {
background: url(../images/60-y.gif) repeat-x;
height: 60px;
margin-top: 20px;
}

#content {
background: url(../images/620-x.gif) repeat-y;
width: 620px;
margin-top: 20px;
}

#sidepanel {
background: url(../images/300-x.gif) repeat-y;
width: 300px;
margin-top: 20px;
}

#footer {
background: url(../images/45-y.gif) repeat-x;
height: 45px;
text-align: center;
margin-bottom: 20px;
}

Thursday, January 15, 2009

Grails In Action

Today I was pleasantly surprised by an email from Manning Publications. I won a copy of Grails in Action from the Grails Podcast. I am very excited and I haven't even had a chance to listen to the latest episode. I feel quite dangerous since just by reading the first chapter a few months ago I launched Q2OH. Now I have 246 pages today and the promise of the entire book when it is ready. Imagine the possibilities. I'm feeling pretty excited about 2009, my todo list for the New Year included just five items and I'm on my way to knocking two of them out before January is complete. In case it isn't obvious, I am writing this post on the "kick-butt development workstation" mentioned at the top of the todo list. Now I can get started reading Grails in Action.

Wednesday, January 14, 2009

OpenSolaris Workstation Step 2

I managed to get my hands on the monitor recently and got started with software installations. Having booted from the OpenSolaris 2008.11 Live CD I knew there were drivers for all of the hardware. After booting from the live CD there is a desktop icon to start the installation. All that is necessary to install the OS is to choose a partition or entire disk, provide a root password, and one user account with name and password. That's it, install complete and upon restart booting from the hard disk appears as an option in Grub even before the live CD is ejected. After the restart there is a desktop icon for IPS titled "Add More Software". I ran IPS and selected to install OpenOffice and NetBeans SE. No configuration and no restart. I launched NetBeans and it discovered there was an update to install. Installing this update updated the updater and did need to restart NetBeans. After the restart, the new updater found several updates and I installed them and once again restarted NetBeans. I selected Tools, Plugins and installed Groovy and Grails.

I haven't installed GlassFish or MySQL yet but all it takes to do so is run IPS and check a couple of checkboxes. I'm planning on waiting for Grails 1.1 to be released to finish off setting things up for development.

Monday, January 5, 2009

OpenSolaris Workstation Step 1

I didn't manage to get out of Tiger Direct while spending less than $150. I could have if I hadn't wanted mirrored hard drives. I asked for 250 GB hard drives for $50. They only had 1. For 2 matched 250 GB drives it would have cost $55 each, but... there was a 500 GB drive on sale for only $10 more. So given the choice between 250 GB for $55 or 500 GB for $65 it seemed simple to me. Then came the memory. It is very expensive to buy 1 memory module. The 2 GB of memory I wanted was $100, but... a two pack was only $55. Again an easy decision. Throw in SATA cables and it totaled $220. Almost 50% more than I planned to spend but I got 100% more capacity than I expected.

Unfortunately OpenSolaris doesn't have a device driver for the SATA controller on the motherboard. So if I mirror the drives via the BIOS they disappear. Leaving them alone in the BIOS works just fine and I have a TB of disk. If I had bought a single drive instead of the pair I could have stayed within the budget and wouldn't have lost anything. Time to learn if ZFS makes it easy to mirror the disk via software instead of hardware as I had planned.

Thursday, January 1, 2009

Privacy Policy

We use third-party advertising companies to serve ads when you visit this site. These companies may use information (not including your name, address, email address, or telephone number) about your visits to this and other websites in order to provide advertisements about goods and services of interest to you. If you would like more information about this practice and to know your choices about not having this information used by these companies, click here.


The DoubleClick DART cookie is used by Google in the ads served on this site. When users visit this site and either view or click on an ad, a cookie may be dropped on that end user's browser. The data gathered from these cookies will be used to help better serve and manage ads on this site and across the web.


Google, as a third party vendor, uses cookies to serve ads on this site. Google's use of the DART cookie enables it and its partners to serve ads to this site's users based on their visit to this site and/or other sites on the Internet. Users may opt out of the use of the DART cookie by visiting the Google ad and content network privacy policy.