Ken Rimple heads Chariot Solutions' training and mentoring programs, and has developed and/or delivered courseware and seminars in a variety of technologies such as Maven, OSGi, Groovy, Grails and Spring. Throughout his career, Ken has always made it a priority to teach others what he has learned. Ken has served as the technical co-chair of both the Fall Forecast 2008 Cloud Computing Conference and the 2009 - 2012 Emerging Technologies for the Enterprise conferences. He hosts a popular podcast, the Chariot TechCast, and has led or participated in projects written in Java since Java 1.0.2. Ken taught the first Philadelphia-area Sun Introduction to Java course in the late 1990s. He is the co-author (along with Srini Penchikala) of Spring Roo in Action for Manning Publications. He is also an avid photographer and jazz drummer. Ken is a DZone MVB and is not an employee of DZone and has posted 35 posts at DZone. You can read more from them at their website. View Full User Profile

Spring Roo and Web Flow, the Expergated Version...

01.07.2011
| 9759 views |
  • submit to reddit

I've had a number of people ask me recently about how Spring Roo works with Web Flow. Yes, there's the installation command, but what do you do from there? I've been penning a segment of Roo in Action to address this, but because it will take several months to get it through to the MEAP, I figured a quick blog entry would be useful.

The preliminaries

Ok, let's make sure we are all on the same page. The examples I'm describing here use 1.1.0.M3, although the same concepts apply to the 1.0.2 release. The biggest difference is the JSPX tags the Roo team has installed since that release. I'm also using persistence, so go ahead and configure a persistence engine if you're hacking along with me.

Installing webflow

This is easy. Just type 'web flow' in the roo shell, and it will configure it for you. The engine will add the dependencies to the maven pom.xml file, configure web flow settings in webflow-config.xml in the WEB-INF/spring directory. It will also drop a nice sample webflow in the WEB-INF/views/sampleflow directory. If you start your application, you'll also see that the menu includes a "Enter Sampleflow WebFlow" menu item.

What does it mean to me?

Ok, now you're getting impertinent, HTML title h3 - I think my readers are more patient than you. *Ahem* Ok, so if you're already a webflow expert, you are ready to go, jump to "I'm a Web Flow Expert Already!" For the rest of you, read this short primer first.

Web Flow is a state-machine pattern, implemented as a very smart controller, within Spring MVC. You define a "web flow definition" in an XML file, which is defined by a series of states and transitions. If you can diagram a flow chart of how a web application should navigate through a system, you can transform that flow chart directly into a web flow definition.

Take the example flow installed by Roo when you set it up, sampleflow. The webflow file, not very well named, is called 'config-flow.xml':

<!--?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">

<!-- Is your flow persistent? -->
<!-- <persistence-context /> -->

<!-- A sample view state -->
<view-state id="view-state-1">
<transition on="success" to="view-state-2"/>
<transition on="cancel" to="end-state"/>
</view-state>

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

<!-- A sample end state -->
<end-state id="end-state" view="end-state"/>

</flow>

Just eyeball that file for a minute. You really don't have to understand a vast and difficult API to interpret it. The view is defined by three states - view-state-1, view-state-2, and end-state. In view-state-1, two transitions are defined - one with an event name of 'success', and one with an event name of 'cancel' - each of these transitions take you to one of the other states. A view-state is a state that renders a view (JSPX file) and awaits your next submission to figure out what event name you wish it to evaluate. So, if you develop a page to display for view-state-1, aptly named view-state-1.jspx, it should give you two actions, each of which should trigger an event allowed by that state.

Getting to Know View, Getting to Know All About View...

Stop cringing. My sense of humor is warped this morning. But, you asked, so here it is - the view state is one of those Roo JSPX view files, which heavily leverages tag libraries. Scan the view-state-1.jspx file below and you'll see two buttons with special names, all posting to a form with no URL:

<div xmlns:spring="http://www.springframework.org/tags" 
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:util="urn:jsptagdir:/WEB-INF/tags/util"
xmlns:jsp="http://java.sun.com/JSP/Page"
version="2.0">
<jsp:output omit-xml-declaration="yes" />
<spring:message var="title" code="webflow_state1_title" />
<util:panel id="title" title="${title}">
<h1>${fn:escapeXml(title)}</h1>
<p>
<spring:message code="webflow_state1_message" />
</p>
<form method="POST">
<div class="submit">
<spring:message var="cancel" code="button_cancel" />
<spring:message var="proceed" code="button_proceed" />
<input type="submit" id="cancel"
name="_eventId_cancel" value="${fn:escapeXml(cancel)}" />
<input type="submit" id="success"
name="_eventId_success" value="${fn:escapeXml(proceed)}" />
</div>
</form>
</util:panel>
</div>

Did you see the two submit buttons toward the bottom of the page on lines 17 and 19? Each had a name corresponding to the name of the transition event in the XML web flow document. Also, notice how the form doesn't have an address - in HTML when you leave out the address, it simply posts back to itself, thereby going back to the web flow and evaluating the submitted values. Since you can only click two buttons - _eventId_cancel and _eventId_success, you have two outcomes, which match the two transitions nicely.

More about Web Flow

Web Flow is documented with a user guide over at SpringSource, and there are several books on the subject, including Craig Walls' Spring In Action, which has a MEAP covering Spring 3. SpringSource also delivers training in all Spring-based web technologies in the Spring Rich Web course. Disclosure - my employer, Chariot Solutions, is a SpringSource training partner, and we'll be adding this course by early next year. There is also a user forum. I've left out a ton of information, owing to the fact that I'm spending most of my time writing the book itself, and that I don't have nearly enough time or space to do it justice. However, keep these key things in mind:

  • There are several types of states, including action (execute logic), decision (if/then), and subflow
  • Web Flow keeps track of which flow you are working on by tacking on an Execution ID, which you'll see at the end of an URL. There is a variable you can access in the JSP, ${flowExecutionKey}, that you'll need to tack on as _flowExecutionKey if you write your own URLs in hyperlinks (only important if you are not submitting back to the same form).
  • You want to use Web Flow when you have a multi-step process, and Spring MVC when you don't. Flows have a number of ways to store intermediate data, such as the "flow scope," and you don't want to waste precious memory storing things in there if you don't need to. As with all web applications, think statelessly first, then back your way into needing state.


So, that's it for now. In the Roo book we'll have more, including how to properly work with the tag libraries to build proper links, and a sample that (currently anyway) includes a simple shopping cart flow and a JPA-based object graph to persist the flow. We are releasing an updated MEAP this week, which includes the Spring MVC chapter, so if you want to learn about Roo's controller and view technologies and how the tags function, you can find that information there.

I'm a Web Flow Expert Already!

Then you can pretty much get going! Simply drop new flows in WEB-INF/views, and make sure you include a views.xml file so that Tiles can find your files. By the way, Tiles recently began allowing wildcards, so you can do something like this inside the flow, replacing the path in put-attribute with your own in value below:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN" "http://tiles.apache.org/dtds/tiles-config_2_1.dtd">
<tiles-definitions>
<definition extends="default" name="*">
<put-attribute name="body" value="/WEB-INF/views/cart/{1}.jspx"/>
</definition>
</tiles-definitions>

Do this and you can drop new files into the flow at will, without having to touch your tiles definition.

Enjoy, folks, and sorry if it runs a bit incoherent. This is just a brain dump for now...

References
Published at DZone with permission of Ken Rimple, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Niel Eyde replied on Fri, 2011/01/07 - 2:44pm

For those interested in Spring Web Flow, you may also want to check out the MyEclipse for Spring add-on for SpringSource Tool Suite. Among other things it will bootstrap and generate a complete ready-to-run Spring Web Flow application from your existing database tables, JPA entities or Java beans. It's a great way to learn Spring Web Flow in the context of domain model that you're already familiar with. MyEclipse for Spring also features an excellent Web Flow Editor to help visualize and edit the flows graphically.

James Walker replied on Sun, 2012/10/14 - 7:01am

There is a variable you can access in the JSP, ${flowExecutionKey}, that you'll need to tack on as _flowExecutionKey if you write your own URLs in hyperlinks (only important if you are not submitting back to the same form). Zimmet Vein and Dermatology

Zem Karlos replied on Thu, 2012/11/15 - 10:16pm

 Nice and clearly presented tutorial....thanks for shearing...home page 

Zem Karlos replied on Mon, 2012/12/17 - 8:20am

 

Nice to see the quality information presented in an easy and understanding manner. This is very nice to see this blog and it’s really informative for the readers.
Houston dentist

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.