Basic SWF popup example using jsp and tiles, no JSF

[rbjbrooks]

Hi all,

I've been searching to no avail and trying to find a basic example of a SWF modal popup triggered by a submit button on a tile (jsp). The example application that comes with SWF does not appear to have a popup example within it, or atleast I cannot find it.

I have tried everything I can think of to get a pop up to display and it still isn't working, my flow just goes to a full page display of what should be in the popup. The popup should be the first page of a sub-flow.

If anyone has an example of the how to correctly trigger the popup with spring javascript in SWF 2.0.8, that would really help me.

best regards,

Rob

[InverseFalcon]

I won't be of much help on the JSP side of things, but I think it will help if you list what you have tried so far.

To my knowledge, there are a few parts to this:
1. The submit button will need some kind of AJAX decoration using Spring JS.
2. The destination view-state needs the attribute "popup" set to "true".
3. Your popup view-state needs an on-render element with a render fragments action to identify which part of the page to use for the popup.
4. Your buttons on the popup page need AJAX decorations using Spring JS.

[rbjbrooks]

thanks InverseFalcon for the tips. The one part I don't have in my setup is the 'on-render' element in my pop up view state. I'll try adding that to see what happens. One other thing that may be affecting my situation is that I'm running on Spring 3.0 RC1, I've seen some other threads stating that Spring 3.0 and SWF 2.0.x don't play that nicely together.

[kbheemreddy]

Hi - Even I am having difficulty in getting popup working; the flow just goes to full page display.

I am using Spring MVC 2.5.3, webflow 2.0.8 and displaytag 1.2 without tiles.

If anyone has working example to trigger popup in jsp, can you please help me?

I am trying to display the popup from the href link. Please see below for the configurations I have done to load dojo.

1. Added resource servlet to web.xml

<!-- To allow the loading of Dojo resources within the jar bundle -->
	<servlet>
		<servlet-name>Resource Servlet</servlet-name>
		<servlet-class>
			org.springframework.js.resource.ResourceServlet
		</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>Resource Servlet</servlet-name>
		<url-pattern>/resources/*</url-pattern>
	</servlet-mapping>

2. flow definition file

<!-- By default, the first state is the start state. -->
	<view-state id="agencySearch" model="principalData"
		view="agency/principal_account_details">
		<on-entry>
			<evaluate
				expression="agencySearchDetailsAction.accountDetails(flowRequestContext)" />
		</on-entry>
		<transition on="editBond" to="bonds" />
		<transition on="addBond" to="bonds" />
		<transition on="bondComments" to="comments" />
		<transition on="removeBond" to="agencySearch">
			<set name="flowScope.bondId"
				value="requestParameters.bondId" type="java.lang.String" />
			<set name="flowScope.action"
				value="requestParameters.action" type="java.lang.String" />
			<evaluate
				expression="agencySearchDetailsAction.processBonds(flowRequestContext)" />
		</transition>
		<transition on="back" to="searchResults" />
	</view-state>

    <!--comments popup  -->
	<view-state id="comments" view="agency/commentsPopUp" model="commentsData"
		popup="true">
		<on-entry>
			<set name="flowScope.id" value="requestParameters.id"
				type="java.lang.String" />
			<set name="flowScope.type"
				value="requestParameters.type" type="java.lang.String" />
		</on-entry>
		<on-render>
		   <evaluate	
			expression="agencySearchDetailsAction.processComments(flowRequestContext,'get')" />	
		</on-render>
		<transition on="addComment" to="agencySearch">
			<evaluate
				expression="agencySearchDetailsAction.processComments(flowRequestContext,'add')" />
		</transition>
	</view-state>

3. My jsp page: the bondLink is a wrapper class which returns the link based on some condition. Highlighted in red is the sample example of the href link

<a href="companyAccountFlow.do?_flowExecutionKey=e1s1 &_eventId=bondComments&type=Bond&id=112" id="commentsLnk">comments\n</a>

<head>
<style type="text/css" media="screen"> 
			@import url("<c:url value="/resources/dojo/resources/dojo.css"/>"); 
			@import url("<c:url value="/resources/dijit/themes/tundra/tundra.css"/>"); 
		</style>      
		<script type="text/javascript" 
			src="<c:url value="/resources/dojo/dojo.js"/>"></script> 
		<script type="text/javascript"
			src="<c:url value="/resources/spring/Spring.js" />"> </script> 
		<script type="text/javascript"
			src="<c:url value="/resources/spring/Spring-Dojo.js" />"></script> 
		
	</head>

<display:column property="bondLinks" title="" media="html"
							class="customer" headerClass="customer" />
						<script type="text/javascript">
							Spring.addDecoration(new Spring.AjaxEventDecoration({
							elementId: "commentsLnk",
							event: "onclick",
							popup: true,
							params: {fragments: "commentsPopUp"} 
						}));

When I click on the link, the popup is not triggered instead navigates to full page display. I am not sure what I missed, I really appreciate if any one can help me.

[InverseFalcon]

In your popup view-state, I don't see any render action in your on-render section (see step 3 in my comments above). I think you'll want to render the "commentsPopUp", if your javascript snippet is any indication.

[kbheemreddy]

Thank you InverseFalcon for your response! I apologize; however, I am not sure what render action I am supposed to add there.

In the on-render, the action method will retrieve a list of comments based on the id and type.

The "commentsPopUp" in the params fragments refer to jsp page.

I want to render the model object "commentsData" in the popup as well as bind the input to model object. Hence I have changed the on-reder action method to pass the additional parameter which is model data. Also changed the params: {fragments: "commentsData"}.

<view-state id="comments" view="agency/commentsPopUp" model="commentsData"
		popup="true">
		<on-entry>
			<set name="flowScope.id" value="requestParameters.id"
				type="java.lang.String" />
			<set name="flowScope.type"
				value="requestParameters.type" type="java.lang.String" />
		</on-entry>
		<on-render>
		   <evaluate	
			expression="agencySearchDetailsAction.processComments(flowRequestContext,'get',flowScope.commentsData)" />	
		</on-render>
		<transition on="addComment" to="agencySearch">
			<evaluate
				expression="agencySearchDetailsAction.processComments(flowRequestContext,'add',flowScope.commentsData)" />
		</transition>
	</view-state>

However, I am still getting the same results. I really appreciate if you can let me know what render action I am suppose to add.

[InverseFalcon]

My experience is with the JSF / Facelets / SWF stack, so I'm not sure how much of this applies, but if you're doing some kind of AJAX, including popups, you need to tell SWF which fragments (element IDs) on the page to render.

In your on-render you've got an evaluate action, which is fine, but I think you need that render action to specify which element IDs of your page to render. Something like:

<on-render>
  <render fragments="someHtmlComponentId"/>
  <evaluate expression="agencySearchDetailsAction.processComments(flowRequestContext,'get',flowScope.commentsData)" />
</on-render>

I haven't worked with the raw Spring JS ajaxEventDecorations, but I imagine the fragments parameter should be the same as what you supply in the render fragments action: an HTML component ID to be used in the render action. Since you're using a popup, the element you specify will define the contents of the popup.

[kbheemreddy]

Thanks for your prompt response!! I am searching in google to see if I can find any documentation on the render fragments in-order for me to gain better understanding.

I looked again at the booking-mvc example, however, there is no render fragment included in the configuration files.

Also, I am wondering if the "htmlComponentId" is related to some "div" id in the jsp page.

In other words, the "div" section will be included in the same jsp page as parent, however, will be rendered only at the popup. I will try out this and will post back my findings. Thanks again!

[kbheemreddy]

Hi - Based on my understanding, I tried all the options to make popup work with the plain jsp. However, I still get same results. It navigates to full page display.

I found the following form which indicates that Tiles are needed with the jsp for popups:

Oct 1st, 2008, 03:05 PM
Marten Deinum
Senior Member Join Date: Jun 2006
Location: The Netherlands
Posts: 7,659



--------------------------------------------------------------------------------

Quote:
is that correct?

No.

For plain JSP you need Tiles to make it work. For JSF you can use either Tiles or Facelets (the jsf templating stuff).
__________________
Marten Deinum
Senior software Engineer/Architect
SpringSource Certified Trainer
Conspect ICT diensten
Blog
Use the [ code ] tags, young padawan

The below link gives more details.
http://forum.springsource.org/showth...t=58639&page=2

Is this still valid for Spring 2.5.3 and webflow 2.0.8 ? Can anyone confirm this? I really appreciate your help.