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

Hi fdd,

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

Regards.

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

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.

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.

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

Quote:

Originally Posted by Nicolas

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

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 form:panelPopupContent 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

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)

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