Over a million developers have joined DZone.

A Modal Dialog For Tapestry

· Java Zone

Microservices! They are everywhere, or at least, the term is. When should you use a microservice architecture? What factors should be considered when making that decision? Do the benefits outweigh the costs? Why is everyone so excited about them, anyway?  Brought to you in partnership with IBM.

As Tapestry does not provide a Dialog Box, let us see how difficult(or easy) it is to create one on our own. We will use ModalBox as it has an MIT license and it is written in prototype (Soon this won’t be a criteria for choosing a script as Tapestry is going to be prototype independent). The ModalBox script is very easy to use. There is a ModalBox.show() method which displays a dialog box. It takes a dom element and configuration options as parameters. If you want to create a wizard just keep on using the same method inside the dialog box. There is also a ModalBox.hide() method to hide the dialog.

Our script is more than just a call to ModalBox.show(). It needs to call the event handler using a event URL and use the response to create an element which it will display in the dialog box. It also provides an option to update a zone after closure of the dialog box.

Tapestry.Initializer.setupModalDialog = function(params)
   // Setup zone
   var element = $(params.id);
   $T(element).zoneId = params.zone;

   var showModalbox = function()
         var loadContentWithScripts = function(transport)
            var node = new Element('div').update(transport.responseJSON.content);
            params.options.onContentLoaded = function()
               Tapestry.loadScriptsInReply(transport.responseJSON, function() {});

            params.options.afterHide = function()
                  var zoneManager = Tapestry.findZoneManager(element);

            Modalbox.show(node, params.options);

         Tapestry.ajaxRequest(params.openLink, {
            method : 'get',
            onSuccess : loadContentWithScripts

   Event.observe($(params.id), params.event, showModalbox);


The script function takes the following parameters

  • id : id of the element
  • event: client event on the element which will trigger the event
  • openLink: link to be called to create the dialog
  • closeLink: link called after the dialog is closed
  • zone: zone to be updated after dialog is closed
  • options: other options to be passed to ModalBox.show() e.g. width, height, title

The script links client event of the element to a method which makes an ajax based request to get the dialog box contents from the server and then calls the Tapestry.loadScriptsInReply() function to load any inline scripts.

The parameters are passed to the script by our ModalDialog component class.

@Import(library = {
      } , 

      stylesheet = "modalbox/modalbox.css"
public class ModalDialog implements ClientElement
    * Javascript id, if not supplied is auto-generated
   @Parameter(value = "prop:componentResources.id", defaultPrefix = BindingConstants.LITERAL, allowNull = false)
   private String clientId;

    * Client event that will trigger the modal dialog
   @Parameter(value = "click", defaultPrefix = BindingConstants.LITERAL, allowNull = false)
   private String clientEvent;

    * Zone to update when dialog is closed
   @Parameter(defaultPrefix = BindingConstants.LITERAL)
   private String zone;

    * Context to be passed to the page
   private Object[] context;

   private JavaScriptSupport javaScriptSupport;

   private ComponentResources resources;

   private String assignedClientId;

   public ModalDialog()


   ModalDialog(JavaScriptSupport javaScriptSupport,
         ComponentResources resources)
      this.javaScriptSupport = javaScriptSupport;
      this.resources = resources;

   void setupRender()
      assignedClientId = javaScriptSupport.allocateClientId(clientId);

   void beginRender(MarkupWriter writer)
      writer.element("a", "href", "#", "id", getClientId());

   void afterRender(MarkupWriter writer)

   void addJavaScript()
      JSONObject params = new JSONObject();

      params.put("id", getClientId());
      params.put("event", clientEvent);
      params.put("openLink", getPageLink());
      params.put("closeLink", getCloseLink());
      params.put("zone", zone);
      params.put("options", getInformalParametersAsJSON());

      javaScriptSupport.addInitializerCall("setupModalDialog", params);

   private JSONObject getInformalParametersAsJSON()
      JSONObject modalboxOptions = new JSONObject();
      for(String parameter : resources.getInformalParameterNames())
           resources.getInformalParameter(parameter, String.class));
      return modalboxOptions;

   private Object getPageLink()
      Link link = resources.createEventLink(TawusAddonsEventConstants.SHOW_DIALOG, context);
      return link.toAbsoluteURI();

   private String getCloseLink()
      return resources.createEventLink(

   public String getClientId()
      return assignedClientId;

public class TawusAddonsEventConstants
   public static final String SHOW_DIALOG = "showDialog";

   public static final String CLOSE_DIALOG = "closeDialog";

The component creates an anchor tag and calls the javascript function with proper parameters. The informal parameters are used to supply ModalBox with other configuration options.


<a t:type='tawus/modaldialog' t:zone='closeZone'>Open Dialog</a>
<div t:type='zone' t:id='closeZone'>Call this zone on closure</div>

<t:block t:id='modaldialogContents'>
Some content
private Block modalDialogContents;

public Block onShowDialog()
   return modalDialogContents;

public Zone onCloseDialog()
   return closeZone;

From http://tawus.wordpress.com/2011/07/02/a-modal-dialog-for-tapestry/

Discover how the Watson team is further developing SDKs in Java, Node.js, Python, iOS, and Android to access these services and make programming easy. Brought to you in partnership with IBM.


Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}