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();

Create your Dialog component

Below you see the Dialog-class which lives in the components package:

@Import({ library = "context:js/bootstrap.js", stylesheet = "context:css/bootstrap.css" })
public class Dialog implements ClientElement {

 @Parameter(value = "prop:componentResources.id", defaultPrefix = BindingConstants.LITERAL)
 private String clientId;

 @Parameter(required = true)
 @Property
 private Block content;

 @Property
 @Parameter(required = false, defaultPrefix = "literal")
 private String title;

 @Inject
 private JavaScriptSupport js;

 @Override
 public String getClientId() {
  return clientId;
 }

 @AfterRender
 private void afterRender() {
  js.addScript("$j('#%s').modal()", getClientId());
 }

}

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:





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:

public class MyPage {
     
     @Inject
     private Block dialogBlock;

     public Object onAction() {
           return dialogBlock;
     )
}

Open Dialog





   
       
           Put some nice content in here, maybe a grid or other components...
       
   

I'm sure there is still some potential to make this even more compact and configurable but for a start not too bad I'd say.

No comments:

Post a Comment