RichFaces modal dialog support

Quote:

---

Originally Posted by jujuz

Code:

---

    <on-entry>
        <render fragments="hotelSearchForm" />
    </on-entry>

---

I want to catch the fragments value.

---

Here is a snip from the implementation of render tag (class org.springframework.webflow.action.RenderAction):

Code:

---

context.getFlashScope().put(View.RENDER_FRAGMENTS_ATTRIBUTE, fragments);

---

As you can see, a list of the fragments is remembered in the flash scope variable (named "flowRenderFragments") to use it at render stage.

Example for integration flow "render fragments" with RichFaces:

Flow:

HTML Code:

---

<render fragments=":clientForm:field" />

---

faces-config.xml:

HTML Code:

---

<lifecycle>
  <phase-listener>mypackage.AjaxAreasToRenderPhaseListener</phase-listener>
</lifecycle>

---

AjaxAreasToRenderPhaseListener.java:

Code:

---

public class AjaxAreasToRenderPhaseListener implements PhaseListener
{
  private static final Logger log = Logger.getLogger(AjaxAreasToRenderPhaseListener.class);

  public void beforePhase(PhaseEvent event)
  {
    RequestContext context = RequestContextHolder.getRequestContext();

    if( context==null )
      return;

    Object fragments = context.getFlashScope().get(View.RENDER_FRAGMENTS_ATTRIBUTE);

    if( fragments!=null )
    {
      Set<String> fragmentsToRender = AjaxRendererUtils.asSet(fragments);
      log.debug("Ajax fragments to render: "+fragmentsToRender);

      AjaxContext ajaxContext = AjaxContext.getCurrentInstance();
      ajaxContext.getAjaxAreasToRender().addAll(fragmentsToRender);
    }
  }

  public void afterPhase(PhaseEvent event) {}

  public PhaseId getPhaseId()
  {
    return PhaseId.RENDER_RESPONSE;
  }
}

---

Quote:

---

Originally Posted by 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):

---

Hi Hedin,

I wasn't able to run your example. I've configured my application as you suggested however I'm facing same error all the time (a4j debug):

Code:

---

debug[12:31:48,891]: Have Event [object Object] with properties: target: [object HTMLInputElement], srcElement: undefined, type: click
debug[12:31:48,892]: Query preparation for form 'j_id1' requested
debug[12:31:48,893]: Append hidden control j_id1 with value [j_id1] and value attribute [j_id1]
debug[12:31:48,893]: Append hidden control javax.faces.ViewState with value [e1s1] and value attribute [e1s1]
debug[12:31:48,894]: parameter j_id1:confirm with value j_id1:confirm
debug[12:31:48,894]: Look up queue with default name
debug[12:31:48,895]: NEW AJAX REQUEST !!! with form: j_id1
debug[12:31:48,895]: Start XmlHttpRequest
debug[12:31:48,897]: Request state : 1
debug[12:31:48,898]: QueryString: AJAXREQUEST=_viewRoot&j_id1=j_id1&javax.faces.ViewState=e1s1&j_id1%3Aconfirm=j_id1%3Aconfirm&
debug[12:31:48,902]: Request state : 1
debug[12:31:48,938]: Request state : 2
debug[12:31:48,940]: Request state : 4
debug[12:31:48,940]: Request end with state 4
debug[12:31:48,941]: Header Content-Type not found, search in <meta>
debug[12:31:48,941]: Response with content-type: null
debug[12:31:48,941]: Full response content:
debug[12:31:48,942]: A4J.AJAX.processResponse: [object Object]
debug[12:31:48,942]: Request for modal dialog: /app/web/main?execution=e1s8
debug[12:31:48,943]: Have Event [object Object] with properties: target: undefined, srcElement: undefined, type: undefined
debug[12:31:48,943]: Query preparation for form '_viewRoot' requested
error[12:31:52,126]: Error in processResponse: options is null

---

This error occurs during

Code:

---

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

---

method processing. It looks like the response content isn't as expected? Have you faced similar issue?

My configuration is:
spring 2.5.6
spring web flow 2.0.8
rich faces 3.3.2.SR1

Any help is really appreciated!

Regards,
Krzysztof

Any ideas?

Hi,

Can you please refresh us as to why you need to go to this trouble to produce rich:modalPanel's? I have no problems raising my popups without using Spring Faces or extending ajaxhandler as per below. AFAIK, I am loading the applicable richfaces js files.

My larger concern is that the rerendering precision is not very good as it
requires one to use

Code:

---

<a4j:outputpanel>'s

---

with all ajaxrendered attributes set to true, which implies that all events are processed everywhere which is expensive.

Any thoughts?

Thanks,
Henry

Quote:

---

Originally Posted by 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:

Code:

---

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:

Code:

---

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:

HTML Code:

---

<?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:

HTML Code:

---

<?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:

HTML Code:

---

<?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):

HTML Code:

---

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

---

flow.xml:

HTML Code:

---

  <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>

---

---

Thanks a lot to Hedin for the great example. I've been using the same approach which i've found in his example SWFRichFaces.zip. Everything's been ok, until i moved to new version of RF 3.3.3.Final. Is there any solution?

After having debugged i've found that a js error is thrown avoiding dialog.js to send ajax request:
if( finishRequest )
{
// Get updates from server (for messages, etc.)
A4J.AJAX.Submit
("_viewRoot", "modalPanel_region_form", null,
{
"status": req.options.status,
"actionUrl": url,
"oncomplete": dumpPanels,
"parameters": {}
}
);
...........

Exception looks like:
description "'submitByForm' is null or not an object"
message "'submitByForm' is null or not an object"
name "TypeError"

After a lot of tests I found of, that the number of parameters of A4J.AJAX.Submit() has changed.

So after updating the curresponding part at dialog.js it also works with RichFaces 3.3.3.CR1.
Also I tested it with Spring 3.0.3.RELEASE and Spring Web Flow 2.0.9.RELEASE successfully.

Here is the update for dialog.js:

Code:

---

   
if( finishRequest )
    {
      // Get updates from server (for messages, etc.)
      var options = {'status':req.options.status,'actionUrl':url,'oncomplete':dumpPanels,'parameters':{}};
      A4J.AJAX.Submit('modalPanel_region_form', null, options);

      req.doFinish();
      return;
    }

---

please help me with modalpanel....i have a page.xhtml and a a4j:commandButton and when i click show the modalpanel but when i want to close the modal panel with the function RichFaces.hideModalPanel i got an error....... my error is the follow..

not suppported the modalPanel.js.jsf please helpme