Struts 2: Introducing the framework - Part 2: Autocompleter

Posted by jcargoo | Sunday, October 26, 2008
| 0Delicious Twitter Reddit Digg Loading...


Live demo: Not available from now on.

In this part you will find how struts2 fines down the autocompletion. This example is based on the ajax theme.
The ajax theme extends the xhtml theme with AJAX features. The theme uses the popular DOJO AJAX/JavaScript toolkit.
The aim of the current example is to help the user to select French region (total of 22 regions) he is looking for. Those regions will be suggested in a list. This list will use the autocomplete feature.
All things we need is to create an action which will add all regions before suggesting them as a list in a JSP page.
Our famous struts.xml is like this:



<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="autocompletiontest" extends="struts-default">
<action name="autocompleter"
class="net.jcargoo.autocompleter">
<result name="SUCCESS">/pages/autocompleter.jsp</result>
</action>
</package>
</struts>

The web application is invoked directly by its name, and then we will need a welcome file as it is configured in following web server file configuration (web.xml):
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<filter>
<filter-name>struts2</filter-name>
<filter-class>
org.apache.struts2.dispatcher.FilterDispatcher
</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
Here is the index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>E-Bouff</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Refresh"
content="0;URL=autocompleter.action" />
<link rel="stylesheet" type="text/css" href="./css/style.css"
media="screen" />

</head>
<body>
<div class="main">
<h1>
Struts 2 Autocompleter
</h1>
<h2>
Easy autocompletion
</h2>
For more info visit:
<a href="http://jcargoo.blogspot.com">http://jcargoo.blogspot.com</a>
<br />
<br />
<div class="box">
<p>
Please wait for the web application to start...
</p>
</div>
</div>
</body>
</html>
As you may notice, as soon as the welcome file is invoked, the user will be dispatched via the HTML element “meta http-equiv="Refresh"” to autocompleter action.
The code of the main action is:

package net.jcargoo;

/**
* @author JCargoo Community 2008
*
*/

import com.opensymphony.xwork2.ActionSupport;
import java.util.*;

public class autocompleter extends ActionSupport {
private List state;

public String execute() throws Exception {
state = new ArrayList();
state.add("Alsace");
state.add("Aquitaine");
state.add("Auvergne");
state.add("Basse Normandie");
state.add("Bourgogne");
state.add("Bretagne");
state.add("Centre");
state.add("Champagne - Ardenne");
state.add("Corse");
state.add("Franche Comté");
state.add("Haute Normandie");
state.add("Ile de France");
state.add("Languedoc Roussillon");
state.add("Limousin");
state.add("Lorraine");
state.add("Midi Pyrénées");
state.add("Nord - Pas de Calais");
state.add("Pays de la Loire");
state.add("Picardie");
state.add("Poitou - Charente");
state.add("Provence Alpes Cote d'azur");
state.add("Rhone Alpes");

return "SUCCESS";
}

public List getState() {
return state;
}
}


The action is using a List type field (state) to store all the French regions to be suggested in the final JSP page.
Since the result name is "SUCCESS" as per the file struts.xml, the action will forward us now to the main JSP file “autocompleter.jsp” to provide us the expected result. The code of the autocompleter.jsp is as follows:

<%@ taglib prefix="s" uri="/struts-tags"%>

<html>
<head>
<title>Struts 2 Autocompleter</title>
<s:head theme="ajax" />
<link href="<s:url value="/css/style.css"></s:url>" rel="stylesheet"
type="text/css">
</head>
<body>
<div class="main">
<h1>
Struts 2 Autocompleter
</h1>
<h2>
Easy autocompletion
</h2>
For more info visit:
<a href="http://jcargoo.blogspot.com">http://jcargoo.blogspot.com</a>
<br />
<br />
<div class="box">
<label>
<s:label name="stateName" value="Select Your French State Name" />
<s:autocompleter theme="simple" list="state" name="StateName" />
</label>
</div>
</div>
</body>
</html>
The element s:head represents a very important information as it indicates that we are using the ajax theme.

The autocomplete tag is a Combobox that can autocomplete text entered on the input box. When used on the "simple" theme, the autocompleter can be used like the ComboBox. When used on the "ajax" theme, the list can be retrieved from an action.

For UI files, we have chosen to style the representation with style.css which you can find in the zip source code.

Remark: To get the complete source code just click on here (used struts2 libs are enclosed).

Now if you have deployed the web application in Tomcat and used the port 8080, you just need to use this URL : http://localhost:8080/autocompletiontest. You can find the results in the video below:

In order to visualize the video with HD, just activate it!


Struts 2 Autocompleter from jcargoo on Vimeo

  • To enhance this example we can establish a Data Base connection in the “execute” in order to get the list values to show on the autosuggest list.
  • If you check the HTML source, you will find that the following element was added automatically by struts:
  • <select dojoType="struts:ComboBox" id="StateName" name="StateName" keyName="StateNameKey">

    This confirms that the used ajax theme is using DOJO.


    How to encourage this blog if you like it:
    • Promote our sponsors;
    • Add any kind of comment or critic;
    • Ask me directly by email if you prefer.
    Just do something like that, and I will have the huge pleasure to continue posting the best of the creativity I have.




    Share this post ?

    Digg Reddit Stumble Delicious Technorati Twitter Facebook

    1 Previous Comments
    1. Anonymous | November 29, 2008 at 3:08 AM  

      Thanks a lot for this example and downloadable code. I had spent an INSANE amount of time trying to get datetimepicker to work. Your war showed me that the structure of my web project needed to be tweaked a little (who would have thought that it affects dojo). Thanks much and have a great day!! - Anu