Page and Component Modal with a4j:status

I haven't really had a chance to look at RichFaces OOB modal, but I had written this one over a year ago when Ajax4JSF was still on

Due to an overwhelming interest in the previous article I decided to spend some time developing this modal into a demo application and to add some new features. Modals are good to some and hated by others, they have their place and can certainly add some cleaner usability to any website. The cool thing about a modal window is that the user doesn't feel like they are being redirected to another page. They can still keep their focus on the content at hand while multitasking and spawning another workflow.

So what about component based modals? We know good and well what a page-locking modal is, but has anyone tried to implement a modal that only covers the area of the active ajax component?

This is a component based modal. It basically blocks out the activated component per ajax request.

This demo is already setup and ready to go, check it out here and the instructions on getting it running are in the home page description. This is the same demo I used in my previous Running Seam on Tomcat... article - now updated to the latest version of Seam and cleaned up a bit (and also put it under Google code vcs).

And that's not all! To make life even easier I wrapped the modal(s) up in a nice and neat Facelets component. The modals also allow for unlimited modals-per-page. Meaning that you can have 10000 modals on one page without conflicts ;). Here's how you use it:

<hc:modal modalId=“loading-modal” modalContainerId=“loading-modal-msg” hidden=“true” width=“129px”>

Content that you want in the modal goes here… </hc:modal>

… then put the a4j:status tag inside of an a4j:region. Note the javascript methods being called. You could use these in any onclick event that needs to present a modal.

 <a4j:status for=“stat1” forceId=“true” id=“ajaxStatus”

onstart=alertModal(‘loading-modal’,‘loading-modal-msg’); onstop=hideContentModal(‘loading-modal’,‘loading-modal-msg’);>

<f:facet name=“start”> </f:facet> </a4j:status>

This is a work in progress and maybe some day I will cleanup my js, explain why I did things the way I did them, and package this up in a component jar. For now this is it.