Wednesday, March 3, 2010

Nip/Tuck (not the show)

I call this part Nip/Tuck (not the show) because now we are going to make this thing look good. It will be in two parts.

We are going to add some javascript to make it look good and use a CSS framework. When I say look good is we are going to add effects that so popular with Web2.0 websites like slide, fade and curl. For this to happen we are going to use JQuery (and probably JQueryUI) and maybe 960.gs for our CSS framework.

I know that Tapestry ships with Prototype but *whine on* I don't like prototype *whine off*. I know I might get flamed for this but guess what, my project, my stuff, go away.

Let's start with JQuery....

Now, it absolutely makes no sense in recreating the wheel on how to add JQuery into our Tapestry project. With that, we are going use somebody's else's wheel: ioko + maven.

Ioko-tapestry-commons' project, a series of GPL licensed components to assist in building tapestry websites and the easiest way to use them is to add them is by using maven (or other build systems) dependencies. Remember, we are only interested in the JQuery lib. So, power up your Netbeans6.8 and open up your pom.xml and we simply add ioko as a project dependency. Refer to the ioko-tapestry-commons website if you get lost, somehow.

Just look for the dependencies section of the pom.xml and add these 5 line. That's right five lines!

 <dependency>  
   <groupId>uk.co.ioko</groupId>  
   <artifactId>tapestry-jquery<artifactId>  
   <version>1.5.0-jquery-1.3.2</version>  
  </dependency>  

The module builds on the tapestry-javascript stack support and automatically includes jQuery in your pages. It automatically calls jQuery.noConflict() so be aware that you will need to write any jQuery code using the 'jQuery' or map it to another short hand form to avoid conflicts with Scriptaculous.

Run with it and have fun with JQuery.