Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment:

Update formatting and nomenclature

In the Hello World lesson, we implemented a use case that displayed a message with a dynamic timestamp. In this lesson, we create a workflow that displays input from a data-entry form.

The form will ask for your name. If

Actions

we will create a form in which you can enter your name. For example, if you enter "Bob" and click the submit button,
you'll get a page saying the page will display "Hello, Bob!". If you don't enter a name, you'll get a screen sayingthe page will display: "HmmHmmm, you don't seem to have entered did not enter a name. Go back and Please try again please.!"

As before, we set everything up in four steps: create the form, create the action, register the action, and create the landing page (or in this case, pages).

1. Create the form

In the Hello World lesson, there were three components: the Action class, the result page, and the action mapping. In this lesson, we will add a fourth component: an input form.

HTML Form With Data, Using Getters and Setters

Create the HTML form

The framework includes a library of special tags that you can use to write more powerful forms, but "plain old HTML forms" work just fine too.Paste this html into webapp/page03.jsp:

Code Block
html
html
titlehelloName.html
<html>
<head>
	<title>A simple form with data</title>
</head>
<body>
	<p>What is your name?</p>

	<form action="form03helloName.action" method="post">
		<p><input type="text" name="yourNamename"></p>
		<p><input type="submit" value="Submit your name." /></p>
	</form>

</body>
</html>

 

...

Create the

...

Action class

The HTML form submits an attribute called "name", and the Action class provides a corresponding JavaBean property.

Code Block
java
java
title"HelloName.java"

Paste this code into src/lessons/Form03Action.java:

Code Block
javajava
package lessonstutorial;

import com.opensymphony.xwork.ActionSupport;

public class Form03ActionHello extends ActionSupport {

  String yourNamename;

  public void setYourNamesetName(String p_yourNamevalue) {
    yourNamename = p_yourNamevalue;
  }

  public String getYourNamegetName() {
    return yourNamename;
  }


  public String execute() throws Exception {
    if (yourNamename == null || yourNamename.length() == 0)
      return ERROR;
    else
      return SUCCESS;
  }

}

 

3. Register the action in xwork.xml:

Edit webapp/WEB-INF/classes/xwork.xml:

Create the action mapping

We can just add a new action mapping to the file we started in the Hello World lesson.

Code Block
xml
xml
titleaction.xml
Code Block
xmlxml
<!DOCTYPE xwork PUBLIC "-//OpenSymphony Group//XWork 1.0//EN" "http://www.opensymphony.com/xwork/xwork-1.0.dtd">

<xwork>
  <!-- Include webwork defaults (from WebWork JAR). -->
  <include file="webworkaction-default.xml" />

  <!-- Configuration for the default package. -->
  <package name="default" extends="webwork-default">
    <!-- Default interceptor stack. -->
    <default-interceptor-ref name="defaultStack" />

    <!-- 02 -->action-default">

    <action name="form02helloWorld" class="lessonstutorial.Form02ActionHelloWorld">
      <result name="success" type="dispatcher">page02-success>helloWorld.jsp</result>
    </action>

    <!-- 03 -->
    <action name="form03helloName" class="lessonstutorial.Form03ActionHelloName">
      <result name="success" type="dispatcher">page03>helloName-success.jsp</result>
      <result name="error" type="dispatcher">page03>helloName-error.jsp</result>
    </action>

  </package>
</xwork>

...

...

Create the success and error pages

Create webapp/page03-success.jsp:The Action can select between two outcomes, "success" and "failure".

Code Block
html
html
titlehelloName-success.jsp
<%@ taglib uri="webworkaction2" prefix="wwsaf" %>
<html>
<head>
	<title>Success page for form with<title>Success data<Page</title>
</head>
<body>
    <p>
      Hello, <ww<saf:property value="yourNamename" />!
    </p>
</body>
</html>

 

...

Code Block
html
html
titlehelloName-error.

...

Code Block
htmlhtml
<html>
<head>
	<title>Error page for form with data<Page</title>
</head>
<body>
<p>
HmmHmmm, you don'tdid seemnot to haveenter entered a name. GoPlease back and try again please.
!
</p>
</body>
</html>

 

Try it

...

!

If you are coding along, go ahead and try your form now. Open the input page (http://localhost/tutorial/helloName.html), and click the submit button to

Don't forget to compile your action to webapp/WEB-INF/classes, and to restart your web application if necessary.

Go ahead and try it now: click the form submit button and see what happens. Try it with and without entering a name.

Warning
titleDon't forget!

Compile your Action to WEB-INF/classes and restart your container if necessary.

How the code works

There are only two differences between this example and the previous Hello World lesson.

  1. When the

...

  1. Action is called,

...

  1. setName is passed the contents of the name form field

...

  1. .

...

  1. When the Action's execute method returns, the framework has two options. If

...

  1. the string "error" returns, the framework will select helloName-error.jsp

...

  1. as the result. If the string "success" returns, then helloName-success.jsp

...

  1. is selected.

Let's try a slightly different approach to solve the same user case.

HTML Form With Data, Without Using Getters and Setters

In our first form, we needed to capture the field name and to do that we added the getters and setters getName and setName to the Action class

An html form with data, without getters or setters

For the form field named "yourName" in the previous lesson, we also had to create the getters and setters getYourName() and setYourName() in the action, as well as the private variable yourName. With name. A larger application with dozens of forms and hundreds of form fields , you'll be typing thousands of could need several hundred getters and setters. That can get old fast. In this lesson, we'll repeat the last lesson, but without any of that extra typing.

1. Create the html form

Let's try that same use case again, but without the JavaBean methods.

Create the HTML form

Let's use the same HTML formUse the same JSP form from the previous lesson, but change the form action Action to page04helloName2.action:

Code Block
html
html
titlehelloName.html
<html>
<head>
	  <title>A simple form with data</title>
</head>
<body>
	   <p>What is your name?</p>

	   <form action="form04helloName2.action" method="post">
		     <p><input type="text" name="yourNamename"></p>
		     <p><input type="submit" value="Submit your name." /></p>
	   </form>

</body>
</html>

...

...

Create the

...

Action class

Paste this code into src/lessons/Form04Action.java:

Code Block
java
java
titleHelloName2.
Code Block
javajava
package lessonstutorial;

import com.opensymphony.xwork.ActionSupport;
import comorg.apache.opensymphonystruts.webworkaction2.interceptor.ParameterAware;

import java.util.Map;

public class Form04ActionHelloName2 extends ActionSupport implements ParameterAware {

  Map parameters;

  public Map getParameters() {
    return parameters;
  }

  public void setParameters(Map parameters) {
    this.parameters = parameters;
  }

  public String execute() {
    String[] yourNamename = (String[]) parameters.get("yourNamename");
    if(yourNamename == null || yourNamename[0] == null || yourNamename[0].length() == 0)
      return ERROR;
    else
      return SUCCESS;
  }
}

 

...

Create the action

...

mapping

Code Block
xml
xml
titleaction.xml

Edit webapp/WEB-INF/classes/xwork.xml:

Code Block
xmlxml
<!DOCTYPE xwork PUBLIC "-//OpenSymphony Group//XWork 1.0//EN" "http://www.opensymphony.com/xwork/xwork-1.0.dtd">

<xwork>
  <!-- Include webwork defaults (from WebWork JAR). -->
  <include file="webworkaction-default.xml" />

  <!-- Configuration for the default package. -->
  <package name="default" extends="webworkaction-default">
    <!-- Default interceptor stack. -->
    <default-interceptor-ref name="defaultStack" />

    <!-- 02 -->
    <action name="form02helloWorld" class="lessonstutorial.Form02ActionHelloWorld">
       <result name="success" type="dispatcher">page02-success>helloWorld.jsp</result>
     </action>

    <!-- 03 -->
    <action name="form03helloName" class="lessonstutorial.Form03ActionHelloName">
       <result name="success" type="dispatcher">page03>helloName-success.jsp</result>
       <result name="error" type="dispatcher">page03>helloName-error.jsp</result>
     </action>

    <!-- 04 -->
    <action name="form04helloName2" class="lessonstutorial.Form04ActionHelloName2">
       <result name="success" type="dispatcher">page04>helloName2-success.jsp</result>
       <result name="error" type="dispatcher">page03>helloName-error.jsp</result>
      <interceptor-ref name="servlet-config"/>
    </action>

  </package>
</xwork>

 

Create the success and error pages

We 'll can use the same error page, but create we'll need a slightly different success page page04helloName2-success.jsp. The only difference is the <ww <saf:property> tag.

Code Block
html
html
<%@ taglib uri="webworkaction2" prefix="wwsaf" %>
<html>
<head>
	  <title>Success Page page- Without forUsing formGetters withand data<Setters</title>
</head>
<body>
  <p>
    Hello, <ww<saf:property value="parameters.yourName" />!
  </p>
</body>
</html>

 

Try it

...

!

Don't forget to compile your action to webapp/WEB-INF/classes, and to restart your web application if necessary.

Go ahead and try it now. Load page04helloName.jsphtml, enter "Bob" in the text field, and click the form submit button. You should see page04helloName2-success.jsp saying "Hello, Bob!"

Warning
titleDon't forget!

Compile your Action to WEB-INF/classes and restart your container if necessary.

How the code works

You've probably figured out what is going on just from looking at the code.

Instead of a setter setYourName() setting setName accessing a private variable yourName name in the actionAction class, setParameters() magically extracts everything from the JSP request object and puts the attributes into a private local Map, parameters. Then In the execute(), method, we can get the value from the parameters Map instead of looking for a yourName variable, is able to get the value of the "yourName" field from parameters name property. So far so good.

Back on the page04helloName2-success.jsp page, <ww<saf:property value="yourNamename" /> isn't going to work any more, because there is no getYourNamegetName() getter method in the actionAction. Instead, <ww<saf:property value="parameters.yourNamename" /> calls the getParameters() getter method, and is able to get the value of the "yourNamename" field. Pretty neat! Wiki MarkupWe haven't covered how to handle radio buttons, checkboxes, and other strange html form fields. That involves dealing with the fact that every entry in the {{parameters}} Map is a String\[\]. We'll cover this in a later lesson.

Summary

Before processing an Action, the framework matches any Acton properties with request attributions. If a match is found, the attribute value is set to the Action property. The Action can process the value, and the SAF tags can present the value too. Rather than define a separate property for each attribute, you can define a single Map property instead. In that case, all the request attributes will set to the Map automatically.

Next

Onward to Understanding Results

Prev

Return to Hello World