Popups: worked example

**alpheratz** · Feb 21st, 2007, 04:37 AM

There are a lot of questions around regarding popup windows.

I thought I'd explain how *I* do it...give something back into the
community at last!

Maybe I'll learn a better way, as well...

The Flow:

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-1.0.xsd">

	<start-state idref="mainView" />
  
	<view-state id="mainView" view="mainView">
		<transition on="popup" to="popupSubflow" />
	</view-state>

	<subflow-state id="popupSubflow" flow="popupInlineFlow">
		<transition on="*" to="popupEnder" />
	</subflow-state>

  <view-state id="popupEnder" view="popupEnder" />
  
	<inline-flow id="popupInlineFlow">
		<flow>
			<start-state idref="v1" />

			<view-state id="v1" view="v1">
				<transition on="end" to="end" />
			</view-state>

			<end-state id="end" />

		</flow>
	</inline-flow>

</flow>

To spawn a popup, mainView.jsp looks like:

Code:

...
<input type="button" value="Scripting"
       onclick="openPopup('<%= request.getContextPath() %>/tce.spring?_flowExecutionKey=${flowExecutionKey}&_eventId=popup', 'Popup', 640, 480);" />
...

openPopup() is a simple Javascript function:

Code:

function openPopup(url, name, width, height)
  {
  window.open(url, name, "width=" + width + ",height=" + height + 
	  ",status=no,toolbar=no,menubar=no,location=no");
  }

v1.jsp contains:

Code:

<input type="submit" name="_eventId_end" value="End" />

popupEnder.jsp is:

Code:

<%@ page language="java" session="false" isErrorPage="false" pageEncoding="ISO-8859-1"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>No-one should see this!</title>

		<script type="text/javascript" language="Javascript1.5">
		function doOnload()
		  {
		  window.opener.document.location = window.opener.document.location;
		  window.close();
		  }
		</script>
	</head>

	<body onload="doOnload();">

		<p>
			Window is closing...
		</p>

	</body>
</html>

Note that popupEnder.jsp causes a refresh of the opener...allows the
popup window to make a change to the underlying model(s) and have those
changes shown in the opener page at the end of the flow.

Note also that popupEnder has to be invoked from the main flow, not the
subflow...a little inconvenient, but workable.

(As an aside, why is this the case? The doco is clear on this, but the
reason...?)

Hope this helps someone out there!

Cheers,

Alph

**klr8** · Feb 21st, 2007, 02:04 PM

Thanks for posting this! I'm sure it will help a bunch of people.

The reason why the 'view' attribute is ignored when a flow is used as a subflow is that it's the parent flow that's in the drivers seat in this case. E.g. a subflow used in 2 different parent flows could lead to different pages when the subflow ends, all at the discretion of the parent flow.

Erwin

**Hyperion** · Mar 16th, 2007, 08:17 AM

Hi Alph,

I have a problem with the popupEnder.jsp code, the 'window.opener' object is null. I implemented everything like you did. The result is, that the popupEnder.jsp is shown and the mainview.jsp isn't refreshed. When I call this object in v1.jsp there is no problem, but that doesn't really help me out.
Has anybody else this problem?(and a solution :-))
Which repository-type did you use?

Greg

**alpheratz** · Mar 17th, 2007, 12:07 AM

Do you open a popup and then take the opening window off to a new URL while the popup is displayed? I believe this may cause problems with window.opener.

Other than that, I can't say...I'm not a Javascript expert. Indeed, I try to obey the rule "thou shalt not Javascript"...

Cheers,

Alph

**alpheratz** · Mar 17th, 2007, 12:16 AM

Since posting this, I have discovered a flaw...

I was finding that SOMETIMES, I would get a FlowExecutionRestorationFailureException...but not always.

see http://forum.springframework.org/showthread.php?t=35752 for more on this.

I THINK that this issue is: on closing the popup, the originating flow is left in a state (popupEnder) from which there can be no exit.

I don't understand why my flows could continue AT ALL in this situation, but there you go...

Anyway, I have now recast my application..I use plain MVC for the main application flow, and I continue to use SWF for the carefully 'scripted' interactions I need to have. MVC doesn't maintain any flow state so it doesn't care that ending a popup ends everything.

The main change is that a few CONVERSATION-scoped things move into the HttpSession, but other than that all is hunky-dory.

I probably COULD have established an onunload handler in popupEnder.jsp that caused the flow to transition out of the popupEnder state, but I didn't try this.

Cheers,

Alph

**Hyperion** · Mar 17th, 2007, 04:09 AM

Hi,

I don't change the url from the parent window when the popup is displayed and what I forgot to say, the popupEnder.jsp is shown in the parent window. I think this is the same problem that you described, the state 'popupender' can't be exit

.

Thanks for your help.

Greg

**alpheratz** · Mar 17th, 2007, 07:15 AM

I don't think this issue is related to the "popupEnder state having no exit" issue that I mentioned.

If you are seeing the popupEnder.jsp page, something browser-related is happening....check what browser/version/plugins/extensions you have...something is happening to prevent the javascript goodness from working.

Try using the Proxomitron's logging features (www.proxomitron.info...don't surf without it!) to see what is being passed between browser and server.

What proxies do you have...they can sometimes filter javascript stuff.

A Good Thing to do is to try converting the jsp to a piece of plain HTML and opening that, to see if IT works independently of how it is being delivered.

Cheers,

BOB

**Hyperion** · Mar 19th, 2007, 04:36 AM

I found the problem, I set 'singlekey' as repository type for the flow-executor. When I set 'continuation' as repository type it works fine. I tested it in my own application before and it didn't work, so I didn't test it in your application. Something must be wrong in my application, but now I know that it does work

.

Thanks for your help.

Greg

**Hyperion** · Mar 19th, 2007, 07:31 PM

Hi,

I have another problem.
How can I automatically change the state after closing the popup?
In the popup the user selects the next transition, this decision is saved in conversation scope. When the popup is closed a decision state shall deside on the basis of the decision from the user, which state will be next. I don't know, how to do this automatically...

Sorry for my bad english, I'm a bit tired.

Cheers,

Greg

**alpheratz** · Mar 20th, 2007, 07:28 AM

Hi.

As I said a few posts back, this is a bit of a flaw in my scheme.

Perhaps you could have an unload handler on your page that when the popup is closing causes a request to SWF that moves the state from 'popupEnder' to something else:

Code:

function doOnUnload()
  {
  window.location.href = <%= request.getContextPath() %>/tce.spring?_flowExecutionKey=${flowExecutionKey}&_eventId=nextState'
  }
<BODY onunload="doOnUnload();">
 ...

NB: this is typed off the top of my head...

I didn't investigate this...should be easy to try, though.

Cheers,

Alph

Thread: Popups: worked example

Thread Tools

Display

Popups: worked example

Problem with my 'solution'

Posting Permissions