• They are defined by an expression. The result of evaluation of this expression becomes the value of the column.
• The values of the virtual column are not stored in the database. Rather, it’s computed at run-time when you query the data.
• You can’t update (in SET clause of update statement) the values of virtual column. These are read only values, that are computed dynamically and any attempt to modify them will result into oracle error.

The syntax for defining a virtual column is:

column_name [datatype] [GENERATED ALWAYS] AS [expression] [VIRTUAL]

where the parameters within [] are optional and can be omitted. If you don’t mention the datatype, Oracle will decide it based on the result of the expression.

Excepting the above points, a virtual column, exists just like any other column of a normal table and the following points apply to it:

1. Virtual columns can be used in the WHERE clause of UPDATE and DELETE statement but they can’t be modified by DML.
2. Statistics can be collected on them.
3. They can be used as a partition key in virtual column based partitioning.
4. Indexes can be created on them. As you might have guessed, oracle would create function based indexes as we create on normal tables.
5. Constraints can be created on them.

Create table with Virtual Column

For creating a virtual column, use the syntax mentioned above. Consider the following example:

CREATE TABLE EMPLOYEE
(
	empl_id        NUMBER,
	empl_nm        VARCHAR2(50),
	monthly_sal    NUMBER(10,2),
	bonus          NUMBER(10,2),
	total_sal      NUMBER(10,2) GENERATED ALWAYS AS (monthly_sal*12 + bonus)
);

Here we have defined a virtual column “total_sal” whose value would be dynamically calculated using the expression provided after the “generated always as” clause. Please note that this declaration is different than using “default” clause for a normal column as you can’t refer column names with “default” clause.

Lets check the data dictionary view:

SELECT column_name, data_type, data_length, data_default, virtual_column
  FROM user_tab_cols
 WHERE table_name = 'EMPLOYEE';

COLUMN_NAME | DATA_TYPE | DATA_LENGTH | DATA_DEFAULT             | VIRTUAL_COLUMN
EMPL_ID     | NUMBER    | 22          | null                     | NO
EMPL_NM     | VARCHAR2  | 50          | null                     | NO
MONTHLY_SAL | NUMBER    | 22          | null                     | NO
BONUS       | NUMBER    | 22          | null                     | NO
TOTAL_SAL   | NUMBER    | 22          | "MONTHLY_SAL"*12+"BONUS" | YES

The value “YES” for the column “virtual_column” tells us that this is a virtual column. Another optional keyword “VIRTUAL” can also be added to make it syntactically complete.

DROP TABLE EMPLOYEE PURGE;

CREATE OR REPLACE FUNCTION get_empl_total_sal ( p_monthly_sal   NUMBER,
                                                p_bonus         NUMBER)
   RETURN NUMBER
DETERMINISTIC
IS
BEGIN
   RETURN p_monthly_sal * 12 + p_bonus;
END;

CREATE TABLE EMPLOYEE
(empl_id     NUMBER,
 empl_nm     VARCHAR2(50),
 monthly_sal NUMBER(10,2),
 bonus       NUMBER(10,2),
 total_sal   NUMBER(10,2) AS (get_empl_total_sal(monthly_sal, bonus)) VIRTUAL
);

We have included the “VIRTUAL” clause in the table definition. Please note that instead of using an expression, I have used a deterministic function. A deterministic function, when passed certain inputs, will always return the exact same output. “DETERMINISTIC” keyword is needed in order to mark a function as a candidate to be used in a function based index.

You can also create indexes on the virtual columns. Here is an example:

CREATE INDEX idx_total_sal ON employee(total_sal);

SELECT index_name, index_type
  FROM user_indexes
 WHERE table_name = 'EMPLOYEE';

INDEX_NAME     INDEX_TYPE
IDX_TOTAL_SAL  FUNCTION-BASED NORMAL

Note that even this function is used as part of table definition, you can still drop it. But this in turn will make the table inaccessible.

DROP FUNCTION get_empl_total_sal;

SELECT * FROM employee;
*
Error at line 0
ORA-00904: "schema"."GET_EMPL_TOTAL_SAL": invalid identifier

You can alter the table with virtual column as you would modify a table with normal columns. Lets add the same column using the ALTER command:

DROP TABLE EMPLOYEE PURGE;

CREATE TABLE EMPLOYEE
(empl_id     NUMBER,
 empl_nm     VARCHAR2(50),
 monthly_sal NUMBER(10,2),
 bonus       NUMBER(10,2)
);

ALTER TABLE EMPLOYEE ADD (total_sal AS (monthly_sal * 12 + bonus));

Note that the datatype of the new column is not declared. It will be assigned a datatype based on the result of the expression (in this case, it would be NUMBER). Now let’s insert some data in the table:

INSERT INTO employee (empl_id, empl_nm, monthly_sal, bonus)
   WITH DATA AS
        (SELECT 100 empl_id, 'AAA' empl_nm, 20000 monthly_sal, 3000 bonus
           FROM DUAL
         UNION
         SELECT 200, 'BBB', 12000, 2000
           FROM DUAL
         UNION
         SELECT 300, 'CCC', 32100, 1000
           FROM DUAL
         UNION
         SELECT 400, 'DDD', 24300, 5000
           FROM DUAL
         UNION
         SELECT 500, 'EEE', 12300, 8000
           FROM DUAL)
   SELECT *
     FROM DATA;

SELECT * FROM employee;

EMPL_ID | EMPL_NM | MONTHLY_SAL | BONUS | TOTAL_SAL
100     | AAA     | 20000       | 3000  | 243000
200     | BBB     | 12000       | 2000  | 146000
300     | CCC     | 32100       | 1000  | 386200
400     | DDD     | 24300       | 5000  | 296600
500     | EEE     | 12300       | 8000  | 155600

Here we have populated the table columns except the virtual column with some values. Upon selecting the data, we get the value for “total_sal”. Remember that this data is not actually stored in the database but evaluated dynamically. Lets try updating this value of this virtual column:

UPDATE employee
   SET total_sal = 2000;

ORA-54017: UPDATE operation disallowed on virtual columns

As mentioned before, the statistics can also be gathered for the virtual columns.

EXEC DBMS_STATS.GATHER_TABLE_STATS(user, 'EMPLOYEE');

SELECT column_name, num_distinct,
       display_raw (low_value, data_type)  low_value,
       display_raw (high_value, data_type) high_value
  FROM dba_tab_cols
 WHERE table_name = 'EMPLOYEE';

COLUMN_NAME | NUM_DISTINCT | LOW_VALUE | HIGH_VALUE
TOTAL_SAL   | 5            | 146000    | 386200
BONUS       | 5            | 1000      | 8000
MONTHLY_SAL | 5            | 12000     | 32100
EMPL_NM     | 5            | AAA       | EEE
EMPL_ID     | 5            | 100       | 500

Limitations on Virtual Columns

**The query above uses a wonderful function “display_raw” by “Greg Rahn” to display the high/low values. Please check the references at the last to see it’s definition.

1. A virtual column can only be of scalar datatype or XMLDATATYE. It can’t be a user defined type, LOB or RAW.
2. All columns mentioned as part of the virtual column expression should belong to the same table.
3. No DMLs are allowed on the virtual columns.
4. The virtual column expression can’t reference any other virtual column.
5. Virtual columns can only be created on ordinary tables. They can’t be created on index-organized, external, object, cluster or temporary tables.
6. If a deterministic function is used as virtual column expression, that virtual column can’t be used as a partitioning key for virtual column-based partitioning.

Virtual Column-Based Partitioning

Prior releases of Oracle only allowed a table to be partitioned based on a physical column. Oracle 11g, with the addition of virtual columns, now allows a partition key based on an expression, using one or more existing columns of the table. A virtual column can now be used as a partitioning key. Lets partition our table based on the virtual column “total_sal”:

DROP TABLE EMPLOYEE PURGE;

CREATE TABLE employee
(empl_id     NUMBER,
 empl_nm     VARCHAR2(50),
 monthly_sal NUMBER(10,2),
 bonus       NUMBER(10,2),
 total_sal   NUMBER(10,2) AS (monthly_sal*12 + bonus)
)
PARTITION BY RANGE (total_sal)
    (PARTITION sal_200000 VALUES LESS THAN (200000),
     PARTITION sal_400000 VALUES LESS THAN (400000),
     PARTITION sal_600000 VALUES LESS THAN (600000),
     PARTITION sal_800000 VALUES LESS THAN (800000),
     PARTITION sal_default VALUES LESS THAN (MAXVALUE));

INSERT INTO employee (empl_id, empl_nm, monthly_sal, bonus)
   WITH DATA AS
        (SELECT 100 empl_id, 'AAA' empl_nm, 20000 monthly_sal, 3000 bonus
           FROM DUAL
         UNION
         SELECT 200, 'BBB', 12000, 2000
           FROM DUAL
         UNION
         SELECT 300, 'CCC', 32100, 1000
           FROM DUAL
         UNION
         SELECT 400, 'DDD', 24300, 5000
           FROM DUAL
         UNION
         SELECT 500, 'EEE', 12300, 8000
           FROM DUAL)
   SELECT *
     FROM DATA;

EXEC DBMS_STATS.GATHER_TABLE_STATS(user,'EMPLOYEE',granularity => 'PARTITION');

SELECT   table_name, partition_name, num_rows
    FROM user_tab_partitions
   WHERE table_name = 'EMPLOYEE'
ORDER BY partition_name;

TABLE_NAME | PARTITION_NAME | NUM_ROWS
EMPLOYEE   | SAL_200000     | 2
EMPLOYEE   | SAL_400000     | 3
EMPLOYEE   | SAL_600000     | 0
EMPLOYEE   | SAL_800000     | 0
EMPLOYEE   | SAL_DEFAULT    | 0

So far, everything looks fine, lets now try to update monthly salary of one employee and in turn the value of total_sal.

UPDATE employee
   SET monthly_sal = 30000
 WHERE empl_id = 500;

ORA-14402: updating partition key column would cause a partition change

What happened? The reason is simple, updating the “monthly_sal” would result into change in “total_sal” of the employee and thus a partition change is required. This can be handled by enabling the row movement in the current definition of the table.

ALTER TABLE employee ENABLE ROW MOVEMENT;

UPDATE employee
   SET monthly_sal = 80000
 WHERE empl_id = 500;

1 row updated.

The update works fine. As mentioned before, a deterministic function can’t be used as virtual column expression which is to be used as a partitioning key. It has to be an expression defined on the columns of the table as done in the previous example. The following syntax will result in oracle error:

CREATE TABLE employee_new
(empl_id     NUMBER,
 empl_nm     VARCHAR2(50),
 monthly_sal NUMBER(10,2),
 bonus       NUMBER(10,2),
 total_sal   NUMBER(10,2) AS (get_empl_total_sal(monthly_sal, bonus))
)
PARTITION BY RANGE (total_sal)
    (PARTITION sal_200000 VALUES LESS THAN (200000),
     PARTITION sal_400000 VALUES LESS THAN (400000),
     PARTITION sal_600000 VALUES LESS THAN (600000),
     PARTITION sal_800000 VALUES LESS THAN (800000),
     PARTITION sal_default VALUES LESS THAN (MAXVALUE));

ORA-54021: Cannot use PL/SQL expressions in partitioning or subpartitioning columns

References:

Greg Rahn’s display_raw function
Oracle Documentation

What’s Play!?

One of the newest one is Play! framework. Play is heavily inspired by Ruby on Rails and Django. A developer familiar with any of these frameworks will feel at home. Play leverages the power of Java to build web applications in an environment that is not Java Enterprise Edition-centric. By lifting away the Java EE constraints, Play provides developers with an easy-to-develop and elegant stack aimed at productivity.

I have worked in CakePHP and I am a big fan of it. I believe Play! is bringing the same experience of fast web application development to the Java world, right from hello world baby steps to create a full production ready application and writing tests.

When you visit Play!’s overview webpage on their site, the very first line will surely catch your attention.

The Play framework is a clean alternative to bloated Enterprise Java stacks. It focuses on developer productivity and targets RESTful architectures. Play is a perfect companion to agile software development.

Although the words “bloated Enterprise Java stacks” may offend many Java developers who are very used to work with Spring MVC, Struts of JavaServer Faces; I think its more of less correct and many of us already feels so working for years now in Spring / Struts and realizing how much boiler plate code is being pushed into system and how complex things became over period of time.

What I like most about Play! framework is the flexibility of this new framework and how easy it makes the life of developer. The application development becomes a piece of cake (like most CakePHP developers will feel). And the best part is all this you can do with Java without switching your favorite language and shifting to other like Rube or PHP.

Highlights of Play! framework

Let us see few differences of Play! from other Java frameworks (Courtesy Wiki):

• Play is fully RESTful – there is no Java EE session per connection. This makes Play more outwardly-scalable than many other frameworks.
• No configuration: download, unpack and develop – it’s that simple.
• Easy round trips: no need to deploy to an application server, just edit the code and press the refresh button on the browser.
• Integrated unit testing: unit testing is at the core of Play!
• Elegant API: rarely will a developer need to import any third party library – Play comes with all the typical stuff built-in.
• CRUD module: easily build administration UI with little code.
• Play is a web framework: it is language agnostic and currently supports Java and Scala.
• Modular architecture

Your first Play! application

Hello world in Play! is straight forward. I will not spend much time in describing steps for installing and configuring Play!. On its homepage, Play! framework developer Guillaume Bort has made this wonderful getting started screencast which you can follow to create your very first Play! application.

Few points I would like to highlight here is:

• Play is a real “Share nothing” system. Ready for REST, it is easily scaled by running multiple instances of the same application on several servers.
• Play! loads the code dynamically. Just fix the bug in Java file and hit reload and voila, the change will get reflected instantly on webpage. No need to go through those sluggish rebuild / deployment / server restart.
• Play! comes with a very efficient template system. The template system is based on Groovy as an expression language. It provides template inheritence, includes and tags.
• A fully functional stack of modules are available in Play!. Provides integration with Hibernate, OpenID, Memcached… And a plugin system to create your own customize plugin or include one from hundreds of freely available ones.
• Error discovery is very easy with Play!. When an error occurs, play shows you the source code and the exact line containing the problem. Even in templates.

Your first Play! – GAE – Siena application

For this tutorial, I have chosen a little complex example which we develop in Play! and deploy on Google App Engine (GAE). The GAE offers fast development and deployment; simple administration, with no need to worry about hardware, patches or backups; and effortless scalability. The Google app engine does not support SQL or RDBMS. The App Engine datastore provides robust, scalable storage for your web application, with an emphasis on read and query performance. An application creates entities, with data values stored as properties of an entity. The app can perform queries over entities. All queries are pre-indexed for fast results over very large data sets.

Our demo application called eazyBookmark is already running on Google App engine. This is a Bookmark application where user can login and save their bookmarks. Click below image to visit online demo.

Online Demo

Link: http://eazybookmark.appspot.com/

Following are the functional aspects of eazyBookmark app.

1. User can login to eazyBookmark using their Google account. No need to remember password for new account.
2. Using “Add link” functionality, user can add any URL and save as bookmark.
3. Any bookmark can be tagged with multiple tags. This way user can organize the links easily.
4. A bookmark once added can later be Edited or deleted.
5. A small bookmarklet script is available for user to add it in browser favorites. This bookmarklet can be later used by User to bookmark any webpage. Read Tools page of eazyBookmark.

Getting started

Create a blank application in Play! using play create eazybookmark commnd.

C:\Play>play new eazybookmark
~        _            _
~  _ __ | | __ _ _  _| |
~ | '_ \| |/ _' | || |_|
~ |  __/|_|\____|\__ (_)
~ |_|            |__/
~
~ play! 1.1, http://www.playframework.org
~
~ The new application will be created in C:\Play\eazybookmark
~ What is the application name? [eazybookmark]
~
~ OK, the application is created.
~ Start it with : play run eazybookmark
~ Have fun!
~

The above Hello World video shows in depth how to install and use Play and create your first application.

Adding Google App Engine (GAE) and Siena module to Play!

We need two modules for our eazybookmark application. One is Google App engine (GAE) and another one is Siena. You can install these modules by running following command with Play!.

C:\Play> play install gae
..
..
C:\Play> play install siena

The above commands will install latest version of these modules. If you are behind proxy than the above command may fails. Currently there is no way of setting up proxy with Play! (v1.1) so you can manually download gae and siena from its homepage and copy them in /modules directory of your Play!.

Once the modules are installed successfully, you can add following lines in eazybookmark apps /conf/application.conf file.

# ---- Google app engine module ----
module.gae=${play.path}/modules/gae-1.4
# ---- Siena module ----
module.siena=${play.path}/modules/siena-1.3

You may want to restart the Play application to reflect the changes of the modules.

Once the application is restarted, the GAE module creates /war/WEB-INF/appengine-web.xml file. You need to update this file and add the application id of GAE. In our case we will have following data.
File: /war/WEB-INF/appengine-web.xml

<appengine-web-app xmlns="http://appengine.google.com/ns/1.0">
	<application>eazybookmark</application>
	<version>1</version>
</appengine-web-app>

You may want to replace eazybookmark with your own GAE Application ID.

Play! and Siena models

Let us first review the model classes we going to use for our application. We will have four model classes.

• User – This is a User model. All user related information such as email, name, etc will get stored here.
• Link – This is Link model. All links related information such as URL, title, description etc will get stored here.
• Tag – This is Tag model. All the tags related information such as tagname etc will get stored here.
• LinkTag – This is a mapping model which maps Links with Tag. In Siena to create Many to Many relationship we need to create three classes. This class maps Link and Tag and add a many to many relationship to these entities.

Here is the code for each of the models.

File: /app/model/User.java

package models;

import siena.*;

public class User extends Model {

    @Id
    public Long id;

    public String email;
    public String name;
    public Date created;
    public Date modified;

    static Query<User> all() {
        return Model.all(User.class);
    }

    public static User findById(Long id) {
        return all().filter("id", id).get();
    }

    public static User findByEmail(String email) {
        return all().filter("email", email).get();
    }
	public User() {
		super();
	}
    public User(String email) {
		this.email = email;
    }

    public String toString() {
        return email;
    }
}

The User model has few attributes like email, name, created and modified which define a user. Few methods like findById() and findByEmail() select the User based on Id and email respectively.

File: /app/model/Link.java

package models;

import java.util.*;
import siena.*;

public class Link extends Model {

    @Id(Generator.AUTO_INCREMENT)
    public Long id;

    public String url;
    public String title;
    public String description;

	public Date created;

	public Date modified;

    @Filter("link")
    public Query<LinkTag> linktags;

    @Index("user_index")
    public User user;

    public Link(User user, String url) {
    	super();
    	this.url = url;
        this.user = user;
    }
	public Link() {
		super();
	}
    static Query<Link> all() {
        return Model.all(Link.class);
    }

    public static Link findById(Long id) {
        return all().filter("id", id).get();
    }

    public static List<Link> findByUser(User user) {

        return all().filter("user", user).order("-created").fetch();
    }

	public static void addTag(Link link, Tag tag) {
			LinkTag linkTag = new LinkTag(link, tag);
			linkTag.insert();
	}

    public String toString() {
        return url;
    }

	public List<Tag> findTagsByLink() {

		List<Tag> tags = LinkTag.findByLink(this);

		return tags;

	}

	public static void addTagsFromCSV(Link link, String tagcsv, User user) {
		Collection<Tag> tags = null;
		if(null != tagcsv || !tagcsv.equalsIgnoreCase("")) {
			String [] tagArr = tagcsv.split(",");
			tags = new ArrayList<Tag>();
			for(String tagstr : tagArr) {
				tagstr = play.templates.JavaExtensions.slugify(tagstr.trim()).trim();
				if(null != tagstr && !tagstr.equals("")) {
					Link.addTag(link, Tag.findOrCreateByName(tagstr,user));
				}

			}
		}
	}
}

The Link model class is similar to User. It has its own attributes such as url, title, description etc. Also note that Link model has few methods like findById(), findTagsByLink(), addTag(), addTagsFromCSV() etc. These methods are used from the controller to manipulate the link data. The Link has a many to many relationship with Tag. One link can have multiple tags attached to it.

File: /app/model/Tag.java

package models;

import siena.*;
import java.util.*;

public class Tag extends Model {

    @Id(Generator.AUTO_INCREMENT)
    public Long id;

    public String name;

	@Index("user_index")
	public User user;

    public static Query<Tag> all() {
        return Model.all(Tag.class);
    }

	public static Tag findOrCreateByName(String name, User user) {
        Tag tag = all().filter("user", user).filter("name", name).get();
        if(null == tag) {
			tag = new Tag();
			tag.name = name;
			tag.user = user;
			tag.insert();
		}
		return tag;
	}

	public static Tag findById(Long id) {
		return  all().filter("id", id).get();
	}

    public static Tag findByName(String name, User user) {
        return all().filter("user", user).filter("name", name).get();
    }

    public static List<Tag> findByUser(User user) {
        return all().filter("user", user).fetch();
    }

    public String toString() {
        return name;
    }
}

The Tag model has one attribute tag name. This can be anything like travel, leisure, technology, news etc. Also note that each tag has one to one mapping with User. This is defined by @Index("user_index") annotation with object User. The Tag has usual methods findById, findByName, findByUser, findOrCreateByName etc which is used from controller to manipulate the Tag data.

File: /app/model/LinkTag.java

package models;

import java.util.*;
import siena.*;

public class LinkTag extends Model {

    @Id
    public Long id;

    @NotNull
    @Column("link_id")
    @Index("link_index")
    public Link link;

    @NotNull
    @Column("tag_id")
    @Index("tag_index")
    public Tag tag;

	public LinkTag(Link link, Tag tag) {
		super();
		this.link = link;
		this.tag = tag;
	}

	public static Query<LinkTag> all() {
		return Model.all(LinkTag.class);
	}

	public static List<Tag> findByLink(Link link) {
		List<LinkTag> linkTags =  all().filter("link", link).fetch();
		List<Tag> tags = new ArrayList<Tag>();
		for(LinkTag linkTag : linkTags) {
			tags.add(Tag.findById(linkTag.tag.id));
		}

		return tags;
	}
	public static List<Link> findByTag(Tag tag) {
		List<LinkTag> linkTags =  all().filter("tag", tag).fetch();
		List<Link> links = new ArrayList<Link>();
		for(LinkTag linkTag : linkTags) {
			links.add(Link.findById(linkTag.link.id));
		}

		return links;
	}

	public String toString() {
		return link.toString() + " : " + tag.toString();
	}

	public static void deleteByLink(Link link) {

		List<LinkTag> linkTags = all().filter("link", link).fetch();
		if(null != linkTags) {
			for(LinkTag linktag : linkTags) {
					linktag.delete();
			}
		}
	}
}

The LinkTag model links the models Link and Tag. It adds the Many-to-many relationship between these models. We have few useful methods like findByLink, findByTag to get the list of relationship.

The Play! Controllers

The controller in Play! framework handles all the request / response between client and web server. It is a plain Java class which extends Controller class of Play!. In our application we will use two controller classes: Application and Profile. We will also have a helper class called Auth which has few useful methods to determine is a user is logged in, or to get email address of logged in user. This class invoke GAE module to get the authentication details and route user to Google page for authentication.

File: /app/controller/Auth.java

package controllers;

import play.modules.gae.*;
import com.google.appengine.api.users.*;

public class Auth {

	public static boolean isLoggedIn() {
		return GAE.isLoggedIn();
	}
	public static String getEmail() {
		return GAE.getUser().getEmail();
	}
	public static User getUser() {
		return GAE.getUser();
	}

    public static void login(String action) {
        GAE.login(action);
    }

    public static void logout(String action) {
        GAE.logout(action);
    }
}

Note that above Auth class is not part of controller (We haven’t extended it with Controller). It is just a utility class that we can use from other controllers to access user information. You may want to create your own package utils and keep this class there. For sake of simplicity, I am keeping this in controllers package.

File: /app/controller/Application.java

package controllers;

import play.mvc.*;

import models.*;
import models.User;
import java.util.*;

public class Application extends Controller {

    public static void index() {
        if(Auth.isLoggedIn()) {
            User user = User.findByEmail(Auth.getEmail());
			if(null == user) {
				user = new User();
				user.email = Auth.getEmail();
				user.created = new Date();
				user.insert();
				Profile.edit(user.id);
				return;
			}
            Profile.index(null);
        }
        render();
    }

    public static void login() {
        Auth.login("Application.index");
    }

    public static void logout() {
        Auth.logout("Application.index");
    }
}

Check the Application controller which is the entry point to our application. The index() method will be called whenever user request homepage /. In index() method we are checking if user is logged in. If not, then we show her a Login page using render() method. This method renders the default view of this action. We will see this view later in our example. Also note that if user is authenticated, we redirect it to Profile.index action. If user has logged in for first time in eazyBookmark, she will be redirected to Edit Profile page where she can select username for her profile.

File: /app/controller/Profile.java

package controllers;

import models.*;
import play.*;
import play.mvc.*;
import java.util.*;

import play.data.validation.*;
import java.net.*;
import net.htmlparser.jericho.*;
import java.io.*;

import play.Logger;
import models.Tag;

public class Profile extends Application {

    @Before
    static void checkConnected() {
        if(Auth.getUser() == null) {
            Application.login();
        } else {
            renderArgs.put("user", Auth.getEmail());
        }
    }

    public static void index(String tag) {
		User user = getUser();

		List<Link> links = null;
		if(null == tag || tag.equalsIgnoreCase("")) {
			links = Link.findByUser(user);
		} else {
			links = LinkTag.findByTag(Tag.findByName(tag, user));
		}

		List<Tag> tags = Tag.findByUser(user);

        render(user, links, tags);
    }
//...
//...
}

The Profile controller is extended from Application controller to take advantage of login() / logout() method. Also note that this is not the full code for Profile.java. You can check the full source in the project source code.

The View

All the view files in Play! framework as saved in /views/ folder with .html extension. These are the plain HTML files with certain groovy template tags. Read more about built-in template tags in Play! here. There is a file main.html in /views folder which act as the template for all other views. Following is the content of main.html for eazyBookmark.

File: /views/main.html

<!DOCTYPE html>
<html>
    <head>
        <title>#{get 'title' /}</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/main.css'}">

        #{get 'moreStyles' /}
        <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.ico'}">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        #{get 'moreScripts' /}

    </head>
    <body>
		<div id="pagewidth" >
			<div id="headerbar">
				<div id="headercol">
					<div id="logo">
						<h3><a href="/">eazyBookmark</a></h3>
					</div>
					<div id="headerlink">
						#{if user}
								${user} <span class="sep">|</span> <a href="@{Application.logout()}">Logout</a>
						#{/if}
						#{else}
							<a href="@{Application.login()}">Login</a>
						#{/else}
					</div>
				</div>
			</div>
			<div id="wrapper" class="clearfix">
					<div id="maincol">
						#{if flash.error}
							<p class="error">${flash.error}</p>
						#{/if}
						#{if flash.success}
							<p class="success">${flash.success}</p>
						#{/if}
				        #{doLayout /}
					</div>
			</div>
			<div id="footer">
				<p> Copyright &copy; ${new Date().format('yyyy')}
 					<a href="http://eazybookmark.appspot.com">eazyBookmark</a> </p>
			</div>
		</div>
    </body>
</html>

In above template main.html file, we have #{doLayout /} tag which renders the content. Also note that we are displaying error / success message using flash mechanism of Play!.

For each controller, we create a separate folder in views/ folder. And these folders will contain the view file for each action in given controller. Thus in /views/Application folder we will have index.html and in /views/Profile folder we will have edit.html, editlink.html and index.html. Download these html files from the source code attached at the end of tutorial.

Deploying Play! app in Google App Engine (GAE)

We are done with the coding of our eazyBookmark application. Now we can deploy this app in our GAE account. For that follow the basic steps given here:

1. Get yourself a GAE account and set up an application. you will need the ID.
2. Download the GAE SDK for Java
3. run play war myappname -o myappname-war
4. run APPENGINE_SDK_DIR/bin/appcfg update myappname-war/
5. Log in to your app engine console and check out your application!

You can check the Online Demo here: http://eazybookmark.appspot.com

Download full Source Code

Click here to download eazyBookmark application

The application will be a simple Contact Manager app which will allow user to add new contacts. The list of contacts will be displayed and user will be able to delete existing contacts.

Our Goal

As describe above, our goal is to create a contact manager application which will allow the user to add a contact or remove it. The basic requirement of the Contact Manager app will be:

1. Add new contact in the contact list.
2. Display all contacts from contact list.
3. Delete a contact from contact list.

Following is the screenshot of end application.

Application Architecture

We will have a layered architecture for our demo application. The database will be accessed by a Data Access layer popularly called as DAO Layer. This layer will use Hibernate API to interact with database. The DAO layer will be invoked by a service layer. In our application we will have a Service interface called ContactService.

Getting Started

For our Contact Manager example, we will use MySQL database. Create a table contacts in any MySQL database. This is very preliminary example and thus we have minimum columns to represent a contact. Feel free to extend this example and create a more complex application.

CREATE TABLE CONTACTS
(
    id              INT PRIMARY KEY AUTO_INCREMENT,
    firstname    VARCHAR(30),
    lastname    VARCHAR(30),
    telephone   VARCHAR(15),
    email         VARCHAR(30),
    created     TIMESTAMP DEFAULT NOW()
);

Creating Project in Eclipse

The contact manager application will use Maven for build and dependency management. For this we will use the Maven Dynamic Web Project in Eclipse as the base architecture of our application.

Download the below source code:
Maven Dynamic Web Project (6.7 KB)

Unzip the source code to your hard drive and import the project in Eclipse. Once the project is imported in Eclipse, we will create package structure for Java source. Create following packages under src/main/java folder.

• net.viralpatel.contact.controller – This package will contain Spring Controller classes for Contact Manager application.
• net.viralpatel.contact.form – This package will contain form object for Contact manager application. Contact form will be a simple POJO class with different attributes such as firstname, lastname etc.
• net.viralpatel.contact.service – This package will contain code for service layer for our Contact manager application. The service layer will have one ContactService interface and its corresponding implementation class
• net.viralpatel.contact.dao – This is the DAO layer of Contact manager application. It consists of ContactDAO interface and its corresponding implementation class. The DAO layer will use Hibernate API to interact with database.

Entity Class – The Hibernate domain class

Let us start with the coding of Contact manager application. First we will create a form object or hibernate POJO class to store contact information. Also this class will be an Entity class and will be linked with CONTACTS table in database.
Create a java class Contact.java under net.viralpatel.contact.form package and copy following code into it.

File: src/main/java/net/viralpatel/contact/form/Contact.java

package net.viralpatel.contact.form;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name="CONTACTS")
public class Contact {

    @Id
    @Column(name="ID")
    @GeneratedValue
    private Integer id;

    @Column(name="FIRSTNAME")
    private String firstname;

    @Column(name="LASTNAME")
    private String lastname;

    @Column(name="EMAIL")
    private String email;

    @Column(name="TELEPHONE")
    private String telephone;

    public String getEmail() {
        return email;
    }
    public String getTelephone() {
        return telephone;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public void setTelephone(String telephone) {
        this.telephone = telephone;
    }
    public String getFirstname() {
        return firstname;
    }
    public String getLastname() {
        return lastname;
    }
    public void setFirstname(String firstname) {
        this.firstname = firstname;
    }
    public void setLastname(String lastname) {
        this.lastname = lastname;
    }
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
}

The first thing you’ll notice is that the import statements import from javax.persistence rather than a Hibernate or Spring package. Using Hibernate with Spring, the standard JPA annotations work just as well and that’s what I’m using here.

• First we’ve annotated the class with @Entity which tells Hibernate that this class represents an object that we can persist.
• The @Table(name = "CONTACTS") annotation tells Hibernate which table to map properties in this class to. The first property in this class on line 16 is our object ID which will be unique for all events persisted. This is why we’ve annotated it with @Id.
• The @GeneratedValue annotation says that this value will be determined by the datasource, not by the code.
• The @Column(name = "FIRSTNAME") annotation is used to map this property to the FIRSTNAME column in the CONTACTS table.

The Data Access (DAO) Layer

The DAO layer of Contact Manager application consist of an interface ContactDAO and its corresponding implementation class ContactDAOImpl. Create following Java files in net.viralpatel.contact.dao package.

File: src/main/java/net/viralpatel/contact/dao/ContactDAO.java

package net.viralpatel.contact.dao;

import java.util.List;

import net.viralpatel.contact.form.Contact;

public interface ContactDAO {

    public void addContact(Contact contact);
    public List<Contact> listContact();
    public void removeContact(Integer id);
}

File: src/main/java/net/viralpatel/contact/dao/ContactDAOImpl.java

package net.viralpatel.contact.dao;

import java.util.List;

import net.viralpatel.contact.form.Contact;

import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class ContactDAOImpl implements ContactDAO {

    @Autowired
    private SessionFactory sessionFactory;

    public void addContact(Contact contact) {
        sessionFactory.getCurrentSession().save(contact);
    }

    public List<Contact> listContact() {

        return sessionFactory.getCurrentSession().createQuery("from Contact")
                .list();
    }

    public void removeContact(Integer id) {
        Contact contact = (Contact) sessionFactory.getCurrentSession().load(
                Contact.class, id);
        if (null != contact) {
            sessionFactory.getCurrentSession().delete(contact);
        }

    }
}

The DAO class in above code ContactDAOImpl implements the data access interface ContactDAO which defines methods such as listContact(), addContact() etc to access data from database.

Note that we have used two Spring annotations @Repository and @Autowired.

Classes marked with annotations are candidates for auto-detection by Spring when using annotation-based configuration and classpath scanning. The @Component annotation is the main stereotype that indicates that an annotated class is a “component”.

The @Repository annotation is yet another stereotype that was introduced in Spring 2.0. This annotation is used to indicate that a class functions as a repository and needs to have exception translation applied transparently on it. The benefit of exception translation is that the service layer only has to deal with exceptions from Spring’s DataAccessException hierarchy, even when using plain JPA in the DAO classes.

Another annotation used in ContactDAOImpl is @Autowired. This is used to autowire the dependency of the ContactDAOImpl on the SessionFactory.

The Service Layer

The Service layer of Contact Manager application consist of an interface ContactService and its corresponding implementation class ContactServiceImpl. Create following Java files in net.viralpatel.contact.service package.

File: src/main/java/net/viralpatel/contact/service/ContactService.java

package net.viralpatel.contact.service;

import java.util.List;

import net.viralpatel.contact.form.Contact;

public interface ContactService {

    public void addContact(Contact contact);
    public List<Contact> listContact();
    public void removeContact(Integer id);
}

File: src/main/java/net/viralpatel/contact/service/ContactServiceImpl.java

package net.viralpatel.contact.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import net.viralpatel.contact.dao.ContactDAO;
import net.viralpatel.contact.form.Contact;

@Service
public class ContactServiceImpl implements ContactService {

    @Autowired
    private ContactDAO contactDAO;

    @Transactional
    public void addContact(Contact contact) {
        contactDAO.addContact(contact);
    }

    @Transactional
    public List<Contact> listContact() {

        return contactDAO.listContact();
    }

    @Transactional
    public void removeContact(Integer id) {
        contactDAO.removeContact(id);
    }
}

In above service layer code, we have created an interface ContactService and implemented it in class ContactServiceImpl. Note that we used few Spring annotations such as @Service, @Autowired and @Transactional in our code. These annotations are called Spring stereotype annotations.

The @Service stereotype annotation used to decorate the ContactServiceImpl class is a specialized form of the @Component annotation. It is appropriate to annotate the service-layer classes with @Service to facilitate processing by tools or anticipating any future service-specific capabilities that may be added to this annotation.

Adding Spring MVC Support

Let us add Spring MVC support to our web application.

Update the web.xml file and add servlet mapping for org.springframework.web.servlet.DispatcherServlet. Also note that we have mapped url / with springServlet so all the request are handled by spring.

File: /src/webapp/WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
	<display-name>Spring3-Hibernate</display-name>
	<welcome-file-list>
		<welcome-file>list.html</welcome-file>
	</welcome-file-list>
	<servlet>
		<servlet-name>spring</servlet-name>
		<servlet-class>
			org.springframework.web.servlet.DispatcherServlet
		</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>spring</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>
</web-app>

Once the web.xml is configured, let us add spring-servlet.xml and jdbc.properties files in /src/main/webapp/WEB-INF folder.
File: /src/main/webapp/WEB-INF/jdbc.properties

jdbc.driverClassName= com.mysql.jdbc.Driver
jdbc.dialect=org.hibernate.dialect.MySQLDialect
jdbc.databaseurl=jdbc:mysql://localhost:3306/ContactManager
jdbc.username=root
jdbc.password=testpass

The jdbc.properties file contains database connection information such as database url, username, password, driver class. You may want to edit the driverclass and dialect to other DB if you are not using MySQL.

File: /src/main/webapp/WEB-INF/spring-servlet.xml

<?xml  version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:jee="http://www.springframework.org/schema/jee"
	xmlns:lang="http://www.springframework.org/schema/lang"
	xmlns:p="http://www.springframework.org/schema/p"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xmlns:util="http://www.springframework.org/schema/util"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
		http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee.xsd
		http://www.springframework.org/schema/lang http://www.springframework.org/schema/lang/spring-lang.xsd
		http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd
		http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util.xsd">

	<context:annotation-config />
	<context:component-scan base-package="net.viralpatel.contact" />

	<bean id="jspViewResolver"
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="viewClass"
			value="org.springframework.web.servlet.view.JstlView" />
		<property name="prefix" value="/WEB-INF/jsp/" />
		<property name="suffix" value=".jsp" />
	</bean>

	<bean id="messageSource"
		class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
		<property name="basename" value="classpath:messages" />
		<property name="defaultEncoding" value="UTF-8" />
	</bean>
	<bean id="propertyConfigurer"
		class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer"
		p:location="/WEB-INF/jdbc.properties" />

	<bean id="dataSource"
		class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close"
		p:driverClassName="${jdbc.driverClassName}"
		p:url="${jdbc.databaseurl}" p:username="${jdbc.username}"
		p:password="${jdbc.password}" />

	<bean id="sessionFactory"
		class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">
		<property name="dataSource" ref="dataSource" />
		<property name="configLocation">
			<value>classpath:hibernate.cfg.xml</value>
		</property>
		<property name="configurationClass">
			<value>org.hibernate.cfg.AnnotationConfiguration</value>
		</property>
		<property name="hibernateProperties">
			<props>
				<prop key="hibernate.dialect">${jdbc.dialect}</prop>
				<prop key="hibernate.show_sql">true</prop>
			</props>
		</property>
	</bean>

	<tx:annotation-driven />
	<bean id="transactionManager"
		class="org.springframework.orm.hibernate3.HibernateTransactionManager">
		<property name="sessionFactory" ref="sessionFactory" />
	</bean>
</beans>

The spring-servlet.xml file contains different spring mappings such as transaction manager, hibernate session factory bean, data source etc.

• jspViewResolver bean – This bean defined view resolver for spring mvc. For this bean we also set prefix as “/WEB-INF/jsp/” and suffix as “.jsp”. Thus spring automatically resolves the JSP from WEB-INF/jsp folder and assigned suffix .jsp to it.
• messageSource bean – To provide Internationalization to our demo application, we defined bundle resource property file called messages.properties in classpath.
  Related: Internationalization in Spring MVC
• propertyConfigurer bean – This bean is used to load database property file jdbc.properties. The database connection details are stored in this file which is used in hibernate connection settings.
• dataSource bean – This is the java datasource used to connect to contact manager database. We provide jdbc driver class, username, password etc in configuration.
• sessionFactory bean – This is Hibernate configuration where we define different hibernate settings. hibernate.cfg.xml is set a config file which contains entity class mappings
• transactionManager bean – We use hibernate transaction manager to manage the transactions of our contact manager application.

File: /src/main/resources/hibernate.cfg.xml

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE hibernate-configuration PUBLIC
    "-//Hibernate/Hibernate Configuration DTD//EN"
    "http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">

<hibernate-configuration>
    <session-factory>
        <mapping class="net.viralpatel.contact.form.Contact" />
    </session-factory>

</hibernate-configuration>

File: /src/main/resources/messages_en.properties

label.firstname=First Name
label.lastname=Last Name
label.email=Email
label.telephone=Telephone
label.addcontact=Add Contact

label.menu=Menu
label.title=Contact Manager
label.footer=© ViralPatel.net

Spring MVC Controller

We are almost done with our application. Just add following Spring controller class ContactController.java to net.viralpatel.contact.controller package.

File: /src/main/java/net/viralpatel/contact/controller/ContactController.java

package net.viralpatel.contact.controller;

import java.util.Map;

import net.viralpatel.contact.form.Contact;
import net.viralpatel.contact.service.ContactService;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class ContactController {

	@Autowired
	private ContactService contactService;

	@RequestMapping("/index")
	public String listContacts(Map<String, Object> map) {

		map.put("contact", new Contact());
		map.put("contactList", contactService.listContact());

		return "contact";
	}

	@RequestMapping(value = "/add", method = RequestMethod.POST)
	public String addContact(@ModelAttribute("contact")
	Contact contact, BindingResult result) {

		contactService.addContact(contact);

		return "redirect:/index";
	}

	@RequestMapping("/delete/{contactId}")
	public String deleteContact(@PathVariable("contactId")
	Integer contactId) {

		contactService.removeContact(contactId);

		return "redirect:/index";
	}
}

The spring controller defines three methods to manipulate contact manager application.

• listContacts method – This method uses Service interface ContactServer to fetch all the contact details in our application. It returns an array of contacts. Note that we have mapped request “/index” to this method. Thus Spring will automatically calls this method whenever it encounters this url in request.
• addContact method – This method adds a new contact to contact list. The contact details are fetched in Contact object using @ModelAttribute annotation. Also note that the request “/add” is mapped with this method. The request method should also be POST. Once the contact is added in contact list using ContactService, we redirect to /index page which in turn calls listContacts() method to display contact list to user.
  Related: Forms in Spring MVC
• deleteContact method – This methods removes a contact from the contact list. Similar to addContact this method also redirects user to /index page once the contact is removed. One this to note in this method is the way we have mapped request url using @RequestMapping annotation. The url “/delete/{contactId}” is mapped thus whenever user send a request /delete/12, the deleteCotact method will try to delete contact with ID:12.

Finally add following JSP file to WEB-INF/jsp folder.

File: /src/main/webapp/WEB-INF/jsp/contact.jsp

<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
	<title>Spring 3 MVC Series - Contact Manager | viralpatel.net</title>
</head>
<body>

<h2>Contact Manager</h2>

<form:form method="post" action="add.html" commandName="contact">

	<table>
	<tr>
		<td><form:label path="firstname"><spring:message code="label.firstname"/></form:label></td>
		<td><form:input path="firstname" /></td>
	</tr>
	<tr>
		<td><form:label path="lastname"><spring:message code="label.lastname"/></form:label></td>
		<td><form:input path="lastname" /></td>
	</tr>
	<tr>
		<td><form:label path="email"><spring:message code="label.email"/></form:label></td>
		<td><form:input path="email" /></td>
	</tr>
	<tr>
		<td><form:label path="telephone"><spring:message code="label.telephone"/></form:label></td>
		<td><form:input path="telephone" /></td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="submit" value="<spring:message code="label.addcontact"/>"/>
		</td>
	</tr>
</table>
</form:form>

<h3>Contacts</h3>
<c:if  test="${!empty contactList}">
<table class="data">
<tr>
	<th>Name</th>
	<th>Email</th>
	<th>Telephone</th>
	<th>&nbsp;</th>
</tr>
<c:forEach items="${contactList}" var="contact">
	<tr>
		<td>${contact.lastname}, ${contact.firstname} </td>
		<td>${contact.email}</td>
		<td>${contact.telephone}</td>
		<td><a href="delete/${contact.id}">delete</a></td>
	</tr>
</c:forEach>
</table>
</c:if>

</body>
</html>

Download Source code

Click here to download full source code of Contact manager application (16 KB)

That’s All folks

Compile and execute the Contact manager application in Eclipse.

If you read this far, you should follow me on twitter here.

In addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs). Existing document object model (DOM) interfaces are extended and de facto features documented.

What is DOM Storage?

DOM Storage is a way to store meaningful amounts of client-side data in a persistent and secure manner. It is a W3C draft which covers exactly how saving information on the client-side should be done. It was initially part of the HTML 5 specification, but was then taken out to be independent. Web Storage, or the somewhat confusing popular name DOM Storage, is a great way to save information for the current session and window, or for returning users.

The DOM Storage provides mechanism to securely store data in the form of key/value pairs and later retrieve to use. The main goal of this feature is to provide a comprehensive means through which interactive applications can be built (including advanced abilities, such as being able to work “offline” for extended periods of time).

DOM Storage provides a powerful way of storing and retrieving data at client side using JavaScript like APIs which are easy to use.

Scope of DOM Storage

DOM Storage provides different mechanism to store the client data using in-built storage objects which provides wide range of scope. For example, using DOM Storage it is possible to store data for a Session of user request, or for all the pages of a website.

DOMStorage storage mechanism is accessed by global variables of window object. Following are the objects available which provides different scope of data storage.

sessionStorage

The sessionStorage object can be accessed by directly referencing it by name of through window.sessionStorage. This is a global object (sessionStorage) that maintains a storage area that’s available for the duration of the page session. A page session lasts for as long as the browser is open. Opening a page in a new tab or window will cause a new session to be initiated. Note that sessionStorage can survive browser restart thus it is most useful for hanging on to temporary data that should be saved and restored if the browser is accidentally refreshed.

Example: Save a string value “Hello, World” and display it on browser refresh.

//Store the data in sessionStorage object
 sessionStorage.hello = “Hello, World!”; 

 //Retrieve the data from sessionStorage object on
 //browser refresh and display it
 window.onload = function() {
     if(sessionStorage.hello)
         alert(sessionStorage.hello);
 }

localStorage

The localStorage object is useful when one wants to store data that spans multiple windows and persists beyond the current session. The localStorage provides persistent storage area for domains.

For example: data stored at localStorage['viralpatel.net'] can be retrieved by any script hosted at level Viralpatel.net. Similarly data stored at localStorage['net'] can be accessed by scripts at any .net TLD level websites. Data stored as localStorage[''] can be accessed by all the pages on all sites.

Example: Following script will store a value hello at Viralpatel.net level. Thus all the scripts hosted at Viralpatel.net and its sub-domain level can both read and write the values.

 //Store the data in localStorage object
 localStorage['viralpatel.net'].hello = "Hello, World!";

DOM Storage API

DOM Storage objects sessionStorage and localStorage provides certain useful properties and methods API. Following are the list of such APIs.

• getItem() Method – Get the value of item passed as key to the method
• length Property – Returns the length of number of items
• remainingSpace Property – Return the remaining storage space in bytes, for the storage object
• clear() Method – Remove all the key/value pairs from DOM Storage
• key() Method – Retrieves the key at specified index
• removeItem() Method – Remove the key/value pair from DOM Storage
• setItem() Method – Sets a key/value pair

Comparing HTTP Cookies with DOM Storage

Following are few comparison points between HTTP Cookies and DOM Storage.

• HTTP Cookies can store limited amount of user data (e.g. 4KB) where as modern browser such as IE 8 supports up to 10MB of data being stored with DOM Storage
• Cookies limits the accessibility of data to a certain domain name or a URL path where as DOM Storage can limit the access to a certain domain name, or to domain TLD (like .org) or for given user session.
• The keys stored with HTTP Cookies can be retrieved by using APIs. It is possible to iterate through all the key/value pairs in HTTP Cookies. Whereas in DOM Storage it is not possible to iterate through keys. Data cannot be retrieved unless key is known.
• Data stored as HTTP Cookies can be retrieved at Server as this data is passed with request. Whereas the DOMStorage is more of client data and is not possible to retrieve it directly at server side.

Web Browser Support

Currently modern browsers such as Firefox 3.5, Internet Explorer 8 and Safari 4 fully support the DOM Storage specification. Following are the list of browsers and their corresponding values such as Storage size, Support, Survive Browser Restart.

Demo Application

Let us demonstrate the use of DOMStorage API and create a demo application.

Application Requirement

Application has a form called Client Form with some input elements. The requirement is to persist the values of the form in case the page is accidentally refreshed and restore the values back.

User Interface

Demo application will have a simple input form to enter Client information. The form will have few input fields to capture user input. In case of accidental refresh of the webpage the values should be persevered in the form.

Source Code

Following is the HTML Source code of web page containing Client Form:

<HTML>
  <HEAD>
    <TITLE>DOMStorage - Sample Application
    </TITLE>
  </HEAD>
  <BODY>
    <H2>Client Form
    </H2>
    <br/>
    <form name="clientForm" id="clientForm">
      <table>
        <tr>
          <td>First Name
          </td>
          <td>
            <input type="text" name="firstname"/>
          </td>
        </tr>
        <tr>
          <td>Last Name
          </td>
          <td>
            <input type="text" name="lastname"/>
          </td>
        </tr>
        <tr>
          <td>Date of Birth
          </td>
          <td>
            <input type="text" name="dob"/>
          </td>
        </tr>
        <tr>
          <td>Gender
          </td>
          <td>
            <input name="gender" type="radio" value="M">Male
          </input>
          <input name="gender" type="radio" value="F">Female
        </input>
          </td>
        </tr>
        <tr>
          <td>Designation
          </td>
          <td>
            <select name="designation">
              <option value="0">Software Engineer
              </option>
              <option value="1">Sr. Software Engineer
              </option>
              <option value="2">Technical Architect
              </option>
            </select>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <br/>
            <input name="submit" type="button" value="Submit"/>
            <input name="reset" type="reset" value="Reset"/>
          </td>
        </tr>
      </table>
    </form>

<script type="text/javascript" src="domstorage-persist.js"></script>

  </BODY>
</HTML>

Following is JavaScript code (content of domstorage-persist.js)

/**
 * Filename: domstorage-persist.js
 * Author: viralpatel.net
 * Description: HTML code independent form persistent
 * Usage:  persist(<form object>);
 */

function persist(form) {

/*
   * In case of page refresh,
   * store the values of form to DOMStorage
   */
    window.onbeforeunload = function () {
        var str = serialize(form);

        try {
            sessionStorage[form.name] = str;
        } catch (e) {}
    }

/*
   * If the form was refreshed and old values are available,
   * restore the old values in form
   */
    window.onload = function () {
        try {
            if (sessionStorage[form.name]) {
                var obj = eval("(" + sessionStorage[form.name] + ")");
                for (var i = 0; i < obj.elements.length - 1; i++) {
                    var elementName = obj.elements[i].name;
                    document.forms[obj.formName].elements[obj.elements[i].name].value = obj.elements[i].value;
                }

            }
        } catch (e) {}
    }
}

/*
 * Convert form elements into JSON String
 */

function serialize(form) {
    var serialized = '{ "formName":"' + form.name + '", "elements": [';
    for (var i = 0; i < form.elements.length; i++) {

        serialized += '{';
        serialized += '"name":"' + form[i].name + '",';
        serialized += '"value":"' + form[i].value + '"';
        serialized += '},';
    }
    serialized += '{"name":0, "value":0}';
    serialized += '] }';
    return serialized;
}

/*
 * Make the Client Form persistable.
 * i.e. Persist its values in case of page refresh
 */
persist(document.clientForm);

References

• W3C: Web Storage draft standard (http://dev.w3.org/html5/webstorage/)
• Mozilla Developer Center: DOM Storage (https://developer.mozilla.org/En/DOM:Storage#Description)
• MSDN: Introduction to DOM Storage ( http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx#_dom)

Further Reading

The given article focuses on the latest mechanism of DOMStorage being standardized by World Wide Web Consortium (W3C) as part of HTML5. There are few other similar technologies available which can be leveraged to store offline data in browser. Users who are interested in browser based storage are highly advisable to read about following technologies.

• HTTP Cookies (http://www.microsoft.com/info/cookies.mspx)
• DOMCached – A memcached like caching system for JavaScript using DOM storage (http://www.domcached.com)
• Google Gears (http://gears.google.com/)
• Adobe Flash – Local Shared Objects (http://www.adobe.com/products/flashplayer/articles/lso/)

In this part we will discuss about Internationalization (I18N) and Localization (L10N) in Spring 3.0 MVC. We will add i18n support followed by l10n to our HelloWorld Spring application that we created in previous tutorials in this series. I strongly recommend you to go through previous articles and download the source code of our sample application.

What is i18n and L10n?

In computing, internationalization and localization are means of adapting computer software to different languages and regional differences. Internationalization is the process of designing a software application so that it can be adapted to various languages and regions without engineering changes. Localization is the process of adapting internationalized software for a specific region or language by adding locale-specific components and translating text.

The terms are frequently abbreviated to the numeronyms i18n (where 18 stands for the number of letters between the first i and last n in internationalization) and L10n respectively, due to the length of the words. The capital L in L10n helps to distinguish it from the lowercase i in i18n.

Our Goal

Our goal is to add Internationalization and Localization support to our Spring MVC application. Once finished our app will look like.

We will add two languages support to our application: English and German. Depending on the locale setting of users browser, the appropriate language will be selected. Also user will be able to select the language from top-right corner of the application.

Message Resouces File

We will create two properties file which will contain all the messages to be displayed in the application. These files are kept in a source folder called “resources”. Create a source folder in your project by Right click on Project name > New > Source Folder and name it resources.

Create two files messages_en.properties and messages_de.properties in this folder and copy following content into it.

File: resources/messages_en.properties

label.firstname=First Name
label.lastname=Last Name
label.email=Email
label.telephone=Telephone
label.addcontact=Add Contact

label.menu=Menu
label.title=Contact Manager

label.footer=© ViralPatel.net

File: resources/messages_de.properties

label.firstname=Vorname
label.lastname=Familiename
label.email=Email
label.telephone=Telefon
label.addcontact=Addieren Kontakt 

label.title=Kontakt Manager
label.menu=Menü

label.footer=© ViralPatel.net

Configuring Internationalization (i18n) / Localization (L10n) in Spring MVC

Now we have created message resource properties for our application. We need to declare these files in spring configuration file. We will use class org.springframework.context.support.ReloadableResourceBundleMessageSource to define the message resources.

Also, note that we will provide a feature where user will be able to select language for the application. This is implemented by using org.springframework.web.servlet.i18n.LocaleChangeInterceptor class. The LocaleChangeInterceptor class will intercept any changes in the locale. These changes are then saved in cookies for future request. org.springframework.web.servlet.i18n.CookieLocaleResolver class will be used to store the locale changes in cookies.

Add following code in the spring-servlet.xml file.

File:WebContent/WEB-INF/spring-servlet.xml

	<bean id="messageSource"
		class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
		<property name="basename" value="classpath:messages" />
		<property name="defaultEncoding" value="UTF-8"/>
	</bean>

	<bean id="localeChangeInterceptor"
		class="org.springframework.web.servlet.i18n.LocaleChangeInterceptor">
		<property name="paramName" value="lang" />
	</bean>

	<bean id="localeResolver"
		class="org.springframework.web.servlet.i18n.CookieLocaleResolver">
		<property name="defaultLocale" value="en"/>
	</bean>

	<bean id="handlerMapping"
		class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping">
		<property name="interceptors">
			<ref bean="localeChangeInterceptor" />
		</property>
	</bean>

Note that in above configuration we have defined basename property in messageSource bean to classpath:messages. By this, spring will identify that the message resource message_ will be used in this application.

Change the View – The JSPs

Now as we have created two message resources files and configured it in Spring MVC, we will use these messages in the JSP files. Open all the JSP files of our demo application and update with following code.

File:WebContent/WEB-INF/jsp/header.jsp

<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>

<h3><spring:message code="label.title"/></h3>

<span style="float: right">
	<a href="?lang=en">en</a>
	|
	<a href="?lang=de">de</a>
</span>

File:WebContent/WEB-INF/jsp/menu.jsp

<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>

<p><spring:message code="label.menu"/></p>

File:WebContent/WEB-INF/jsp/footer.jsp

<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>

<spring:message code="label.footer"/>

File:WebContent/WEB-INF/jsp/contact.jsp

<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<head>
	<title>Spring 3 MVC Series - Contact Manager</title>
</head>
<body>

<form:form method="post" action="addContact.html">

	<table>
	<tr>
		<td><form:label path="firstname"><spring:message code="label.firstname"/></form:label></td>
		<td><form:input path="firstname" /></td>
	</tr>
	<tr>
		<td><form:label path="lastname"><spring:message code="label.lastname"/></form:label></td>
		<td><form:input path="lastname" /></td>
	</tr>
	<tr>
		<td><form:label path="lastname"><spring:message code="label.email"/></form:label></td>
		<td><form:input path="email" /></td>
	</tr>
	<tr>
		<td><form:label path="lastname"><spring:message code="label.telephone"/></form:label></td>
		<td><form:input path="telephone" /></td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="submit" value="<spring:message code="label.addcontact"/>"/>
		</td>
	</tr>
</table>	

</form:form>
</body>
</html>

Note that in above JSP, we used <spring:message> tag to display the message from resource bundle.

One thing that we must note here is that in header.jsp file, we have specified two links to select language. The link sets a request parameter ?lang= when user click on this link. Note that spring identifies this request parameter by using LocaleChangeInterceptor interceptor and change the local accordingly. Also note that while configuring LocaleChangeInterceptor in spring-servlet.xml file, we have specified property “paramName” with value “lang”

<property name="paramName" value="lang" />

Thus the Spring framework will look for a parameter called “lang” from request.

That’s All Folks

That’s pretty much it We just added Internationalization and Localization support to our demo Spring 3.0 MVC application. All you have to do is just execute the app in Eclipse. Press Alt + Shift + X, R.

Download Source Code

Click here to download Source Code (10.2kb)

Moving On

Today we saw how to add Internationalization i18n and Localization L10n support to Spring 3.0 based web application. We used LocaleChangeInterceptor to intercept the change in locale and ReloadableResourceBundleMessageSource class to add message resources properties. In the next part we will discuss Themes in Spring MVC and how to implement it. I hope you liked this article. Feel free to post your queries and comments in comment section.

One of the older solutions is to determine the effective usage of indexes in the database. Once the monitoring usage clause for the index is enabled, we can determine the usage of the index by querying v$object_usage data dictionary view. The index monitoring time again depends on the application, database usage and business hours. It varies from case to case. Some applications might require a few hours for monitoring the usage of indexes. Some might require even months to determine the perfect indexes that need to be retained and the ones that need to be detained.

If the usage of the index is at all, or it results a bad performance to other queries, one can easily drop the index. However in future, if some adhoc queries require the index badly (where the index dropped would have increased the performance dramatically), we need to think reinstating the index again. The recreation of an index is a very expensive one and requires a lot of database resources and consumes a lot of time as well.

One of the new features of oracle 11g, Invisible indexes is a perfect solution to the above problem. An index can be made invisible to the Optimizer, so that the optimizer can’t see it. If an adhoc query requires the usage of the index it can explicitly specify the index as a part of hint.

The following example demonstrates invisible index better.

SQL> desc employee;
 Name                                      Null?    Type
 ----------------------------------------- -------- ---------

 EMPID                                              NUMBER
 DEPTNO                                             NUMBER
 EMPNAME                                            VARCHAR2(30)
 MGR_NAME                                           VARCHAR2(30)
 ADDRESS                                            VARCHAR2(100)

Let us create an index on EMPID column of the employee table.

SQL> create index idx_empid on employee(empid);

Index created.

After creating the index let us fire this simple query:

SQL> select * from employee where empid = 1001;

Execution Plan
-----------------------------------------------------------------------------------------
| Id  | Operation                   | Name      | Rows  | Bytes | Cost (%CPU)| Time     |
-----------------------------------------------------------------------------------------
|   0 | SELECT STATEMENT            |           |     1 |   112 |     2   (0)| 00:00:01 |
|*  1 |  TABLE ACCESS BY INDEX ROWID| EMPLOYEE  |     1 |   112 |     2   (0)| 00:00:01 |
|*  2 |   INDEX RANGE SCAN          | IDX_EMPID |     1 |       |     1   (0)| 00:00:01 |
-----------------------------------------------------------------------------------------

The above execution plan confirms the usage of the index which we created on the empid column. Now let us make this index invisible to the optimizer. An index can be made invisible using the simple ALTER statement.

SQL> alter index idx_empid invisible;

Index altered.

The invisibility status of the index can be checked by using the following query:

SQL> select visibility from user_indexes where index_name = 'IDX_EMPID';

VISIBILITY
---------
INVISIBLE

Now let us fire the same query on the employee table. The below explain plan shows the index became invisible to the optimizer and a full table scan is performed instead of index scan.

SQL> select * from employee where empid = 1001;

Execution Plan

------------------------------------------------------------------------------
| Id  | Operation         | Name     | Rows  | Bytes | Cost (%CPU)| Time     |
------------------------------------------------------------------------------
|   0 | SELECT STATEMENT  |          |     1 |   112 |     3   (0)| 00:00:01 |
|*  1 |  TABLE ACCESS FULL| EMPLOYEE |     1 |   112 |     3   (0)| 00:00:01 |
------------------------------------------------------------------------------

Let us now try to give an index hint in our above query.

SQL> select /*+ index(idx_empid) */ * from employee where empid = 1001;

Execution Plan

-----------------------------------------------------------------------------------------
| Id  | Operation                   | Name      | Rows  | Bytes | Cost (%CPU)| Time     |
-----------------------------------------------------------------------------------------
|   0 | SELECT STATEMENT            |           |     1 |   112 |     2   (0)| 00:00:01 |
|*  1 |  TABLE ACCESS BY INDEX ROWID| EMPLOYEE  |     1 |   112 |     2   (0)| 00:00:01 |
|*  2 |   INDEX RANGE SCAN          | IDX_EMPID |     1 |       |     1   (0)| 00:00:01 |
-----------------------------------------------------------------------------------------

After giving the hint, the optimizer used the index once again and performed an index scan. From the above example it is clear that, when an index can be made invisible only to the Optimizer and not to the user. User can still use it by giving a hint to the optimizer where ever it is required.
Alternatively, there is a session level parameter, optimizer_use_invisible_indexes. This parameter can be set to TRUE, so that all the invisible indexes can be made visible to the optimizer.

SQL> alter session set optimizer_use_invisible_indexes = true;

Advantages of Invisble Indexes

1. Invisible indexes can help to a great extent, in testing scenarios where the optimizer behavior needs to be tested without the index. This does not need dropping and recreating the index.
2. Indexes can be created for certain adhoc queries (queries that are fired very infrequently) and can be made invisible after the usage.

However, invisible indexes behave the same like a normal index towards the DML operations. They need to be updated with each DML operation.

Spring MVC is the web component of Spring’s framework. It provides a rich functionality for building robust Web Applications. The Spring MVC Framework is architected and designed in such a way that every piece of logic and functionality is highly configurable. Also Spring can integrate effortlessly with other popular Web Frameworks like Struts, WebWork, Java Server Faces and Tapestry. It means that you can even instruct Spring to use any one of the Web Frameworks. More than that Spring is not tightly coupled with Servlets or JSP to render the View to the Clients. Integration with other View technologies like Velocity, Freemarker, Excel or Pdf is also possible now.

In Spring Web MVC you can use any object as a command or form-backing object; you do not need to implement a framework-specific interface or base class. Spring’s data binding is highly flexible: for example, it treats type mismatches as validation errors that can be evaluated by the application, not as system errors. Thus you need not duplicate your business objects’ properties as simple, untyped strings in your form objects simply to handle invalid submissions, or to convert the Strings properly. Instead, it is often preferable to bind directly to your business objects.

Request Processing Lifecycle

Image courtesy: Springsource

Spring’s web MVC framework is, like many other web MVC frameworks, request-driven, designed around a central servlet that dispatches requests to controllers and offers other functionality that facilitates the development of web applications. Spring’s DispatcherServlet is completely integrated with Spring IoC container and allows us to use every other feature of Spring.

Following is the Request process lifecycle of Spring 3.0 MVC:

1. The client sends a request to web container in the form of http request.
2. This incoming request is intercepted by Front controller (DispatcherServlet) and it will then tries to find out appropriate Handler Mappings.
3. With the help of Handler Mappings, the DispatcherServlet will dispatch the request to appropriate Controller.
4. The Controller tries to process the request and returns the Model and View object in form of ModelAndView instance to the Front Controller.
5. The Front Controller then tries to resolve the View (which can be JSP, Freemarker, Velocity etc) by consulting the View Resolver object.
6. The selected view is then rendered back to client.

Features of Spring 3.0

• Spring 3.0 framework supports Java 5. It provides annotation based configuration support. Java 5 features such as generics, annotations, varargs etc can be used in Spring.
• A new expression language Spring Expression Language SpEL is being introduced. The Spring Expression Language can be used while defining the XML and Annotation based bean definition.
• Spring 3.0 framework supports REST web services.
• Data formatting can never be so easy. Spring 3.0 supports annotation based formatting. We can now use the @DateFimeFormat(iso=ISO.DATE) and @NumberFormat(style=Style.CURRENCY) annotations to convert the date and currency formats.
• Spring 3.0 has started support to JPA 2.0.

Configuring Spring 3.0 MVC

The entry point of Spring 3.0 MVC is the DispatcherServlet. DispatcherServlet is a normal servlet class which implements HttpServlet base class. Thus we need to configure it in web.xml.

<web-app>

    <servlet>
        <servlet-name>example</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>example</servlet-name>
        <url-pattern>*.html</url-pattern>
    </servlet-mapping>
</web-app>

In above code snippet, we have configure DispatcherServlet in web.xml. Note that we have mapped *.html url pattern with example DispatcherServlet. Thus any url with *.html pattern will call Spring MVC Front controller.

Image courtesy: Springsource
Once the DispatcherServlet is initialized, it will looks for a file names [servlet-name]-servlet.xml in WEB-INF folder of web application. In above example, the framework will look for file called example-servlet.xml.

Note the above architecture diagram. The WebApplicationContext specified in above diagram is an extension of the plain ApplicationContext with some extra feature necessary for web applications. The WebApplicationContext is capable of resolving themes and it is also associated with corresponding servlet. The WebApplicationContext is bound in the ServletContext, and by using static methods on the RequestContextUtils class you can always look up the WebApplicationContext.

Moving On

Now that we have idea about architecture of Spring 3.0 MVC framework and its lifecycle, in the next part we will create a working Spring 3.0 Hello World application from scratch.

Creating Base Framework

I always have Basic framework ready which gives a kick start to the web app development. You don’t have to hassle about different configuration issues/jar file issues etc. Let us start with creating sample base framework for our project. We will use Struts2 and Hibernate for this implementation.
First lets create a Dynamic web project in eclipse.

We will name our project Shorty.

Then, we will add all the required Jar files for our project. Following is the list of Jars that I have included in the WEB-INF/lib folder.

You can download all of the above JARs from http://www.ibiblio.org/maven/

Now lets us change the web.xml file and add Struts filter. This will add Struts support in our base framework.
Following will be the web.xml content.
WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4"
	xmlns="http://java.sun.com/xml/ns/j2ee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	<display-name>Go</display-name>
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
 	<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>

</web-app>

Now create a source folder called resources. Right click on your project in Project explorer -> New -> Source Folder.

Create a file hibernate.cfg.xml in the resources folder. This will be the configuration file of Hibernate which contains database connection strings and other related data.

resources/hibernate.cfg.xml

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE hibernate-configuration PUBLIC
        "-//Hibernate/Hibernate Configuration DTD 3.0//EN"
        "http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">

<hibernate-configuration>

	<session-factory>

		<property name="connection.driver_class">
			com.mysql.jdbc.Driver
		</property>
		<property name="connection.url">
			jdbc:mysql://localhost:3306/shorty
		</property>
		<property name="connection.username">username</property>
		<property name="connection.password">password</property>

		<property name="connection.pool_size">1</property>
		<property name="dialect">
			org.hibernate.dialect.MySQLDialect
		</property>
		<property name="current_session_context_class">thread</property>
		<property name="cache.provider_class">
			org.hibernate.cache.NoCacheProvider
		</property>
		<property name="show_sql">true</property>
		<property name="hbm2ddl.auto">update</property>

	</session-factory>

</hibernate-configuration>

Also lets create package structure for the source code in our base framework. We will create few packages in src folder.

Now we are ready with a basic framework that has Hibernate and Struts2 support. This can now be used to create any application using these two technologies.

Let us start with creating database design for our simplest URL shortner.

Database Design for URL Shortner

Our requirement is very simple. We will have a single table in database that holds the value for URLs and its shortcode. Following will be the DDL for LINKS table. Note that we will also track number of clicks on each URL.

CREATE TABLE LINKS
(
	id 		INT PRIMARY KEY AUTO_INCREMENT,
	shortcode 	VARCHAR(20),
	url 		VARCHAR(255),
	clicks		INT DEFAULT 0,
	created	TIMESTAMP DEFAULT NOW()
);

Adding logic to create shortcode

URL Shortner is all about creating short codes for a long url. The logic that we will use to create a short code is simple. We will add URL into database table with auto generating primary key. This primary key will be a unique number. Then we convert this number to a string representation of base48 with characters 0 to 9 a to z and A to Z. Following is the logic for this.

	public static String base48Encode(Long no) {
		Double num = Double.valueOf(no);
		String charSet = "23456789abcdefghijkmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVWXYZ";
		Integer length = charSet.length();
		String encodeString = new String();
		while(num > length) {
			encodeString = charSet.charAt(num.intValue() % length)+encodeString;
			 num = Math.ceil(new Double(num / length) - 1) ;
		}
		encodeString = charSet.charAt(num.intValue())+encodeString;

		return encodeString;
	}

In above method we have passed a long number (which will be auto generated primary key) and get string representation.

We will add this logic into a file ShortyUtil.java. Create ShortyUtil class under net.viralpatel.shorty.util package.

net.viralpatel.shorty.util.ShortyUtil

package net.viralpatel.shorty.util;

public class ShortyUtil {
	public static String base48Encode(Long no) {
		Double num = Double.valueOf(no);
		String charSet = "23456789abcdefghijkmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVWXYZ";
		Integer length = charSet.length();
		String encodeString = new String();
		while(num > length) {
			encodeString = charSet.charAt(num.intValue() % length)+encodeString;
			 num = Math.ceil(new Double(num / length) - 1) ;
		}
		encodeString = charSet.charAt(num.intValue())+encodeString;

		return encodeString;
	}

	public static String getShortCodeFromURL(String URL) {

		int index=0;
		for(index=URL.length()-1; index>=0 && URL.charAt(index)!= '/' ;index--);
		String shortCode = URL.substring(index+1);

		return shortCode;
	}
}

Connecting to Database using Hibernate

Adding Hibernate related code is easy.

First add HibernateUtil class in net.viralpatel.shorty.util that we will use to create SessionFactory object.

net.viralpatel.shorty.util.HibernateUtil

package net.viralpatel.shorty.util;

import org.hibernate.SessionFactory;
import org.hibernate.cfg.AnnotationConfiguration;

public class HibernateUtil {

	private static final SessionFactory sessionFactory = buildSessionFactory();

	private static SessionFactory buildSessionFactory() {
		try {
			// Create the SessionFactory from hibernate.cfg.xml
			return new AnnotationConfiguration().configure().buildSessionFactory();
		} catch (Throwable ex) {
			// Make sure you log the exception, as it might be swallowed
			System.err.println("Initial SessionFactory creation failed." + ex);
			throw new ExceptionInInitializerError(ex);
		}
	}

	public static SessionFactory getSessionFactory() {
		return sessionFactory;
	}

}

Now create an entity class that will map to LINKS table in database. Create Link.java class under net.viralpatel.shorty.model package.

net.viralpatel.shorty.model.Link

package net.viralpatel.shorty.model;

import java.io.Serializable;
import java.sql.Date;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name="LINKS")
public class Link implements Serializable{

	private static final long serialVersionUID = -8767337896773261247L;

	private Long id;
	private String shortCode;
	private String url;
	private Long clicks;
	private Date created;

	@Id
	@GeneratedValue
	@Column(name="id")
	public Long getId() {
		return id;
	}
	@Column(name = "shortcode")
	public String getShortCode() {
		return shortCode;
	}
	@Column(name = "created")
	public Date getCreated() {
		return created;
	}
	@Column(name = "url")
	public String getUrl() {
		return url;
	}
	@Column(name = "clicks")
	public Long getClicks() {
		return clicks;
	}
	public void setClicks(Long clicks) {
		this.clicks = clicks;
	}
	public void setShortCode(String shortCode) {
		this.shortCode = shortCode;
	}
	public void setUrl(String url) {
		this.url = url;
	}
	public void setCreated(Date created) {
		this.created = created;
	}
	public void setId(Long id) {
		this.id = id;
	}
}

Now add the mapping for above entity class Link.java in hibernate.cfg.xml file. Add following link in >session-factory< tag:

<mapping class="net.viralpatel.shorty.model.Link" />

Also we will need a controller class that we invoke from Struts action class to do read/write in database. Create LinkController.java under net.viralpatel.shorty.controller package.

net.viralpatel.shorty.controller.LinkController

package net.viralpatel.shorty.controller;

import org.hibernate.Query;
import org.hibernate.classic.Session;

import net.viralpatel.shorty.model.Link;
import net.viralpatel.shorty.util.HibernateUtil;
import net.viralpatel.shorty.util.ShortyUtil;

public class LinkController extends HibernateUtil {

	public Link get(String shortCode) {

		Session session = HibernateUtil.getSessionFactory().getCurrentSession();
		session.beginTransaction();

		Query query = session.createQuery("from Link where shortcode = :shortcode");
		query.setString("shortcode", shortCode);
		Link link = (Link) query.uniqueResult();
		if(null != link) {
			link.setClicks(link.getClicks());
			session.save(link);
		}
		session.getTransaction().commit();

		return link;

	}

	public Link add(Link link) {

		Session session = HibernateUtil.getSessionFactory().getCurrentSession();
		session.beginTransaction();

		Query query = session.createQuery("from Link where url = :url");
		query.setString("url", link.getUrl());
		Link oldLink = (Link) query.uniqueResult();
		if(null != oldLink)
			return oldLink;

		session.save(link);
		if(null == link.getShortCode()) {
			link.setShortCode(ShortyUtil.base48Encode(link.getId()));
			session.save(link);
		}
		session.getTransaction().commit();
		return link;
	}
}

Adding Struts2 Support

The UI for our URL shortner is very simple. We will have a index.jsp page which has a textbox for entering long URL and a small Shorten button. Also we will add a functionality where we can see some statistics/details of any short url. For example if shortcode http://<shorturl>q1d points to http://viralpatel.net then http://<shorturl>q1d+ will show a page with details about url http://viralpatel.net.
Related: Tutorial: Create Struts 2 Application in Eclipse

Lets starts with creating Action class. Create a class LinkAction.java under net.viralpatel.shorty.view package.

LinkAction.java

package net.viralpatel.shorty.view;

import javax.servlet.http.HttpServletRequest;
import org.apache.struts2.interceptor.ServletRequestAware;
import net.viralpatel.shorty.controller.LinkController;
import net.viralpatel.shorty.model.Link;
import net.viralpatel.shorty.util.ShortyUtil;

import com.opensymphony.xwork2.ActionSupport;

public class LinkAction extends ActionSupport implements ServletRequestAware {

	private static final long serialVersionUID = 1L;
	private final static String DETAIL = "detail";
	private String url;
	private Link link;

	private LinkController linkController;

	private HttpServletRequest request;

	public LinkAction() {
		linkController = new LinkController();
	}
	public String add() {
		link = new Link();
		link.setUrl(this.url);
		link = linkController.add(link);

		return SUCCESS;
	}
	public String get() {

		String uri = request.getRequestURI();

		uri = ShortyUtil.getShortCodeFromURL(uri);

		if(uri.charAt(uri.length()-1) == '+') {
			uri = uri.substring(0, uri.length()-1);
			this.link = this.linkController.get(uri);
			return DETAIL;
		}

		this.link = this.linkController.get(uri);
		if(null == this.link) {
			addActionError(getText("error.url.unavailable"));
			return INPUT;
		} else {

			setUrl(link.getUrl());
			return SUCCESS;
		}
	}
	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}

	public Link getLink() {
		return link;
	}

	public void setLink(Link link) {
		this.link = link;
	}
	public void setServletRequest(HttpServletRequest request) {
		this.request = request;
	}
}

Also create struts configuration file struts.xml under resources folder and copy following content into it.
resources/struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
	<constant name="struts.enable.DynamicMethodInvocation"
		value="false" />
	<constant name="struts.devMode" value="false" />
	<constant name="struts.custom.i18n.resources"
		value="MessageResources" />

	<package name="default" extends="struts-default" namespace="/">
		<action name="add" class="net.viralpatel.shorty.view.LinkAction"
			method="add">
			<result name="success">index.jsp</result>
		</action>
		<action name="*" class="net.viralpatel.shorty.view.LinkAction"
			method="get">
			<result name="success" type="redirect">${url}</result>
			<result name="input">index.jsp</result>
			<result name="detail">detail.jsp</result>
		</action>
	</package>
</struts>

Note that we have used wildcard mapping in Struts2 action class. This is to ensure we call LinkAction for any shortcode passed in url shortner service.

Create a resource bundle file MessageResources.properties which will hold value for domain name of our URL shortner and an error message.
resources/MessageResources.properties

shorty.base.url=http://shorty/
error.url.unavailable=Couldn't find the site's URL to redirect to.

You may want to change value of key shorty.base.url to your domain name.

Add following JSP files in WebContent folder.

WebContent/index.jsp

<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Shorty - An Open Source URL Shortner in Struts2/Hibernate | ViralPatel.net</title>
<link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<h1 class="title">Shorty</h1>
<br>
<p>A Simple URL Shortner in Struts2/Hibernate/MySQL</p>
<br><br>
<div id="link-container">

	<s:form action="add" method="post">
		<s:actionerror/>
		<s:textfield name="url" cssClass="link"/>
		<s:submit value="Shorten"/>
	</s:form>
	<s:if test="link.shortCode != null">
			<h3><s:text name="shorty.base.url"/><s:property value="link.shortCode"/></h3>
	</s:if>

</div>
</body>
</html>

WebContent/detail.jsp

<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Shorty - An Open Source URL Shortner in Struts2/Hibernate | ViralPatel.net</title>
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
	<h1 class="title">Shorty</h1>

	Short Code: <s:property value="link.shortCode" /> <br />
	Original URL: <s:property value="link.url" /> <br />
	Clicks: <s:property value="link.clicks" /> <br />
	Created On: <s:property value="link.created" /> <br />

</body>
</html>

That’s all Folks

Execute the web project in your favorite container like Tomcat, Glassfish etc.

Download

Download WAR File with Source Code

Our Goal

Our goal will be to demonstrate the use of Struts2 with Hibernate framework and to create a demo application “Contact Manager”. The basic requirement of the Contact Manager app will be:

1. Add new contact in the contact list.
2. Display all contacts from contact list.
3. Delete a contact from contact list.

Once we will build the application it will look like:

Getting Started

For our Contact Manager example, we will use MySQL database. Create a table contacts in any MySQL database. This is very preliminary example and thus we have minimum columns to represent a contact. Feel free to extend this example and create a more complex application.

CREATE TABLE CONTACTS
(
	id 		INT PRIMARY KEY AUTO_INCREMENT,
	firstname 	VARCHAR(30),
	lastname	VARCHAR(30),
	cell_no		VARCHAR(15),
	email_id	VARCHAR(30),
	website		VARCHAR(150),
	birthdate	DATE,
	created		TIMESTAMP DEFAULT NOW()
);

Creating Project in Eclipse

Open Eclipse and goto File -> New -> Project and select Dynamic Web Project in the New Project wizard screen.

After selecting Dynamic Web Project, press Next.

Write the name of the project. For example ContactManager. Once this is done, select the target runtime environment (e.g. Apache Tomcat v6.0). This is to run the project inside Eclipse environment. After this press Finish.

We will need a source folder called resources. Right click on Project in project explorer and select New -> Source Folder and create a folder with name resources.

Also we will create Java packages for our application. As we will use Struts2, we will follow MVC architecture. Create 4 packages in the sources.

We created 4 new packages. The net.viralpatel.contact.controller will hold the Java class that will act as controller and will fetch the data from database and pass it to view. The net.viralpatel.contact.model package will hold the Hibernate persistent model class. The net.viralpatel.contact.view will contain the struts2 action class. And finally the net.viralpatel.contact.util will have some hibernate related util file that will be see shortly.

Required JAR Files

Now copy all the required JAR files in WebContent -> WEB-INF -> lib folder. Create this folder if it does not exists.

Create JSP for Contact Manager

We will need only one JSP file for this tutorial. The JSP will include a form to add new contact as well as will list the contacts at the end. Create a JSP file index.jsp in WebContent folder and copy following content into it.
WebContent/index.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
	<title>Contact Manager - Struts2 Hibernate Example</title>
</head>
<body>

<h1>Contact Manager</h1>
<s:actionerror/>

<s:form action="add" method="post">
	<s:textfield name="contact.firstName" label="Firstname"/>
	<s:textfield name="contact.lastName" label="Lastname"/>
	<s:textfield name="contact.emailId" label="Email"/>
	<s:textfield name="contact.cellNo" label="Cell No."/>
	<s:textfield name="contact.website" label="Homepage"/>
	<s:textfield name="contact.birthDate" label="Birthdate"/>
	<s:submit value="Add Contact" align="center"/>
</s:form>

<h2>Contacts</h2>
<table>
<tr>
	<th>Name</th>
	<th>Email</th>
	<th>Cell No.</th>
	<th>Birthdate</th>
	<th>Homepage</th>
	<th>Delete</th>
</tr>
<s:iterator value="contactList" var="contact">
	<tr>
		<td><s:property value="lastName"/>, <s:property value="firstName"/> </td>
		<td><s:property value="emailId"/></td>
		<td><s:property value="cellNo"/></td>
		<td><s:property value="birthDate"/></td>
		<td><a href="<s:property value="website"/>">link</a></td>
		<td><a href="delete?id=<s:property value="id"/>">delete</a></td>
	</tr>
</s:iterator>
</table>
</body>
</html>

Adding Hibernate Support

For adding hibernate support, we will add following source code in Contact Manager application.
hibernate.cfg.xml – This is the Hibernate configuration file. This file will contain configurations such as database connection information, persistence class info etc. Create hibernate.cfg.xml under resources folder and copy following content into it.

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE hibernate-configuration PUBLIC
        "-//Hibernate/Hibernate Configuration DTD 3.0//EN"
        "http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">

<hibernate-configuration>
	<session-factory>
		<property name="connection.driver_class">
			com.mysql.jdbc.Driver
		</property>
		<property name="connection.url">
			jdbc:mysql://localhost:3306/ContactManager
		</property>
		<property name="connection.username">root</property>
		<property name="connection.password">root</property>
		<property name="connection.pool_size">1</property>
		<property name="dialect">
			org.hibernate.dialect.MySQLDialect
		</property>
		<property name="current_session_context_class">thread</property>
		<property name="cache.provider_class">
			org.hibernate.cache.NoCacheProvider
		</property>
		<property name="show_sql">true</property>
		<property name="hbm2ddl.auto">update</property>

		<mapping class="net.viralpatel.contact.model.Contact" />

	</session-factory>
</hibernate-configuration>

HibernateUtil.java – This is the Util file that we use to create connection with hibernate. Create HibernateUtil.java under package net.viralpatel.contact.util and copy following content into it.

package net.viralpatel.contact.util;

import org.hibernate.SessionFactory;
import org.hibernate.cfg.AnnotationConfiguration;

public class HibernateUtil {

	private static final SessionFactory sessionFactory = buildSessionFactory();

	private static SessionFactory buildSessionFactory() {
		try {
			// Create the SessionFactory from hibernate.cfg.xml
			return new AnnotationConfiguration().configure()
					.buildSessionFactory();
		} catch (Throwable ex) {
			System.err.println("Initial SessionFactory creation failed." + ex);
			throw new ExceptionInInitializerError(ex);
		}
	}

	public static SessionFactory getSessionFactory() {
		return sessionFactory;
	}
}

Contact.java – This is the persistence entity class that will map to Contacts table in MySQL. Create Contact.java under net.viralpatel.contact.model package and copy following content into it.

package net.viralpatel.contact.model;

import java.io.Serializable;
import java.sql.Date;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name="Contacts")
public class Contact implements Serializable{

	private static final long serialVersionUID = -8767337896773261247L;

	private Long id;
	private String firstName;
	private String lastName;
	private String emailId;
	private String cellNo;
	private Date birthDate;
	private String website;

	private Date created;

	@Id
	@GeneratedValue
	@Column(name="id")
	public Long getId() {
		return id;
	}
	@Column(name="firstname")
	public String getFirstName() {
		return firstName;
	}
	@Column(name="lastname")
	public String getLastName() {
		return lastName;
	}
	@Column(name="email_id")
	public String getEmailId() {
		return emailId;
	}
	@Column(name="cell_no")
	public String getCellNo() {
		return cellNo;
	}
	@Column(name="birthdate")
	public Date getBirthDate() {
		return birthDate;
	}
	@Column(name="website")
	public String getWebsite() {
		return website;
	}
	@Column(name="created")
	public Date getCreated() {
		return created;
	}
	public void setId(Long id) {
		this.id = id;
	}
	public void setFirstName(String firstName) {
		this.firstName = firstName;
	}
	public void setLastName(String lastName) {
		this.lastName = lastName;
	}
	public void setEmailId(String emailId) {
		this.emailId = emailId;
	}
	public void setCellNo(String cellNo) {
		this.cellNo = cellNo;
	}
	public void setBirthDate(Date birthDate) {
		this.birthDate = birthDate;
	}
	public void setCreated(Date created) {
		this.created = created;
	}
	public void setWebsite(String website) {
		this.website = website;
	}
}

Note how we have mapped Contact class with Contacts table using Java persistence API annotations.

Adding Controller to access data

We will add a controller class in Contact Manager application which will be used to get/save data from hibernate. This controller will be invoked from Struts action class. Create a file ContactManager.java under net.viralpatel.contact.controller package and copy following content into it.

package net.viralpatel.contact.controller;

import java.util.List;

import org.hibernate.HibernateException;
import org.hibernate.classic.Session;

import net.viralpatel.contact.model.Contact;
import net.viralpatel.contact.util.HibernateUtil;

public class ContactManager extends HibernateUtil {

	public Contact add(Contact contact) {
		Session session = HibernateUtil.getSessionFactory().getCurrentSession();
		session.beginTransaction();
		session.save(contact);
		session.getTransaction().commit();
		return contact;
	}
	public Contact delete(Long id) {
		Session session = HibernateUtil.getSessionFactory().getCurrentSession();
		session.beginTransaction();
		Contact contact = (Contact) session.load(Contact.class, id);
		if(null != contact) {
			session.delete(contact);
		}
		session.getTransaction().commit();
		return contact;
	}

	public List<Contact> list() {

		Session session = HibernateUtil.getSessionFactory().getCurrentSession();
		session.beginTransaction();
		List<Contact> contacts = null;
		try {

			contacts = (List<Contact>)session.createQuery("from Contact").list();

		} catch (HibernateException e) {
			e.printStackTrace();
			session.getTransaction().rollback();
		}
		session.getTransaction().commit();
		return contacts;
	}
}

Note that how we have created different methods in controller class to add/delete/list the contacts. Also the ContactManager class is extending HibernateUtil class thus allowing it to access sessionFactory object.

Adding Struts2 Support

Let us add Struts2 support to our web application. For that, will add following entry in deployment descriptor (WEB-INF/web.xml).

Add Struts2 Filter in web.xml

<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>

Creating struts.xml

We will need to create struts.xml file that will hold the action mapping for our example. Create a file struts.xml in resources folder and add following content into it.
struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
	<constant name="struts.enable.DynamicMethodInvocation"
		value="false" />
	<constant name="struts.devMode" value="false" />

	<package name="default" extends="struts-default" namespace="/">

		<action name="add"
			class="net.viralpatel.contact.view.ContactAction" method="add">
			<result name="success" type="chain">index</result>
			<result name="input" type="chain">index</result>
		</action>

		<action name="delete"
			class="net.viralpatel.contact.view.ContactAction" method="delete">
			<result name="success" type="chain">index</result>
		</action>

		<action name="index"
			class="net.viralpatel.contact.view.ContactAction">
			<result name="success">index.jsp</result>
		</action>
	</package>
</struts>

Related:
Create Struts Application in Eclipse
Create Struts2 Application in Eclipse

Create Action class

Up-till now we have almost completed our Contact Manager application in Struts2 and Hibernate. Only task left is to add Struts Action class. Create a class ContactAction.java under net.viralpatel.contact.view package and copy following content into it.

package net.viralpatel.contact.view;

import java.util.List;

import net.viralpatel.contact.controller.ContactManager;
import net.viralpatel.contact.model.Contact;

import com.opensymphony.xwork2.ActionSupport;

public class ContactAction extends ActionSupport {

	private static final long serialVersionUID = 9149826260758390091L;
	private Contact contact;
	private List<Contact> contactList;
	private Long id;

	private ContactManager contactManager;

	public ContactAction() {
		contactManager = new ContactManager();
	}

	public String execute() {
		this.contactList = contactManager.list();
		System.out.println("execute called");
		return SUCCESS;
	}

	public String add() {
		System.out.println(getContact());
		try {
			contactManager.add(getContact());
		} catch (Exception e) {
			e.printStackTrace();
		}
		this.contactList = contactManager.list();
		return SUCCESS;
	}

	public String delete() {
		contactManager.delete(getId());
		return SUCCESS;
	}

	public Contact getContact() {
		return contact;
	}

	public List<Contact> getContactList() {
		return contactList;
	}

	public void setContact(Contact contact) {
		this.contact = contact;
	}

	public void setContactList(List<Contact> contactsList) {
		this.contactList = contactsList;
	}

	public Long getId() {
		return id;
	}

	public void setId(Long id) {
		this.id = id;
	}
}

ContactAction class contains different methods that gets called by Struts2. The execute() method is the default method which gets called when we call /index action from browser. It fetches the list of contacts and display it in index.jsp. Similarly, when a new contact is added, add() method is called. If you check the action mapping entry in struts.xml for add() method, the <result> is mapped with /index action and the type is chain. This is because we want to display the list of contact once we add a new one. Hence we have done Action chaining and called /index action after /add action.

The Contact Manager App

That’s it. The app is ready, just compile and run the project in Eclipse Run -> Run As -> Run on Server. Set the URL to:
http://localhost:<port>/<project name>/index

Fill the contact form and hit enter and the new contact will be persisted in database and will be shown in below table. Similarly, click on delete link next to a record. It will delete the record from database.

Let me know your input about this application.
Cheers.

Download Source

Download Source without JAR files (19.2 KB)

Download Source with JAR files (8.5 MB)

AJAX support in Struts 2

Struts 2 provides built-in support to AJAX using Dojo Toolkit library. If you are new to Dojo, you may want to go through the Introduction of DOJO Toolkit.

Struts 2 comes with powerful set of Dojo AJAX APIs which you can use to add Ajax support. In order to add Ajax support, you need to add following JAR file in your classpath:
struts2-dojo-plugin.jar

Also once we add this JAR file, we need to add following code snippet in whatever JSP file we need to add AJAX support.

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

First define the taglib sx which we will use to add AJAX enabled tags.

<sx:head/>

Add this head tag in your JSP between <head> … </head> tags. This sx:head tag will include required javascript and css files to implement Ajax.

AJAX Example: Struts2 Ajax Drop Down

Let us add simple AJAX support in our StrutsHelloWorld web application. We will use the base code that we used in previous articles and add Ajax on top of it.

We will create a drop down which will Autocomplete and suggest the input. For this we will add Dojo support to our webapp.

Step 1: Adding JAR file

As discussed earlier we will add struts2-dojo-plugin.jar in classpath (WEB-INF/lib). Thus, following is the list of required jar files. Note that these jars are needed to run full application including all the samples of previous parts of this tutorial series.

Step 2: Create AJAX Action class

We will create an action class which will get called for our Ajax example. Create a file AjaxAutocomplete.java in net.viralpatel.struts2 package and copy following content into it.
AjaxAutocomplete.java

package net.viralpatel.struts2;

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

import com.opensymphony.xwork2.ActionSupport;

public class AjaxAutocomplete extends ActionSupport {
	private String data = "Afghanistan, Zimbabwe, India, United States, Germany, China, Israel";
	private List<String> countries;
	private String country;

	public String execute() {
		countries = new ArrayList<String>();
		StringTokenizer st = new StringTokenizer(data, ",");

		while (st.hasMoreTokens()) {
			countries.add(st.nextToken().trim());
		}
		return SUCCESS;
	}
	public String getCountry() {
		return this.country;
	}

	public List<String> getCountries() {
		return countries;
	}

	public void setCountries(List<String> countries) {
		this.countries = countries;
	}
	public void setCountry(String country) {
		this.country = country;
	}
}

In above code we have created a simple action class with attribute String country and List countries. The countries list will be populated with country names when execute() method is called. Here for this example, we have loaded static data. You may feel free to change this and add data from database.

Step 3: Create JSP

Create JSP file to display Autocomplete textbox for our Ajax action. Create AjaxDemo.jsp in WebContent directory.
AjaxDemo.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>
<html>
<head>
	<title>Welcome</title>
	<sx:head />
</head>
<body>
	<h2>Struts 2 Autocomplete (Drop down) Example!</h2>

	Country:
	<sx:autocompleter size="1" list="countries" name="country"></sx:autocompleter>
	</action>
</body>
</html>

In above JSP file we have used sx:autocompleter tag to render an autocomplete drop down which users Ajax class to fetch data internally. Note that we have mapped the list attribute with List countries.

Step 4: Creating Struts.xml entry

Add following action entry in Struts.xml file:

<action name="ajaxdemo" class="net.viralpatel.struts2.AjaxAutocomplete">
	<interceptor-ref name="loggingStack"></interceptor-ref>
	<result name="success" type="tiles">/ajaxdemo.tiles</result>
	<result type="tiles">/ajaxdemo.tiles</result>
</action>

Notice that we are using Tiles here in this example. You may want to use AjaxDemo.jsp instead of /ajaxdemo.tiles to render the output directly in JSP.

That’s All Folks

Compile and Run the application in eclipse.

Download Source Code

Click here to download Source Code without JAR files (24KB)

Conclusion

Struts2 Framework provides wide variety of features to create a rich web application. In this Struts2 series we saw different aspects of Struts 2 like introduction of struts2, hello world application, validation framework, tiles plugin, strurts2 interceptors, file upload and ajax support.