GHads mind

developers thoughts & finds

Grails + HTML5 = Works

with 6 comments

Today while building a project to test MongoDB integration with Grails, I was curious whether Grails can emit HTML5. So I just tried to apply to great HTML5 Boilerplate (http://html5boilerplate.com/) template and it worked out wonderful. I just changed the default main.gsp, main.css and application.js and added some more files…

Of course some things need adaption:

- Using jQuery 1.4.4 instead of 1.4.2
– All hardcoded path replaced with ${resource(dir:’images’,file:’favicon.ico’)} for example
– Javascript libs can be embedded with <g:javascript library=”…” /> instead of a hard coded path, when you place your lib file into the web-app/js folder
– For JQuery Fallback loading the src can be exchanged with ${resource(dir:’js’,file:’jQuery-1.4.4.js’)} to avoid hard path coding
– Because of the templating/layout nature of Grails view, JavaScript loading of jQuery and the additional plugins.js and application.js (also via <g:javascript …>) cannot be pushed to the very end of the page, but must be loaded before any part of a page is been decoreted by the template (except for belatedpng)
– I reused the default spinner div, but cleared the default grails code in application.js and introduced two simple functions for showing and hiding the spinner
– For flexible layout I used the following construct plus two additional GSPs header.gsp and footer.gsp

<div id="container">
 <header>
  <g:applyLayout name="header" >
   <content tag="header">
    <g:pageProperty name="page.header" />
   </content>
  </g:applyLayout>
 </header>
 <div id="main">
  <g:layoutBody />
 </div>
 <footer>
  <g:applyLayout name="footer">
   <content tag="footer">
    <g:pageProperty name="page.footer" />
   </content>
  </g:applyLayout>
 </footer>
</div>

This enables the header.gsp and footer.gsp to include portions of the GSP page to show while being modular. The header/footer.gsp looks like:

<%@ page contentType="text/html;charset=UTF-8" %>
<b>Footer begin...</b>
<g:pageProperty name="page.footer" />
<b>Footer end...</b>

While a GSP page may looks like:

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
 <head>
  <title>my title</title>
  <meta name="layout" content="main">
 </head>
 <body>
  <content tag="header">
   … draw the header here…
  </content>
  <h1>Hello ${name}!</h1>
  <content tag="footer">
   … draw the footer here…
  </content>
 </body>
</html>

This allows for dynamic customizing of header/footer portions per page if desired, e.g. to render a status per page, which has its position and styling defined via the layout.

The rendered result of this looks like:

Header begin… … draw the header here… Header end…
Hello World!
Footer begin… … draw the footer here… Footer end…

The HTML5 Validator http://html5.validator.nu/ only complaints about the chrome frame but validates my rendered test page sourcecode without any moaning.

For CSS3, the integration was a nobrainer, I just added everything to main.css, removed all grails styles and used a @import url(styles.css); for a clear seperation of predefined and own styles at styles.css. The W3C Validator for CSS3 doen’t really like the main.css file, but as it comes directly from the boilerplate template I don’t really care. I can now start writing my pet project with HTML5 and CSS3 and can be sure to have maximum compatibility with yesterdays, todays and tomorrows browser and will update my code when a new version of the fantastic boilerplate template comes out.

Oh, for your own integration before going productive don’t forget to add expires to external resources, minify .css and .js files to one and enably GZIP transfer at your server. That should be all for a snappy cool HTML5/CSS3 site done with grails.

Have fun and greetings,
GHad

About these ads

Written by ghads

January 21, 2011 at 9:43 am

6 Responses

Subscribe to comments with RSS.

  1. [...] This post was mentioned on Twitter by HTML5 Boilerplate, Gerhard Balthasar. Gerhard Balthasar said: @boiler_plate just blogged about grails integration with boilerplate template: http://ghads.wordpress.com/2011/01/21/grails-html5-works/ [...]

  2. [...] HTML5 = Works « GHads mind Grails HTML5 = Works « GHads mindGrails HTML5 = Works « GHads mind. January 21, 2011 | admin | Tags: grails, html5 | No Comments [...]

  3. Hi GHad,

    Thanks for writing the post. Can you share the Grails project?

    Thanks,
    Chee Kin

    Lim Chee Kin

    February 6, 2011 at 10:24 am

    • No, sorry, the project is company internal. But the description of the process should be enough to recreate.

      Greetz,
      GHad

      ghads

      February 7, 2011 at 2:24 pm

      • pretty please ;)

        G

        March 10, 2011 at 4:42 pm

  4. you could publish a base projekt with just the basic steps leading to a start project … no need to publish your companies internal secrets ;)

    longhtml5

    April 4, 2011 at 10:38 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: