Modal Capsules For Dynamic Web Applications

WebRocketX makes implementing modal dialogs simple. Modals are nothing more than standard Meta Capsules containing layout that allows them to float above the page. The framework does the rest of the heavy lifting by managing the modals z-index and preventing users from interacting with layout in background.

Implementing a Modal Capsule

Including content in a modal capsule will result in the content being floated above the background page. The majority of this floating affect is simply done using HTML styles. However, the WebRocketX framework completes the modal behavior by placing an invisible blocking layer behind the modal popup which keeps the user from interacting with the background page. Additionally, the framework places each consecutive modal page on a higher z-index so that it is possible to have an endless number of modal layers. Clean well defined modal architecture is a hallmark of rich user interface desktop operating system applications. The goal of WebRocketX is to make writing web applications that are just as rich and user friendly as desktop applications into a simple, and straighforward process.

WebRocketX also adds each modal target to the browser stack, which means the back button on the browser will roll backwards through the modal hierarchy with each click.

Since WebRocketX operates within standard javascript and HTML, it works perfectly with JQuery plugins, so making these modal layers draggable and resizeable is simple.

Shown below is an HTML example of content being delivered in a modal capsule. The modal capsule only has three required attributes, the id, the class, and the capsuleType. The capsuleType must be set to "modal" for the framework to handle this as a modal capsule. Other Meta Capsule attributes can also be used in the modal capsule. The developer's content is wrapped in 3 divs to float it using WebRocketX styles. The framework will register Jquery UI dragdrop javascript on the capsule automatically to make it dragable.

After the HTML example are shown examples of how to template your teams modal capsules using JSP, if that is desired. Notice how the developer content is set in the modal capsule template, and then the modal capsule template extends the meta capsule template. A development team should have just one modal capsule template and one meta capsule template for their entire web application. The rest of their development time can be spent efficiently setting them with content. Keep in mind though, that all of these server side templates are just conveniences that help the developer standardize their layout. If the developer prefers to just code straight HTML they are also free to do that, as long as there content is wrapped in capsule divs for delivery through the WebRocketX api.

HTML Code For A Modal Capsule

       
<!-- this is the capsule, modal capsules only have three required attributes --> 
<div id="myModalId" class="metaCapsule" capsuleType="modal">
     <!-- these 3 divs are styling to float the content -->
     <div id="dialogLayer" class="BDT_Dialog_Layer">
        <div class="BDT_Dialog_Center">
            <div class="BDT_Dialog_Decoration">            
                <!-- this is where your content starts -->        
                <table>
                    <tr>
                        <td width="300" height="300" align="center">
                            <span style="font-size:18pt;">Modal10</span>                                        
                            <br/><br/>                
                            <a href="#" onclick="dtBack(); return false;">Back</a>
                        </td>
                    </tr>
                </table>                         
            </div>
        </div>
    </div>        
</div>

HTML/JSP Code showing the usage of a Modal Capsule Template

        
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<c:set var="modalCapsuleContent" scope="page">   
    <table>
        <tr>
            <td width="300" height="300" align="center">
                <span style="font-size:18pt;">Modal10</span>                                        
                <br/><br/>                
                <a href="#" onclick="dtBack(); return false;">Back</a>
            </td>
        </tr>
    </table>        
</c:set> 

<c:set var="capsuleId" value="modal1" scope="page"/>            
<c:set var="capsuleType" value="modal" scope="page"/>              
<%@ include file="/jsp/capsules/modalCapsule.jsp" %>

Modal Capsule Template

Below is an example Modal Capsule Template. Notice that it mostly consists of a Meta Capsule that wraps layout. The rest of the magic is a combination of CSS and Jquery UI Drag and Drop. To see the CSS and the usage of jquery UI in the callbacks feel free to download the Demo Application.

HTML/JSP Code showing a Modal Capsule Template

        
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<c:set var="metaCapsuleContent" scope="page">
    <div id="dialogLayer" class="BDT_Dialog_Layer">
        <div class="BDT_Dialog_Center">
            <div class="BDT_Dialog_Decoration">                    
                ${modalCapsuleContent}                         
            </div>
        </div>
    </div>        
</c:set> 
   
<c:set var="capsuleType" value="modal" scope="page"/>           
<%@ include file="/jsp/capsules/metaCapsule.jsp" %>     
<c:set var="modalCapsuleContent" value="" scope="page"/>