Struts 2 > Lesson 2 - An html form with no data |

Struts 2
Lesson 2 - An html form with no data
Edit Page Browse Space Add Page Add News
Added by vitorsouza, last edited by Ted Husted on Sep 03, 2006 (view change) show comment hide comment
Comment:
Update parent page
View page history

# Lesson 2: An html form with no data

In this lesson, we are going to create a JSP with a form which, when submitted, loads a different JSP page saying "Hello, WebWorld!". To do that, we are going to write our first WebWork action.

## Background: what are actions?

In JSP programming, submitting a form typically loads another JSP page where the form is processed using request.getProperty(). The form html looks like: `<form action="foo.jsp">`.

When you submit an html form using WebWork, the form is sent to a Java class that you write yourself, not to a JSP page. These classes are called WebWork actions. The form html typically looks like: `<form action="foo.action">`.

In a Model-View-Controller approach, the WebWork action is part of the Controller, leaving to JSP pages what they do best: the View. (If you don't know what a Model-View-Controller is, don't worry about this.)

## The code

These are typical steps for creating a form and its action:

1. Create a JSP page with a form that calls the action.
2. Create the action class.
3. Register the action in `xwork.xml`.
4. Create a JSP page that will display the result.
5. Compile the action class. If necessary, restart your webapp.

   | Watch out for typos! If something doesn't work properly, the first thing you'll want to do in this lesson is check all the files for typos, both in the files themselves as well as in the file names. This is a common source of errors.

### 1. Create a JSP page with a form that calls the action

Past this code into file called `page02.jsp`.

    <html>
    <head>
    	<title>A simple form with no data</title>
    </head>
    <body>
    	<p>Click the button below to activate Form02Action.</p>

    	<form action="form02.action" method="post">
    		<p><input type="submit" value="Click me." /></p>
    	</form>

    </body>
    </html>

This is a form with no entry fields, just a submit button. Notice that the form's action attribute doesn't point to a jsp page, but to something strange called `form02.action`. We'll soon see why.

### 2. Create the action class

We are now going to create a Java class that will be part of the Java package "lessons". It doesn't matter where you keep this and other .java files; for example, they could be in these directories (if you are using Windows):

    c:
    \|_java
      \|_src
        \|_lessons

In these lessons, the above "src" directory is referred to as [src].

All our Java classes will be compiled to [webapp]/WEB-INF/classes. You'll have to include all the [webapp]/WEB-INF/lib/*.jar files in your CLASSPATH in order to compile these classes.

Paste this code into a file [src]/lessons/Form02Action.java:

    package lessons;

    import com.opensymphony.xwork.ActionSupport;

    public class Form02Action extends ActionSupport {
    	String hello;

    	public String getHello() {
    		return hello;
    	}

    	public String execute() throws Exception {
    		hello = "Hello, WebWorld!";
    		return SUCCESS;
    	}

    }

### 3. Register the action in `xwork.xml`

Edit the xwork.xml file as shown below, adding the form02 action and something called an interceptor to the default package.

    <!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="webwork-default.xml" />

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

    		<!-- 02 -->
    		<action name="form02" class="lessons.Form02Action">
    			<result name="success" type="dispatcher">page02-success.jsp</result>
    		</action>
    	</package>
    </xwork>

> Read more: struts.xml

### 4. Create a JSP page that will display the result

Paste this code into a file [webapp]/page02-success.jsp:

    <%@ taglib uri="webwork" prefix="ww" %>
    <html>
    <head>
    	<title>Success page for form with no data</title>
    </head>
    <body>

    <ww:property value="hello" />

    </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: click the form submit button on page02.jsp and see what happens. You should see a page that says "Hello, WebWorld!".

## How the code works

The above four files work together like this.

- You click the form submit button on page02.jsp, sending it to your web application server.
- The server receives the request for `helloWebWebWorld.action`. Looking in [webapp]/WEB-INF/web.xml, it sees that all *.action requests are to be handed off to `com.opensymphony.webwork.dispatcher.ServletDispatcher`. Essentially, the request is handed to WebWork now.
- WebWork looks in xwork.xml for an action named "form02". There it finds that this corresponds to the class "lessons/Form02Action," instantiates it, and calls its excute() method.
- execute() returns SUCCESS, and WebWork looks again in xwork.xml to see what page to load if SUCCESS is returned. It finds the page "form02-success.jsp".
- The page page02.jsp is processed (the `<ww:property value="hello" />` tag calls the getter `getHello()` of Form02Action) and sent back to the browser.

To sum up: with WebWork, all html forms are sent to actions. The actions return constants like SUCCESS to specify (via xwork.xml) what page to return.

In this example, the form contained no data. In the next lesson, we'll see how to send form data to an action. Since page02-success.jsp called a getter of the action, you might guess that the form fields are going to call setters. You'd be right.

Previous Lesson | Next Lesson