Announcement Announcement Module
Collapse
No announcement yet.
JSF + Webflow popup question Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • JSF + Webflow popup question

    Hi there,

    I am trying to get a popup in Spring Webflow working but just can't seem to get it right.
    I am currently working with JSF 2.0, Webflow 2.3.0 CI-29 (although I also tried the same with v2.2.1) and primefaces 2.2 RC2.

    The problem is that nothing happens when I click the commandLink that is supposed to open the popup view. When I specify a non-existing page fragment for the on-entry event then a popup window appears with the stack trace and the respective error message that the element can not be found however when I use a (seemingly) valid element then simply nothing happens.
    I simplified by example to just the popup element so I can illustrate my problem. Below is the code of the index page, the popup page and the respective flow definition:


    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml"
    	xmlns:ui="http://java.sun.com/jsf/facelets"
    	xmlns:f="http://java.sun.com/jsf/core"
    	xmlns:h="http://java.sun.com/jsf/html"
    	xmlns:sf="http://www.springframework.org/tags/faces"
    	xmlns:p="http://primefaces.prime.com.tr/ui">
    	<h:head></h:head>
    	<h:body style="background-color: gray">
    		<p>
    			<h:form>
    				Indexpage<br/>
    				<p:commandLink action="openPopup" value="Open Popup" ajax="true" />
    			</h:form>
    		</p>
    	</h:body>
    </html>

    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml"
    	xmlns:ui="http://java.sun.com/jsf/facelets"
    	xmlns:f="http://java.sun.com/jsf/core"
    	xmlns:h="http://java.sun.com/jsf/html"
    	xmlns:sf="http://www.springframework.org/tags/faces"
    	xmlns:p="http://primefaces.prime.com.tr/ui">
    
    	<h:form id="popupFragment">
    		<h:outputText id="baz" value="test" />
    	</h:form>
    
    
    </html>
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <flow xmlns="http://www.springframework.org/schema/webflow"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://www.springframework.org/schema/webflow http://www.springframework.org/schema/webflow/spring-webflow-2.0.xsd">
    
        <view-state id="indexPage" view="indexPage.xhtml" >
    
    		<transition on="openPopup" to="popupPage" >
    		</transition>
    
            <transition on="cancel" to="cancel"/>
        </view-state>
    
    	<view-state id="popupPage" popup="true" view="popupPage.xhtml">
    	    <on-entry>
    	        <render fragments="popupFragment"  />
    	    </on-entry>
    	    <transition to="indexPage" />
    	</view-state>
    	
        <end-state id="cancel" />
    
    </flow>
    I also tried to use <sf:commandLink/> instead of <p:commandLink/> but the result appears to be the same.

    I am a bit lost now and don't know why nothing is shown (not even any error message), so any help would be much appreciated.

    Thanks, Frederik

  • #2
    Hi fdd,

    I'm having the same problem. Did you figure out how to solve it?

    Regards.

    Comment


    • #3
      No, unfortunately I never figured out why this does not work.

      Comment


      • #4
        I recently figured out how to do it thanks to webflow doc and the example provided.

        This solution works with Primefaces 2.2.1 and WebFlow 2.3.0 and is used by springfuse.

        Note: in your flow, no need to declare fragments or to use the 'popup' view attribute...

        1/ The flow that launch the popup must be started in embedded mode (see doc for more details), for example:http://localhost:8080/popup/app/account?mode=embedded

        2/ In your view, make sure you define an empty dialog, as below...

        HTML Code:
        <h:form id="form">
            <p:dialog widgetVar="panelPopupDialog" modal="false" height="500" width="900">	
                <p:outputPanel id="panelPopupContent">
                </p:outputPanel>
            </p:dialog>
              ....skip.... 
        </h:form>
        Now, the idea is to fill the panelPopupContent panel with your next view content... The view may belong to your current flow or to a subflow.
        Your view content structure must match the 'form : panelPopupContent' id, here is an example:

        HTML Code:
        <f:view xmlns="http://www.w3.org/1999/xhtml" 
                    ....
        	    contentType="text/html" encoding="UTF-8">
        
            <h:form id="form">
                <p:panel id="panelPopupContent">
                        your 'popup' view content here....		
                </p:panel>		
            </h:form>
        </f:view>
        3/ Now, we need to perform the action that will render the second view in the popup present in the first view. To do so, we must make an ajax request, render the panelPopupContent zone and display the dialog. Here we go:

        HTML Code:
        <h:form id="form">
            <p:dialog widgetVar="panelPopupDialog" modal="false" height="500" width="900">	
                <p:outputPanel id="panelPopupContent">
        	</p:outputPanel>
            </p:dialog>
            
            ...... 
        
            <p:commandButton	
                action="theaction" process="@form"
                update="form:panelPopupContent"
                oncomplete="panelPopupDialog.show()"
                image="iconSearch"
                title="${msg.search}"/>
        </h:form>
        Hope this helps,
        Nicolas.

        Comment


        • #5
          Thank you Nicolas. That solution works fine. I have used that trick before but with Richfaces instead of Primefaces.

          Actually I have figured out why I had this problem using the popup attribute of Webflow. I'm using Richfaces and the RichFacesAjaxHandler was detecting all the Ajax requests as A4J requests, including the requests made by the sf:commandLink, and it was ignoring the popup attribute. So what I did is add a "bypassRichfaces" parameter to the sf:commandLink.

          HTML Code:
          <sf:commandLink id="link" action="verDetalle">
          		                    	<h:outputText value="#{transaccionElement.idTransaccion}"/>
                          				<f:param name="transaccionSeleccionada" value="#{transaccionElement.idTransaccion}"/>
                          				<f:param name="bypassRichfaces" value="true"/>
          </sf:commandLink>
          Then I overwrote the RichfacesAjaxHandler to check this parameter. If it exists then I delegate in the SpringJavascriptAjaxHAndler.

          Code:
          public class CustomAjaxHandler extends RichFacesAjaxHandler {
          
          	public CustomAjaxHandler() {
          		// TODO Auto-generated constructor stub
          	}
          
          	public CustomAjaxHandler(AbstractAjaxHandler delegate) {
          		super(delegate);
          		// TODO Auto-generated constructor stub
          	}
          
          	@Override
          	protected boolean isAjaxRequestInternal(HttpServletRequest request,
          			HttpServletResponse response) {
          		
          		String bypassRichfaces = request.getParameter("bypassRichfaces");
          		if (bypassRichfaces != null && bypassRichfaces.equals("true")) {
          			return false;
          		}
          		
          		return super.isAjaxRequestInternal(request, response);
          	}
          }
          Ans this is the flowController configuration:

          Code:
              <bean id="flowController" class="org.springframework.webflow.mvc.servlet.FlowController">
          	    <property name="flowExecutor" ref="flowExecutor" />
          	    <property name="ajaxHandler">
          	        <bean class="es.indra.isl.tibco.monitoring.util.CustomAjaxHandler">
          	        	<constructor-arg index="0">
          	        		<bean class="org.springframework.js.ajax.SpringJavascriptAjaxHandler"/>
          	        	</constructor-arg>
          	        </bean>
          	    </property>
          	</bean>
          Hope it helps somebody.

          Comment


          • #6
            embedded flow not working - swf 2.3.0 and primefaces 2.2RC2

            Hi Nicolas,

            That's what I am looking to do but I am not able to make embedded flow to work, it still is redirecting , whereas I believe it should return ajax partial response.

            I used the booking-faces example to test it, it doesn't work with it as well. What can be wrong here?

            Any help will be greatly appreciated.

            Thanks,
            Vijay

            Comment


            • #7
              Originally posted by Nicolas View Post
              Now, the idea is to fill the panelPopupContent panel with your next view content... The view may belong to your current flow or to a subflow.
              Your view content structure must match the 'form : panelPopupContent' id, here is an example:
              Hi I recently stumbled upon the same issue and managed to solve it using the example given by springfuse.
              But do you have any idea why the ID of the outputPanel MUST be formanelPopupContent ?

              Comment


              • #8
                hi ufasoli,

                Whenever you use embedded flow, there is an ajax request which returns you ajax partial response of that view and you would need the ID of all those form elements in your current view which need to be replaced with this partial response . Remember with embedded flow there is no redirect so you execution parameter remains the same and you are still in the same view state.

                Currently you define the dialog with an output panel which is identified as formanelPopupContent and you need to replace this with the partial response recieved from the ajax request.

                HTML Code:
                <h:form id="form">
                    <p:dialog widgetVar="panelPopupDialog" modal="false" height="500" width="900">	
                        <p:outputPanel id="panelPopupContent">
                        </p:outputPanel>
                    </p:dialog>
                      ....skip.... 
                </h:form>
                Hope this answers your question.

                Thanks,
                Vijay

                Comment


                • #9
                  hi joy192k, thank you for your answer. I understand the mechanism behind the ajax update. My question was regarding the particular ID needed for the popup dialog


                  At first I was using this code :

                  PHP Code:

                  <h:form prependId="false">
                      <
                  p:commandButton action="showUserInfos" 
                          
                  oncomplete="userInfosPopUp.show()"
                         
                  update="userInfosContent"
                      
                  >
                         <
                  f:param name="userId" value="#{user.userId}" />
                     </
                  p:commandButton>


                      <
                  p:dialog widgetVar="userInfosPopUp" modal="false" height="500" width="700">    
                          <
                  p:outputPanel id="userInfosContent">
                          </
                  p:outputPanel>
                      </
                  p:dialog>

                  </
                  h:form
                  But whenever I clicked on the button the transition was properly done( I could see it in the logs) put I kept getting an empty ajax response

                  Then I looked into the springfuse example and decided to give it a try using the exact same IDs (panelPopupDialog, panelPopupContent) and it worked which I find kind of weird.
                  So my question is : do I have to use those 2 IDs whenever I want to update the content of a popup dialog or there was something weird with my code ?

                  ps: I tried other IDs for the dialog without success the only ones that worked were (panelPopupDialog, panelPopupContent)

                  Comment


                  • #10
                    Hi,

                    I don't really don't think so if that would be binding on any developer to use specific ids. What I currently can see as a problem is
                    HTML Code:
                    <h:form prependId="false">
                    where you use prependId. In that case you don't need to use form : panelPopupContent but only panelPopupContent.

                    But this is just my guess.

                    Thanks,
                    Vijay

                    Comment


                    • #11
                      I don't really don't think so if that would be binding on any developer to use specific ids.
                      yeah that's what I thought

                      where you use prependId. In that case you don't need to use form : panelPopupContent but only panelPopupContent
                      yeah but I'm not using update="form : panelPopupContent" just update="panelPopupContent"

                      Comment


                      • #12
                        hmm.. any luck?

                        Comment


                        • #13
                          Hi, yeah actually the problem was the response sent by my subflow, it wasn't well formed once that modified, it worked like a charm

                          Comment


                          • #14
                            same problem: redirect instead popup

                            Hello everyone!
                            I have the same problem that the content of my popup-view opens in the current browser window instead in the popup. My xhtml looks like the solution of Nicolas, so I think that I have also an error in my flow definition.

                            When I call the subflow for the popup (content), I set the input param
                            Code:
                            <input name="mode" value="'embedded'"/>
                            In my (sub)flow I have only a view-state, which looks like this:
                            Code:
                            <view-state id="selectLanguage" view="/WEB-INF/views/language.xhtml">
                            <transition on="...">
                            ...
                            </transition>
                            </view-state>
                            Does anybody know, if something is wrong or missing?

                            Hope somebody can help me...

                            Comment


                            • #15
                              Originally posted by ufasoli View Post
                              Hi, yeah actually the problem was the response sent by my subflow, it wasn't well formed once that modified, it worked like a charm
                              Good to hear that it now works like a charm

                              Comment

                              Working...
                              X