The following steps takes you through the AddUser-Flow.xml with inline comments and the view files that displays the details.
AddUser-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"> <!-- Creating Object: Name: userInfo Scope: FlowScope LifeCycle: Object will get deleted only when the flow ends. --> <on-start> <evaluate expression="userService.createUserInfo()" result="flowScope.userInfo" /> </on-start> <!-- id: addUser view: This attribute tells the flow that it should render the view named "AddUser" model: Tells the flow that the fields in this view binds to this model object --> <view-state id="addUser" view="AddUser" model="userInfo"> <transition on="Next" to="Summary"> <!-- Decide on whether to transition to the next step in the flow using evaluate expression. --> <evaluate expression="userService.validateUserInfo(flowScope.userInfo, messageContext)"></evaluate> </transition> </view-state> <!-- id: Summary If the view attribute is not provided, flow will try to resolve the view in the same name as the id attribute. In this case it will look for the view named "Summary" --> <view-state id="Summary"> <transition on="Edit" to="addUser"></transition> <transition on="Save" to="Save"></transition> </view-state> <!-- This state indicates the the flow ends here. --> <end-state id="Save" view="SaveUser"> </end-state> </flow>
Create the following views for each state defined in the flow.xml file.
1. AddUser.jsp
This JSP is used to collect the user inputs using the <form:input> tags defined in Spring Framework.
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Add User</title> </head> <body> <form:form commandName="userInfo"> <table> <tr> <td align="right""><b>Id</b></td> <td>:</td> <td><form:input path="id" size="20" /></td> <td><form:errors path="id" /></td> </tr> <tr> <td align="right""><b>Name</b></td> <td>:</td> <td><form:input path="name" size="20" /></td> <td><form:errors path="name" /></td> </tr> <tr> <td align="right""><b>Age</b></td> <td>:</td> <td><form:input path="age" size="3" /></td> <td><form:errors path="age" /></td> </tr> </table> <input type="submit" name="_eventId_Next" value="Next" /> </form:form> </body> </html>
2. Summary.jsp
This page is displayed to confirm the details the user provided on AddUser.jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Summary</title> </head> <body> <h2>Confirm the details</h2> <table> <tr> <td align="right">Id</td> <td>:</td> <td><c:out value="${userInfo.id}"></c:out></td> </tr> <tr> <td align="right">Name</td> <td>:</td> <td><c:out value="${userInfo.name}"></c:out></td> </tr> <tr> <td align="right">Age</td> <td>:</td> <td><c:out value="${userInfo.age}"></c:out></td> </tr> </table> <form:form> <input type="submit" name="_eventId_Edit" value="Edit"> <input type="submit" name="_eventId_Save" value="Save"> </form:form> </body> </html>
3. SaveUser.jsp
This page is used to display the confirmation that the user details are saved successfully in the back-end.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Save User</title> </head> <body> User Details Saved Successfully </body> </html>
The screenshots for these view files are available at the end of this tutorial.
Proceed to Step 3: Creating the Java Components
No comments:
Post a Comment