Spring Webflow Popup example in JSP

Spring version: Spring webflow 2.0.3 , Spring MVC 3.0.5

1. In the parent jsp page add the following java script

 <script type="text/javascript" src="<c:url value="/resources/dojo/dojo.js" />"> </script>  
 <script type="text/javascript" src="<c:url value="/resources/spring/Spring.js" />"> </script>  
 <script type="text/javascript" src="<c:url value="/resources/spring/Spring-Dojo.js" />"> </script>  
 <link type="text/css" rel="stylesheet" href="<c:url value="/resources/dijit/themes/tundra/tundra.css" />" />  
 <script type="text/javascript">  
      Spring.addDecoration(new Spring.AjaxEventDecoration({                           
                                    elementId: 'popupbutton',  
                                    formId: 'myform',  
                                    event: 'onclick',  
                                    popup: true  
            }));            
 </script>  

                                                           Listing: 1

Replace the following attributes with your values :-

elementId : is the Id of the button /link which opens the pop up
formId : is the Id of the form where the pop up button belongs to

Sample Code from page:

 <form:form id="myform">  
 <input type="button" name="_eventId_review" id="popupbutton" value="Open Popup"  
  onclick="openPopupPage()" />  
 </form:form>  
 function openPopupPage() {  
    window.location.href = '${flowExecutionUrl}&_eventId=review';  
 }  

                                                             Listing: 2

Make sure to have org.springframework.js-2.0.3.RELEASE jar. This jar contains the Spring.js, Dojo.js ,Spring-Dojo.js  and the css referenced in the script tag

2. Modify Web.xml

In the above jsp code (Listing:1)you can see that we are referring to javascripts (dojo.js , Spring.js etc ) Those requests to the java scripts are handled by Resource Servlet in spring. So add the following servlet entry in web.xml to map the requests to java scripts to the resource servlet.

  <servlet>  
   <servlet-name>Resource Servlet</servlet-name>  
   <servlet-class>org.springframework.js.resource.ResourceServlet</servlet-class>  
 </servlet>  
 <servlet-mapping>  
   <servlet-name>Resource Servlet</servlet-name>  
   <url-pattern>/resources/*</url-pattern>  
 </servlet-mapping>  

                                                               Listing: 3

3. Modify flowregistry.xml

Add popup="true" in the view-state of the popup page

 <view-state id="review" view="review" model="reviewModel" popup="true">  
 </view-state>  

Listing: 4

The pop up page is a normal jsp page. There is no special code to be put in the pop up page to open it as a pop up. The above steps I took from my working code.

Note: In IE8 and IE9 , it will not open as a pop-up , if we try to access the page using http://localhost:8080. You have to replace localhost with IP address or computer-name. This is because IE8 and IE9 handles localhost separately.

Hope this helps.