RichFaces modal dialog support

[Hedin]

I just want to share my experience of RichFaces modal dialog support without using Spring JS. Steps to introduce such support into your program (with facelets):

1) Request for popup from server:

RichFacesDialogAjaxHandler.java:

public class RichFacesDialogAjaxHandler extends RichFacesAjaxHandler
{
  private static final Logger log = Logger.getLogger(RichFacesDialogAjaxHandler.class);

  @Override
  public void sendAjaxRedirect
     (String targetUrl, HttpServletRequest request, HttpServletResponse response, boolean popup)
     throws IOException
  {
    if( popup && isRichFacesAjaxRequest(request, response) )
    {
      log.debug("Sending dialog request: " + targetUrl);

      response.setHeader("RichFaces-Modal-View", "true");
      response.setHeader("RichFaces-Redirect-URL", response.encodeRedirectURL(targetUrl));

      return;
    }

    super.sendAjaxRedirect(targetUrl, request, response, popup);
  }
}

2) Processing request on client:

dialog.js:

var ModalDialogSupport = {};

ModalDialogSupport.originalProcessResponse = A4J.AJAX.processResponse;

A4J.AJAX.processResponse = function(req)
{
  try
  {
    if( req.getResponseHeader("RichFaces-Modal-View") == "true" )
    {
      var url = req.getResponseHeader("RichFaces-Redirect-URL");

      LOG.debug("Request for modal dialog: " + url);

      var oncomplete = function(request, domEvt, data)
      {
        LOG.debug("Request for modal dialog is completed");

        for( var i = 0; i < ModalPanel.panels.length; i++ )
        {
          var pnl = ModalPanel.panels[i];
          if( pnl && pnl.markerId )
          {
            LOG.debug("Dialog id: " + pnl.markerId.id);
          }
        }

        LOG.debug("Last dialog id: " + ModalDialogSupport.lastDialogId);

        Richfaces.showModalPanel( ModalDialogSupport.lastDialogId );
      };

      A4J.AJAX.Submit
      ("_viewRoot", "modalPanel_region_form", null,
         {
           "actionUrl": url,
           "oncomplete": oncomplete
         }
      );

      return;
    }

    ModalDialogSupport.originalProcessResponse(req);
  }
  catch( e )
  {
    LOG.error("Error in processResponse: " + e.message);
  }
};

ModalDialogSupport.lastDialogId = undefined;

ModalDialogSupport.registerDialog = function(dialogId)
{
  ModalDialogSupport.lastDialogId = dialogId;
};

3) Support for dialogs on pages:

modalDialogSupport.xhtml:

<?xml version="1.0" encoding="UTF-8"?>

<ui:composition
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:c="http://java.sun.com/jstl/core"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:a4j="http://richfaces.org/a4j">

  <!--@elvariable id="modalLevel" type="java.lang.Integer"-->

  <c:set var="modalPanelRegionId" value="modalPanel#{modalLevel}_region"/>

  <c:if test="#{modalLevel==null}">
    <a4j:loadScript src="/scripts/dialog.js"/>

    <h:form id="modalPanel_region_form"/>
  </c:if>


  <a4j:outputPanel id="#{modalPanelRegionId}"/>
</ui:composition>

modalDialogTemplate.xhtml:

<?xml version="1.0" encoding="UTF-8"?>

<ui:composition
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:c="http://java.sun.com/jstl/core"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:a4j="http://richfaces.org/a4j"
   xmlns:rich="http://richfaces.org/rich">

  <!--@elvariable id="modalPanelTitle" type="java.lang.String"-->
  <!--@elvariable id="modalLevel" type="java.lang.Integer"-->

  <c:set var="modalPanelId" value="modalPanel#{modalLevel}"/>

  <a4j:outputPanel id="#{modalPanelId}_region" ajaxRendered="true">
    <script type="text/javascript">
      ModalDialogSupport.registerDialog('#{modalPanelId}');
    </script>

    <rich:modalPanel id="#{modalPanelId}" autosized="true" showWhenRendered="false">

      <f:facet name="header">
        <h:outputText value="#{modalPanelTitle}"/>
      </f:facet>

      <f:facet name="controls">
        <h:graphicImage
           value="/images/closePanel.png"
           style="cursor:pointer"
           alt="Close"
           onclick="#{modalPanelId}_cancelDialog();"/>
      </f:facet>

      <rich:hotKey
         key="esc"
         handler="#{modalPanelId}_cancelDialog();"/>

      <h:form id="#{modalPanelId}_form">
        <a4j:jsFunction
           name="#{modalPanelId}_cancelDialog"
           immediate="true"
           action="cancel"
           onbeforedomupdate="Richfaces.hideModalPanel('#{modalPanelId}');"
           />
      </h:form>

      <ui:insert name="modalPanelContent"/>
    </rich:modalPanel>

    <!-- Nesting dialog support -->
    <ui:include src="/WEB-INF/dialogs/modalDialogSupport.xhtml">
      <ui:param name="modalLevel" value="#{modalLevel+1}"/>
    </ui:include>

  </a4j:outputPanel>

</ui:composition>

4) Usage:

confirmDialog.xhtml:

<?xml version="1.0" encoding="UTF-8"?>

<ui:composition
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:c="http://java.sun.com/jstl/core"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:a4j="http://richfaces.org/a4j"
   xmlns:rich="http://richfaces.org/rich"
   template="/WEB-INF/dialogs/modalDialogTemplate.xhtml">

  <ui:define name="modalPanelContent">
    <table>
      <tr>
        <td align="center">
          <h:outputText value="Are you sure?"/>
        </td>
      </tr>
      <tr>
        <td align="center">
          <h:form id="toolbarForm">
            <table cellspacing="10">
              <tr>
                <td>
                  <a4j:commandButton id="okButton" styleClass="rich-button"
                                     value="OK" immediate="true" action="ok"/>
                </td>
                <td>
                  <a4j:commandButton id="cancelButton" styleClass="rich-button"
                                     value="Cancel" immediate="true" action="cancel"/>
                </td>
              </tr>
            </table>
          </h:form>
        </td>
      </tr>
    </table>
  </ui:define>

</ui:composition>

main_template.xhtml (somewhere in the page):

<ui:include src="/WEB-INF/dialogs/modalDialogSupport.xhtml"/>

flow.xml:

  <view-state id="confirmState" view="confirmDialog.xhtml" popup="true">
    <transition on="ok" to="confirmState2"/>
    <transition on="cancel" to="processCancelled" />
  </view-state>

  <view-state id="confirmState2" view="confirmDialog.xhtml" popup="true">
    <on-entry>
      <set name="viewScope.modalLevel" value="1" type="int"/>
    </on-entry>

    <transition on="ok" to="nextStage"/>
    <transition on="cancel" to="confirmState" />
  </view-state>

[nicolas.bg]

Great post,
thanks a lot

[jujuz]

Hi,

Do you know how I can get the RequestContext object in the AjaxHandler.

My problem :
I put attributes in the ViewScope, but when in the method

public void sendAjaxRedirect  ( String targetUrl, HttpServletRequest request, HttpServletResponse response, boolean popup )

none of my attributes are inside the request.

The request is merged with the ViewScope after the Ajax Handler call.

.--
Julien.

[Hedin]

Do you know how I can get the RequestContext object in the AjaxHandler.

Did you try RequestContextHolder.getRequestContext()?

[jujuz]

yes, NullPointerException ....

[Hedin]

yes, NullPointerException ....

Well, looks like RequestContext isn't alive at that point. You can try to pass parameters from flow by setting data in HttpServletRequest throught use requestParameters or externalContext variables:

<set name="requestParameters.ajaxParam" value="'paramValue'"/>

<set name="externalContext.requestMap.ajaxParam" value="'paramValue'"/>

[paulz]

Hi Hedin,

I have tried your code but instead of the RichFaces popup dialog a Spring Faces popup dialog appears with an error message:

Component to be rendered with id 'j_id88:j_id94' could not be found.

I put the files in the following directory structure:

web/WEB-INF/dialogs/modalDialogSupport.xhtml
web/WEB-INF/dialogs/modalDialogTemplate.xhtml
web/scripts/dialog.js
web/WEB-INF/flows/main/confirmDialog.xhtml
web/WEB-INF/flows/main/main-flow.xml

And I replaced the ajaxHandler property in flowController bean with the RichFacesDialogAjaxHandler class.

I also tried to create a subflow with the same result.

If you don't know what I am doing wrong could you please upload a sample application?

Thanks,

paul

[Hedin]

Hi Hedin,

I have tried your code but instead of the RichFaces popup dialog a Spring Faces popup dialog appears with an error message:

Component to be rendered with id 'j_id88:j_id94' could not be found.

If Spring Faces popup dialog appears, then you must be using sf:commandButton component - in this case there is spring ajax request issued. For RichFaces ajax you must use a4j:commandButton instead.

If you don't know what I am doing wrong could you please upload a sample application?

Don't have a time for this right now, sorry. May be later...

[vseibt]

...

If you don't know what I am doing wrong could you please upload a sample application?

Thanks,

paul

Hi Hedin,

I also would appreciate an example at least of the calling main page which contains main_template.xhtml and the flow-part for this page.

In my application I come to a blank window with the JS-error "ModalDialog is not defined" in firebug.

[paulz]

I had the same error, I replaced the following code in the Spring configuration:

<bean class="org.springframework.webflow.mvc.servlet.FlowHandlerMapping">
    <property name="flowRegistry" ref="flowRegistry" />
    <property name="defaultHandler">
        <bean class="org.springframework.web.servlet.mvc.UrlFilenameViewController" />
    </property>
</bean>

with:

<bean class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
    <property name="mappings">
        <value>
            /main=flowController
        </value>
    </property>
    <property name="defaultHandler">
        <bean class="org.springframework.web.servlet.mvc.UrlFilenameViewController" />
    </property>
</bean>

I don't know how to integrate flowController in the first bean - FlowHandlerMapping.

I still consider using it because it works properly only in Firefox and Internet Explorer.

Paul