Web apps in a snap

Create a login page with WebWork, JSP, and Velocity

Web application design and development can be complex and time consuming. However, you can simplify the process by using a framework to handle common Web application development tasks. Several open source Web application frameworks can do that and much more. One of the best is WebWork, a Web application framework from the OpenSymphony group of open source projects.

WebWork's greatest strengths are its simplicity and flexibility. WebWork has a small API that allows developers to get up and running in no time. It offers a great combination of features and flexibility, including the ability to use various view technologies such as JavaServer Pages (JSP), Velocity, Extensible Stylesheet Language Transformations Specification (XSLT), and JasperReports. WebWork also has an active community of architects, developers, and users.

Note: This article is based on WebWork 1.3.0 release candidate 2 (RC2). In order to run the examples provided, you need to create a folder in the webapps directory of your application server, copy the examples into the new folder, and copy the required jar files from the WebWork distribution into the WEB-INF/lib directory. Download WebWork and the source code that accompanies this article from Resources.

Actions

One of the most important features in WebWork is the Action interface. WebWork actions control a Web application's flow by providing mapping between pages (or views) and business logic. In WebWork, forms are submitted to an action URI (Uniform Resource Identifier); the URI maps to a corresponding action; the action executes; and the user is forwarded to the appropriate view.

The following class, LoginAction, is an example of a WebWork action that processes the login form in a Web-based application. LoginAction extends ActionSupport, a base class that provides error handling, view mapping, and a number of other useful functionalities:

import webwork.action.*;
public class LoginAction extends ActionSupport
{
  private String userName;
  private String password;  
  public String getPassword()
  {
    return password;
  }
  public String getUserName()
  {
    return userName;
  }
  public void setPassword(String password)
  {
    this.password = password;
  }
  public void setUserName(String userName)
  {
    this.userName = userName;
  }
    
  public String doExecute()
  {
    return SUCCESS;
  }
  public void doValidation()
  {
    if (userName == null || userName.length() < 1) addError("UserName", "Please enter username.");
    if (password == null || password.length() < 1) addError("Password", "Please enter password.");
  }
}

LoginAction contains two JavaBean attributes, password and username. WebWork pulls the data from these attributes into your views as needed and automatically parses any parameters sent to an action to set the attributes' values.

LoginAction overides two methods from ActionSupport: doValidation() and doExecute(). The doValidation() method validates parameters, and the doExecute() method forwards users to the appropriate view. The doExecute() method returns a string, usually the constant SUCCESS if all processing succeeds, or the constant INPUT to return the user to the INPUT view if there are any problems. The call to addError in the doValidation() method of LoginAction indicates a validation problem and returns the user to the INPUT view.

View mapping

WebWork actions map to views in two ways: through an Action.xml file or a views.properties file. Each action should have an INPUT view and a SUCCESS view. The following Action.xml file defines two actions, loginJSP and loginVelocity. Both actions use the LoginAction class and forward the user to success.html if LoginAction returns SUCCESS. If LoginAction returns INPUT, the action forwards the user to the corresponding INPUT view, either login.jsp or login.vm:

<actions>
  <action name="LoginAction" alias="loginJSP">
    <view name="input">login.jsp</view>
    <view name="success">success.html</view>
  </action>
  <action name="LoginAction" alias="loginVelocity">
    <view name="input">login.vm</view>
    <view name="success">success.html</view>
  </action>
</actions>

Views

Although WebWork provides support for many different view technologies, the most common are JSP and Velocity. The pages below are two login page examples—one created using JSP and one created using Velocity. Each page contains a form with username and password fields that are submitted to a WebWork action.

The login.jsp page uses the WebWork tag library to create and populate the two fields, and to iterate through a collection of errors. The webwork:textfield and webwork:password tags create text and password fields, and the webwork:iterator tag iterates over any errors returned from LoginAction. The webwork:property tag sets the username, password, and errors attributes:

<%@ taglib uri="webwork" prefix="webwork" %>
<html>
  <head>
    <title>WebWork JSP Example</title>
  </head>
  <body>
  <form action="loginJSP.action" method="post">
    <webwork:property>
      <webwork:textfield label="'Name'" name="'userName'"/>
      <webwork:password label="'Password'" name="'password'"/>
    </webwork:property>
    <input type="submit" value="Submit"/>
  </form>
  <webwork:iterator value="errors">
    <br><webwork:property/>
  </webwork:iterator>
  </body>
</html>

The login.vm page uses the Velocity Template Language to populate the fields and iterate over the errors. In Velocity, the $ symbol indicates a reference; the ! symbol tells Velocity to display nothing if the reference is null; and the # symbol indicates a directive. In the following example, $!userName and $!password reference the username and password attributes of LoginAction; and the #foreach directive loops through the errors attribute:

 <html>
  <head>
    <title>WebWork Velocity Example</title>
  </head>
  <body>
  <form action="loginVelocity.action" method="post">
    <input type="text" name="userName" value="$!userName"/>
    <input type="text" name="password" value="$!password"/>
    <input type="submit" value="Submit"/>
  </form>
  #foreach ($error in $errors)
    <br>$error
  #end
  </body>
</html>

Get to work!

WebWork is a simple, flexible, and powerful open source Web application framework. This article has introduced basic WebWork functionality. Visit the OpenSympony Website to learn more and to download the latest version of WebWork. After you've downloaded WebWork, head to the Jakarta Website and look at Velocity, a simple, fast open source template engine that can be a great alternative to JSP in your Webpages.

Erik Swenson is a consultant and the founder of Open Source Software Solutions. Swenson specializes in Java development using open source software and components. Moreover, he developed the JasperEdit and OpenReports open source projects.

Learn more about this topic

Notice to our Readers
We're now using social media to take your comments and feedback. Learn more about this here.