Grails + HTML5 = Works

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

Written by ghads

January 21, 2011 at 9:43 am

Posted in Groovy Development, Web development

Tagged with cool, css3, grails, groovy, html5, web 2.0, Web development

6 Responses

Subscribe to comments with RSS.

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

Tweets that mention Grails + HTML5 = Works « GHads mind -- Topsy.com

January 21, 2011 at 4:55 pm

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

Grails HTML5 = Works « GHads mind | Grails.Info

January 21, 2011 at 11:14 pm

Reply
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

Reply
- 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
  
  Reply
  - pretty please 😉
    
    G
    
    March 10, 2011 at 4:42 pm
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

Reply

GHads mind