Chariot Training Classes

Training Courses

I run Chariot's training and mentoring services. We provide training in AngularJS, HTML5, Spring, Hibernate, Maven, Scala, and more.

Chariot Education Services

Technology

Chariot Emerging Tech

Learn about upcoming technologies and trends from my colleagues at Chariot Solutions.

Resources

Chariot Conferences

Podcasts

« My Maven doesn't build Codehaus anymore, what's wrong? | Main | Living on the Roo "edge" w/git »
Sunday
Sep192010

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

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':


  <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...

PrintView Printer Friendly Version

EmailEmail Article to Friend

References (1)

References allow you to track sources for this article, as well as articles that were written in response to this article.
  • Response
    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 ...

Reader Comments (1)

How to enable popup in view state using Roo generated files?

June 13, 2011 | Unregistered CommenterShaymak

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>