polish
This commit is contained in:
Keith Donald
@@ -9,9 +9,201 @@
|
||||
Creating Your First Web Flow
|
||||
</h1>
|
||||
<h2>
|
||||
Do this, do that, test it out.
|
||||
How are flows authored?
|
||||
</h2>
|
||||
<p>
|
||||
Flow definitions are typically authored in XML documents.
|
||||
A flow is typically packaged in its own directory inside /WEB-INF, and co-located with its dependent resources such as page templates and message resources.
|
||||
For example, the tutorial flow you are using right now lives in the /WEB-INF/tutorial directory along with its JSP page templates.
|
||||
</p>
|
||||
<h2>
|
||||
Why XML?
|
||||
</h2>
|
||||
<p>
|
||||
XML is a good format for expressing structure.
|
||||
Since a flow definition primarily captures the navigation structure between your pages, XML is a good fit.
|
||||
XML is not an appropriate for general programming.
|
||||
This is why your flows should invoke actions written in Java or Groovy to carry out application behaviors.
|
||||
</p>
|
||||
<h2>
|
||||
Step-by-step instructions for creating your first flow using the Eclipse-based SpringSource Tool Suite IDE:
|
||||
</h2>
|
||||
<h3>Setup the project development environment</h3>
|
||||
<ol>
|
||||
<li>
|
||||
Download <a href="http://www.springsource.com/products/sts">SpringSource Tool Suite</a> (STS) and the latest <a href="http://www.springsource.org/download#webflow">Spring Web Flow 2.0.x release</a>.
|
||||
After downloading completes, extract both archives to your directory of choice.
|
||||
</li>
|
||||
<li>
|
||||
Open STS and access File -> Import... -> Existing Projects Into Workspace. Select Browse... and navigate to where you extracted the Spring Web Flow release.
|
||||
Select the spring-webflow-samples/getting-started-with-spring-webflow folder and import the project.
|
||||
</li>
|
||||
<li>
|
||||
After the project import, if you do not already have a servlet container such as Tomcat installed on your workstation you can uses STS to install an embedded Tomcat instance.
|
||||
To do this, select the SpringSource logo on the tool bar, access the Configuration tab, and select Create Server Instance.
|
||||
</li>
|
||||
<li>
|
||||
Next, right-click on the project in your Package Explorer view, and select Run On Server.
|
||||
Select the server runtime you wish to deploy to and finish to deploy the project.
|
||||
You should see the tutorial welcome page appear in the embedded web browser.
|
||||
Alternatively, you can access the application in an external browser such as Firefox at <a href="http://localhost:8080/getting-started-with-spring-webflow">http://localhost:8080/getting-started-with-spring-webflow</a>
|
||||
</li>
|
||||
</ol>
|
||||
<h3>Create your first helloworld flow</h3>
|
||||
<ol>
|
||||
<li>
|
||||
Once the application is running, create a new directory for your flow inside /WEB-INF; name the directory helloworld.
|
||||
Next, right-click on the directory and access New -> Spring Web Flow Definition.
|
||||
Enter the filename helloworld-flow.xml and finish.
|
||||
The flow definition will be generated for you with an initial view-state named start.
|
||||
</li>
|
||||
<li>
|
||||
Go ahead and create a start.jsp in your flow directory and paste in the following:
|
||||
<pre>
|
||||
<html>
|
||||
<head>
|
||||
<title>Hello world!</title>
|
||||
</head>
|
||||
<h1>
|
||||
Hello world!
|
||||
</h1>
|
||||
</html>
|
||||
</pre>
|
||||
</li>
|
||||
<li>
|
||||
From the Servers view, restart your server, then startup your flow by accessing <a href="http://localhost:8080/app/helloworld">http://localhost:8080/app/helloworld</a>.
|
||||
You should see your Hello world! message display.
|
||||
Note you only have to restart your server when you add new flows to the system. When you change flows, changes will be refreshed automatically.
|
||||
</li>
|
||||
</ol>
|
||||
<h3>Add a navigation rule</h3>
|
||||
<ol>
|
||||
<li>
|
||||
Next, try transitioning your flow from one state to another to implement a navigation rule. In your helloworld flow, add the following transition to your start view-state:
|
||||
<pre>
|
||||
<transition on="submit" to="page2" />
|
||||
</pre>
|
||||
Then define your page2 view-state:
|
||||
<pre>
|
||||
<view-state id="page2">
|
||||
</view-state>
|
||||
</pre>
|
||||
And the corresponding page2.jsp:
|
||||
<pre>
|
||||
<html>
|
||||
<head>
|
||||
<title>Hello world!</title>
|
||||
</head>
|
||||
<h1>
|
||||
This is page 2!
|
||||
</h1>
|
||||
</html>
|
||||
</pre>
|
||||
Finally, create a button on your start.jsp that raises the submit event to trigger the state transition:
|
||||
<pre>
|
||||
<form method="post">
|
||||
<input type="submit" name="_eventId_submit" value="Submit" />
|
||||
</form>
|
||||
</pre>
|
||||
Click the button and you should be taken to page 2.
|
||||
</li>
|
||||
</ol>
|
||||
<h3>Add a dynamic navigation rule</h3>
|
||||
<p>
|
||||
Web flow excels at implementing dynamic navigation logic that takes a user through different paths based on what they enter or who they are.
|
||||
</p>
|
||||
<ol>
|
||||
<li>
|
||||
Try implementing a dynamic navigation rule by adding a bound checkbox to your start.jsp.
|
||||
Do this by first replacing the contents of your start.jsp with the following snippet:
|
||||
<pre>
|
||||
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
|
||||
<html>
|
||||
<head>
|
||||
<title>Hello world!</title>
|
||||
</head>
|
||||
<h1>
|
||||
Hello world!
|
||||
</h1>
|
||||
<form:form method="post" modelAttribute="helloWorldForm" >
|
||||
<form:checkbox path="selected" />
|
||||
<input type="submit" name="_eventId_submit" value="Submit" />
|
||||
</form:form>
|
||||
</html>
|
||||
</pre>
|
||||
</li>
|
||||
<li>
|
||||
Next, create a HelloWorldForm class in the org.springframework.webflow.samples.helloworld package with the following code:
|
||||
<pre>
|
||||
package org.springframework.webflow.samples.helloworld;
|
||||
|
||||
import java.io.Serializable;
|
||||
|
||||
public class HelloworldForm implements Serializable {
|
||||
private boolean selected = true;
|
||||
|
||||
public boolean isSelected() {
|
||||
return selected;
|
||||
}
|
||||
|
||||
public void setSelected(boolean selected) {
|
||||
this.selected = selected;
|
||||
}
|
||||
}
|
||||
</pre>
|
||||
</li>
|
||||
<li>
|
||||
In your helloworld-flow, declare the HelloWorldForm as a flow variable:
|
||||
<pre>
|
||||
<var name="helloWorldForm" class="org.springframework.webflow.samples.helloworld.HelloWorldForm" />
|
||||
</pre>
|
||||
Then update your start view-state to use this variable as its data model, enabling automatic model binding and validation:
|
||||
<pre>
|
||||
<view-state id="start" model="helloWorldForm"> ...
|
||||
</pre>
|
||||
<p>
|
||||
Refresh your flow and the checkbox should render checked since the default value for HelloWorldForm.selected is true.
|
||||
Uncheck the box and submit and go back in your browser and the unchecked status should be preserved.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
Add a navigation decision that says if selected goto page2 else goto a new page3:
|
||||
<pre>
|
||||
<view-state id="start">
|
||||
<transition on="submit" to="isSelected" />
|
||||
</view-state>
|
||||
|
||||
<decision-state id="isSelected">
|
||||
<if test="helloWorldForm.selected" then="page2" else="page3" />
|
||||
</decision-state>
|
||||
|
||||
...
|
||||
|
||||
<view-state id="page3">
|
||||
</view-state>
|
||||
|
||||
</pre>
|
||||
Click the button with the checkbox selected and you should be taken to page2.
|
||||
Click the button with the checkbox de-selected and you should be taken to page3 (you'll need to create a JSP or you'll get a 404).
|
||||
</li>
|
||||
</ol>
|
||||
<h3>Finish your helloworld flow</h3>
|
||||
<p>
|
||||
<ol>
|
||||
<li>Finish up your flow by adding another button on the start.jsp that ends the flow:</li>
|
||||
<pre>
|
||||
<input type="submit" name="_eventId_finish" value="Finish" />
|
||||
</pre>
|
||||
In your start view-state, declare the finish transition:
|
||||
<pre>
|
||||
<transition on="finish" to="finished" />
|
||||
</pre>
|
||||
And finally define the end-state:
|
||||
<pre>
|
||||
<end-state id="finished" view="externalRedirect:welcome" />
|
||||
</pre>
|
||||
Click the Finish button and you should be taken back to the application welcome screen.
|
||||
</ol>
|
||||
<a href="tutorial?execution=${flowExecutionKey}&_eventId=next">Next ></a>
|
||||
</p>
|
||||
</body>
|
||||
|
||||
@@ -29,7 +29,7 @@ The framework also cares for managing conversational state and preventing duplic
|
||||
<p>
|
||||
Spring Web Flow builds on the Spring Framework project, which includes the Spring MVC web framework.
|
||||
Concretely, Spring Web Flow plugs into Spring MVC as a Controller technology.
|
||||
Then, a typical Spring-powered web application is implemented using a mix of annotated Spring MVC @Controllers and web flows.
|
||||
A typical Spring-powered web application is implemented using a mix of annotated Spring MVC @Controllers and web flows.
|
||||
In general, use @Controllers for implementing simple, single-request user interactions, and web flows for stateful, multi-step user interactions.
|
||||
</p>
|
||||
<p>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
||||
<%@ page session="false" %>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<html>
|
||||
<head>
|
||||
<title>Getting Started with Spring Web Flow: Setting up Web Flow in a Spring Web Application</title>
|
||||
</head>
|
||||
|
||||
Reference in New Issue
Block a user