GHads mind

developers thoughts & finds

Archive for January 2011

HTML5 <time> microformat with Grails (UTC dates…)

with 2 comments

As I mentioned last post I’m doing a little pet project with Grails, HTML5 and MongoDB. Now I wanted to include the rendering of dates in StackOverflow style, something like: 5 minutes ago, about an hour ago and such. As HTML5 defines a <time> microformat I naturally wanted to use this one today and also found a nice jQuery plugin to convert times into the format I like: timeago. This one also includes support for the <time> tag by default.

But there’s a catch (as always…). The <time> tag and the plugin depend on ISO8601 UTC dates, which MongoDB stores nicely. But by getting data from MongoDB, you have your java.util.Date class and trouble starts, as there is no default way of formatting and recalculating dates to UTC with one call. Else I could have used the Grails included formatDate tag.

So I first searched for an easy way to format a Date instance to ISO8601 UTC format. Luckily I found the following post that shows how to set UTC for a formatter and the right format string for ISO8601. As this is a two line call and I didn’t want to make a Utils-Class for representation only to call it from the controller and having a String for rendering instead of a Date. And I didn’t want to include the formatter code on every page, I came up with a Grails Filter solution.

By including this class in grails-app/conf:

class MyFilters {
	def filters = {
		addUtils(controller:'*', action:'*') {
			after = {
				// add formatter for UTC dates in ISO8601 format
				SimpleDateFormat ISO8601UTC = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'")
				ISO8601UTC.setTimeZone(TimeZone.getTimeZone("UTC"))
				params["_UTC"] = ISO8601UTC
			}
		}
	}
}

I have a new formatter instance inside the params ready to use for formating dates to UTC in the correct way for the tag:

<time class="timeago" datetime="${params._UTC.format(created)}">${created}</time>

I used an underscore to seperate the utils from regular paramaters used to render the site. For now I don’t care about a new instance for every call, but if you care, just make the formatter static and reduce the scope of the addUtils Filter to only the pages that need it.

Greetings,
GHad

Written by ghads

January 26, 2011 at 3:10 pm

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

Written by ghads

January 21, 2011 at 9:43 am

Happy new year 2011!

leave a comment »

I wish you a good start and an even better year 2011!

I hope to blog more regulary this year with various themes and interesting topics. So stay tuned…

Greetz, GHad

Written by ghads

January 3, 2011 at 10:30 am

Posted in Uncategorized

Tagged with