Announcement Announcement Module
Collapse
No announcement yet.
RichFaces modal dialog support Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • #16
    Originally posted by paulz View Post

    ...

    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.

    Comment


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

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

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

      Comment


      • #18
        Originally posted by vseibt View Post
        In my application I come to a blank window with the JS-error "ModalDialog is not defined" in firebug.
        It's because if you are not have any modalPanel in your page - richfaces didn't include modal panel support script. To avoid this you can include dummy panel in modalDialogSupport.xhtml:

        HTML Code:
          <a4j:outputPanel id="#{modalPanelRegionId}">
            <rich:modalPanel rendered="false"/>
          </a4j:outputPanel>
        Anyway, I attached sample web application with modified versions of script & templates (extracted from working project). I tested it in Tomcat 6.0.18 - seems to works.
        Last edited by Hedin; Feb 23rd, 2009, 11:10 AM.

        Comment


        • #19
          Hi Hedin,

          In the same way, do you know how I can overide 11.5.2. Handling Ajax Requests with Spring MVC + Spring Web Flow to implements my own "render".
          Code:
              <on-entry>
                  <render fragments="hotelSearchForm" />
              </on-entry>
          I want to catch the fragments value.

          Comment


          • #20
            Hi Hedin,

            thanks a lot for uploading your sample application, it helped a lot.
            For test I extended some things we need in our application like a dialog train in an overlay and it works fine.

            Now I'm trying to integrate this in our webapp and it's nearly done, only the original page behind the dialog disapears, but I think we will solve this.

            Comment


            • #21
              Originally posted by jujuz View Post
              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.

              Comment


              • #22
                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;
                  }
                }

                Comment


                • #23
                  Originally posted by Hedin View Post
                  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

                  Comment


                  • #24
                    Any ideas?

                    Comment


                    • #25
                      Justification

                      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

                      Originally posted by Hedin View Post
                      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>

                      Comment


                      • #26
                        Some issues within richfaces 3.3.3.Final

                        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?

                        Comment


                        • #27
                          Richfaces 3.3.3.Final + JSF 2

                          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"

                          Comment


                          • #28
                            Richfaces 3.3.3 and Error in processResponse: options is null

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

                            Comment


                            • #29
                              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

                              Comment

                              Working...
                              X