Tapestry5 Setup with HTML5 and jQuery

Partly learning from past experiences, but mainly because of future requirements regarding mobile development, I am looking to create a Tapestry5 project setup that uses jQuery instead of Prototype and can output HTML5.

Make Tapestry5 accept HTML5 Doctype

Tapestry5 uses a Parser to validate the correctness of documents. They have to be proper XML and contain a DTD. This is great, as it makes us to write proper web documents. The issue with HTML5 is that it does not contain a DTD. HTML5 is kind of a step back and two steps forward. It’s less strict than XHTML (like HTML4) but adds loads of useful stuff from the “real world” by maintaining backwards compatibility. For a short but very good introduction I recommend Jeremy Keith “HTML5 for Web Designers”.

To be able to use HTML5 with Tapestry5 there is a workaround documented in Tapestrys issue database as “Allow HTML5 doctype to be printed“. It includes a little patch that is applied to the org.apache.tapestry5.dom.DTD class. I did create a copy of that class in my project, applied the patch and am running happily HTML5 since then. All I need to do is to keep an eye on updates on that class to not miss any, possibly crucial, changes.

 

Replacing Prototype with jQuery

By default Tapestry 5 ships with the Prototype/Scriptaculous JS Stack. Though there is no issue with that, jQuery simply seems to be the thing right now, with a much more lively development and broad acceptance among users. All that aside, specifically the jQuery Mobile Framework has caught my attention. It is optimized for touchbased Smartphones such as the iPhone, Android, Windows 7 and more. Since it is Browser based, you will be able to ship a product for all those phones without too much of customization involved. Simply use your good old and proven Web development knowledge.

So, back to Tapestry5. There has been a clever enhancement that replaces prototype completely with jQuery. Most of the components do work out of the box, for more details read the got5 tapestry5-jquery project page. Follow the instructions on that page for including their dependency into your pom.xml (I did replace version 1.0.0-SNAPSHOT with version 1.1.0-SNAPSHOT) And that’s it!