Struts2 Ajax Drop Down

In this example I am trying to create a autocomplete textbox and when you select one value from this autocomplete drop down the other will populate accordingly.

This post is for developers who are new to Struts 2.

This example uses

- Struts 2.0.14 - Download Struts
- apache-tomcat-6.0.18 - Download Tomcat
- java version "1.6.0_10"
- freemarker template (2.3.8) for the second dropdown.

You can use this example as is or play around with it based on your need.

index.jsp :

This page redirects the request to the demo page where autocomplete text box is diplayed.

<%@ taglib prefix="s" uri="/struts-tags" %>
<s:action name="ShowDemo" executeresult="true">s:action>

autocomplete.jsp

This page contains the core of this example, the Struts tags for Autocomplete

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>








Link two autocompleter elements. When the selected value in 'Autocompleter 1' changes,
the available values in 'Autocompleter 2' will change also.

Autocompleter 1

Autocompleter 2

options.ftl

This is Freemarker template to render the second drop down, which is populated based on selection in first autocomplete drop down.

[
<#list options as option>
["${option}"],

]

ListingAction.java

This action class is to populate values in the first autocomplete drop down.

package ajaxdemo.action;

import java.util.ArrayList;
import java.util.List;

import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")
public class ListingAction extends ActionSupport {
private List selectList = null;

public String execute() throws Exception {
selectList = new ArrayList();
selectList.add("Fruits");
selectList.add("Colors");
return SUCCESS;
}

public List getSelectList() {
return selectList;
}

public void setSelectList(List selectList) {
this.selectList = selectList;
}

}

DetailAction.java

This is a action class to populate the second autocomplete drop down based on selection value in first drop down.

package ajaxdemo.action;

import java.util.ArrayList;
import java.util.List;

import com.opensymphony.xwork2.ActionSupport;

public class DetailAction extends ActionSupport {
private String select;
private List options = new ArrayList();

private static final long serialVersionUID = -8481638176160014396L;

public String execute() throws Exception {
if ("Fruits".equalsIgnoreCase(select)) {
options.add("apple");
options.add("banana");
options.add("grape");
options.add("pear");
} else if ("Colors".equalsIgnoreCase(select)) {
options.add("red");
options.add("green");
options.add("blue");
}
return SUCCESS;
}

public String getSelect() {
return select;
}

public void setSelect(String select) {
this.select = select;
}

public List getOptions() {
return options;
}
}

struts.xml

Struts config file for action mappings.

/autocomplete.jsp


/options.ftl

web.xml

The application deployment descriptor.

struts2
org.apache.struts2.dispatcher.FilterDispatcher



struts2
/*


index.jsp

Output

Go the URL http://localhost:8080/ajaxdemo/ in your favorite web browser. The page should look like above.




Web application directory Structure
This is how the application war directory structure should look like.

ajaxdemo/
ajaxdemo/index.jsp
ajaxdemo/autocomplete.jsp
ajaxdemo/options.ftl
ajaxdemo/WEB-INF/web.xml
ajaxdemo/WEB-INF/classes/struts.xml
ajaxdemo/WEB-INF/classes/ajaxdemo/action/DetailAction.class
ajaxdemo/WEB-INF/classes/ajaxdemo/action/ListingAction.class
ajaxdemo/WEB-INF/lib/*.jar

Here are the list of jar files you need to have in your application WEB-INF/lib dir.

antlr-2.7.2.jar
aopalliance-1.0.jar
classworlds-1.1.jar
commons-beanutils-1.7.0.jar
commons-chain-1.1.jar
commons-codec-1.3.jar
commons-collections-2.1.jar
commons-collections-3.1.jar
commons-digester-1.6.jar
commons-digester-1.8.jar
commons-el-1.0.jar
commons-fileupload-1.1.1.jar
commons-io-1.1.jar
commons-lang-2.1.jar
commons-logging-1.0.4.jar
commons-logging-api-1.1.jar
commons-validator-1.3.0.jar
dwr-1.1-beta-3.jar
freemarker-2.3.8.jar
jstl-1.1.0.jar
log4j-1.2.9.jar
myfaces-api-1.1.2.jar
myfaces-impl-1.1.2.jar
ognl-2.6.11.jar
oro-2.0.8.jar
plexus-container-default-1.0-alpha-10.jar
plexus-utils-1.2.jar
sitemesh-2.2.1.jar
spring-beans-2.0.5.jar
spring-context-2.0.5.jar
spring-core-2.0.5.jar
spring-web-2.0.5.jar
struts-core-1.3.5.jar
struts2-codebehind-plugin-2.0.14.jar
struts2-config-browser-plugin-2.0.14.jar
struts2-core-2.0.14.jar
struts2-jsf-plugin-2.0.14.jar
struts2-sitemesh-plugin-2.0.14.jar
struts2-struts1-plugin-2.0.14.jar
struts2-tiles-plugin-2.0.14.jar
tiles-api-2.0.4.jar
tiles-core-2.0.4.jar
tiles-jsp-2.0.4.jar
velocity-1.4.jar
velocity-dep-1.4.jar
velocity-tools-1.1.jar
xml-apis-1.0.b2.jar
xwork-2.0.7.jar

Struts2 Framework and Architecture

A framework tries to automate the common tasks and provides a platform for the users to build applications quickly.

Struts 2 is based on the OpenSymphony Web Works Framework.

Struts 2 framework implements the Model-View-Controller (MVC) design pattern.

In Struts 2 the model, view and controller are implemented by the action, result and FilterDispatcher respectively.

The controller's job is to map the user request to appropriate action.

In Struts 2 FilterDispatcher does the job of Controller.

Model contains the data and the business logic.

In Struts 2 the model is implemented by the Action component.

View is the presentation component of the MVC Pattern.

In Struts 2 the view is commonly implemented using JSP, Velocity Template, Freemaker or some other presentation-layer technology.

The controller receives the user request and determine which Struts 2 action to invoke.

The framework creates an instance of this action and associate it with the newly created instance of the ActionInvocation.

In Struts 2 the invocation of action should pass through a series of interceptors as defined in the application's XML file.

The framework calls the ActionInvocations invoke() method to start the execution of the action.

Each time the invoke() method is called, ActionInvocation consults its state and executes whichever interceptor comes next.

ActionInvocation hands control over to the interceptor in the stack by calling the interceptors intercept() method.

The intercept() method of the interceptor inturn calls the invoke() method of the ActionInvocation till all the interceptors are invoked, in the end the action itself will be called and the corresponding result will be returned back to the user.

Some interceptor do work before the action is executed and some do work after the action is executed. It's not necessary that it should do something each time it is invoked.

These interceptors are invoke both before and after the action.

First all the interceptors are executed in the order they are defined in the stack.

Then the action is invoked and the result is generated.

Again all the interceptors present in the stack are invoked in the reverse order.

The other important features of Struts 2 are OGNL and ValueStack.

Object-Graph Navigation Language (OGNL) is a powerful expression language that is used to reference and manipulate data on the ValueStack.

OGNL help in data transfer and type conversion.

OGNL expression language provides simplified stytax to reference java objects.

OGNL is used to bind the java-side data properties to the string-based view layer.

In Struts 2 the action resides on the ValueStack which is a part of the ActionContext. ActionContext is a global storage area that holds all the data associated with the processing of a request.

When a request comes the params interceptor helps in moving the request data to the ValueStack.

Now the OGNL does the job of converting the string based form data to their corresponding java types. OGNL does this by using the set of available built-in type converters.

Again when the results are generated the OGNL converts the java types of the property on the ValueStack to the string-based HTML output.

ActionContext is thread local which means that the values stored in the ActionContext are unique per thread, this makes the Struts 2 actions thread safe.