Wednesday, 7 November 2012

Tapestry5 & Bootstrap: A Modal Dialog

Modal Dialogs are a nice thing that can be very helpful in a web application. I was looking for a straight forward solution to get such thing into our Tapestry5 app and stumbled accross a blog post that explained how to integrate a modal dialog with Tapestry5: Tawus Modal Dialog.

This approach worked well, however it contains some code to write and maintain.

Now, some time later we have the awsome Bootstrap CSS Framework which comes along with a Modal Dialog component which fits pretty well into Tapestry5 with less coding:

What you need

Bootstrap CSS + JS files on the classpath

jQuery Javascript Library or the tapestry-jquery module

Tapestry5 & jQuery

If you do not like the tapestry-jquery module as a dependency it's no problem to just include the latest and greatest jQuery.js - it's advised to use it in no-conflict mode. In the example below I assume you called: $j = jQuery.noConflict();

This is basically a very simple client element that contains a title and a content block - both getting set as parameter. Finally a small piece of Javascript code that will trigger the dialog once loaded. Let's look at the Dialog.tml file:

${title}

I copied this straight from the Bootstrap example page and placed my title and the content block as appropriate. That's it - the Dialog is done so far. Now let's use it.

Using the Dialog

In our application the Dialog should pop-up when a link is clicked to present some further information/options to the user: so our page contains an ActionLink that will update a zone. The action will simply return a block, in which we are using our dialog: