Posts Tagged ‘ajax

24
Jul
11

Live Search Functionality using ExtJS

This page describes the process of developing a live search page Extjs and Java Servlets. This is similar to the live search / type ahead functionality offered by google. This page contains instructions on how to create a complete working example in about a 1/2 hour using jetty servlet engine and the Java HyperSQL in-memory database.

Requirements

  • Maven 2
  • Java 5 or above

Background

Type ahead functionality allows users to obtain a list of possible options as they type. Chances that the item the user is looking for increases with each keystroke.

A static working example is located here.

Live search results are typically displayed in combo boxes. A combo boxes are a mix between a drop down box and a text field. The ext-js framework enhances the basic HTML drop down to allow for type ahead functionality.

Simple Database Driven Search

Next we will take the example presented above and enhance it to retrieve results from a servlet invocation. The servlet will call the database to return results.

Smarter Database Driven Search

The data returned after you start to type may sometimes overwhelm the user. A better way to return results is to display them based on ranking. Each word in our sample table also has a rank column. We will start to use this to get smarter search results.

Pagination

The example implemented here uses pagination. The user is able to page thru search results. This capability is enabled by sending back “totalCount” value that represents the total search results available from the database. The “start” and “limit” parameters passed to the servlet help the system “window” the results so that only the required rows get sent to the browser.

In the example below, in order to get the “totalCount” I had to execute the query 2 times. Once to get the count and the other time to get the actual data.

Not all databases support “start” and “limit” fields. Check with your database vendor for availability.

Implementation

The project described here is composed of:

  1. index.jsp that displays the extjs component
  2. Servlet that does the search against the database and return JSON
  3. HSQLDB (HyperSQL) In memory database to hold the data
  4. Spring Framework so that we can use the SimpleJdbcTemplate

Start a new Project

We will be creating this project using Maven2. If you have not used maven before please see my maven2 tutorial on the right nav of this site.

mvn archetype:generate -DarchetypeArtifactId=maven-archetype-webapp

groupId: com.test
artifactId: live-search

Answer the rest of the questions with defaults “Just hit the enter key”,

cd to the project base folder.

cd live-search

Create the necessary directories.

mkdir -p src/main/java/com/test
mkdir -p src/main/resources/com/test
mkdir -p src/main/resources/db

Modify the project Configuration

The pom.xml file should look something like this.

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.test</groupId>
  <artifactId>live-search</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>live-search Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20090211</version>
        </dependency>
        <dependency>
            <groupId>org.apache.ibatis</groupId>
            <artifactId>ibatis-sqlmap</artifactId>
            <version>2.3.4.726</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring</artifactId>
            <version>2.5.6</version>
        </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>5.1.9</version>
    </dependency>        
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.14</version>
        </dependency>
        <dependency>
            <groupId>org.hsqldb</groupId>
            <artifactId>hsqldb</artifactId>
            <version>2.2.4</version>
        </dependency>
        <dependency>
            <groupId>org.apache.ddlutils</groupId>
            <artifactId>ddlutils</artifactId>
            <version>1.0</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.0</version>
            <scope>provided</scope>
        </dependency>
  </dependencies>
  <build>
    <finalName>live-search</finalName>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>2.0.2</version>
                <configuration>
                    <source>1.6</source>
                    <target>1.6</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.mortbay.jetty</groupId>
                <artifactId>jetty-maven-plugin</artifactId>
				<version>7.0.0.v20091005</version>
                <configuration>
                    <scanIntervalSeconds>2</scanIntervalSeconds>
                    <webAppConfig>
                        <contextPath>/</contextPath>
                    </webAppConfig>
                    <stopKey>s</stopKey>
                </configuration>
            </plugin>
        </plugins>
  </build>
</project>

Each key press initiates an Ajax request to the server. The server sends back a small list of possible options.

Servlet

The following servlet runs queries against the database and returns results to the caller. In a standard web application you would follow the MVC design pattern. To keep the example short I have done it all in the servlet.

src/main/java/com/test/SearchServlet.java

package com.test;

import java.io.IOException;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONException;
import org.json.JSONObject;
import org.springframework.context.ApplicationContext;
import org.springframework.jdbc.core.simple.ParameterizedRowMapper;
import org.springframework.jdbc.core.simple.SimpleJdbcTemplate;
import org.springframework.web.context.support.WebApplicationContextUtils;

public class SearchServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private SimpleJdbcTemplate jdbcTemplate;

	@Override
	public void init(ServletConfig config) throws ServletException {
		super.init(config);
		ApplicationContext context = WebApplicationContextUtils
			.getRequiredWebApplicationContext(config.getServletContext());
		
		jdbcTemplate = (SimpleJdbcTemplate) context.getBean("jdbcTemplate");		
	}
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {

		String query = req.getParameter("query");		
		if(query==null || "".equals(query.trim())) return;		
		int offset = 0, limit = 0;
		
		try {
			offset = Integer.parseInt(req.getParameter("start"));
		} catch (Exception ex) {}
		try {
			limit = Integer.parseInt(req.getParameter("limit"));
		} catch (Exception ex) {}

		if(limit <=0 ) { limit = 20; }
		
		// get the overall total count
		final List<JSONObject> resultList = new ArrayList<JSONObject>();
		jdbcTemplate.<JSONObject> query(
				"SELECT distinct word_x FROM word_lemmatised " +
				"WHERE word_x like ? order by word_x limit ? offset ?;",
				new ParameterizedRowMapper<JSONObject>() {
					public JSONObject mapRow(ResultSet rs, int rowNum)
							throws SQLException {
						JSONObject jsonWord = new JSONObject();
						try {
							jsonWord.put("word_x", rs.getString(1));
							resultList.add(jsonWord);
						} catch (JSONException e) {}
						return jsonWord;
					}
				}, query+"%", limit, offset);
		
		int totalCount = jdbcTemplate.queryForInt(
				"SELECT count(distinct word_x) FROM word_lemmatised "
						+ "WHERE word_x like ?", query + "%");
		boolean success = true;
		
		
		JSONObject response = new JSONObject();		
		try {
			response.put("success", success);
			response.put("totalCount", totalCount);
			response.put("records", resultList);			
		} catch (JSONException e) {}
		resp.getWriter().print(response.toString());
	}

	public void setJdbcTemplate(SimpleJdbcTemplate jdbcTemplate) {
		this.jdbcTemplate = jdbcTemplate;
	}

	public SimpleJdbcTemplate getJdbcTemplate() {
		return jdbcTemplate;
	}
}

src/main/webapp/WEB-INF/web.xml

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
	<display-name>Archetype Created Web Application</display-name>

	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath:applicationContext.xml</param-value>
	</context-param>

	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
    <listener>
        <listener-class>com.test.DBLifecycleContextListener</listener-class>
    </listener>
    
	<servlet>
		<servlet-name>searchServlet</servlet-name>
		<servlet-class>com.test.SearchServlet</servlet-class>
	</servlet>

	<servlet-mapping>
		<servlet-name>searchServlet</servlet-name>
		<url-pattern>/app/searchServlet</url-pattern>
	</servlet-mapping>
</web-app>

Infrastructure classes

The following classes and configuration files support the application.

src/main/java/com/test/DBLifecycleContextListener.java

package com.test;
 
import java.io.InputStreamReader;
 
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.sql.DataSource;
 
import org.apache.ddlutils.Platform;
import org.apache.ddlutils.PlatformFactory;
import org.apache.ddlutils.io.DatabaseIO;
import org.apache.ddlutils.model.Database;
import org.springframework.jdbc.core.simple.SimpleJdbcTemplate;
import org.springframework.web.context.WebApplicationContext;
import org.springframework.web.context.support.WebApplicationContextUtils;
 
/**
 * This listener initializes or gracefully shuts down the database based on
 * events from the web application.
 */
public class DBLifecycleContextListener implements ServletContextListener {
    private DataSource dataSource = null;
    private WebApplicationContext springContext = null;
 
    public void contextDestroyed(ServletContextEvent event) {
        SimpleJdbcTemplate template = new SimpleJdbcTemplate(dataSource);
        template.update("SHUTDOWN;");
        System.out.println("HSQLDB was shutdown. ");
    }
 
    public void contextInitialized(ServletContextEvent event) {
        springContext = WebApplicationContextUtils
                .getWebApplicationContext(event.getServletContext());
        dataSource = (DataSource) springContext.getBean("dataSource");
 
        Platform platform = PlatformFactory
                .createNewPlatformInstance(dataSource);
 
        Database database = new DatabaseIO().read(new InputStreamReader(
                getClass().getResourceAsStream("/ddl.xml")));
 
        System.out.println(database);
 
        platform.alterTables(database, false);
 
        System.out.println("HSQLDB is ready: " + platform);
 
    }
 
}

HyperSQL in memory database Setup

The following defines the schema that will be used to create the in-memory tables in the Java HyperSQL database.

src/main/resources/ddl.xml

<?xml version="1.0"?>
<!DOCTYPE database SYSTEM "http://db.apache.org/torque/dtd/database.dtd">
<database name="liveSearch">
  <table name="word_lemmatised">
    <column name="word_x"
            type="VARCHAR"
            primaryKey="true"
            size="255"
            required="true"/>
    <column name="wordClass"
            type="VARCHAR"
            primaryKey="true"
            size="10"
            required="true"/>
    <column name="frequency"
            type="INTEGER"
            required="true"/>
    <column name="sortOrder"
            type="INTEGER"
            required="true"/>            

    <index name="word_lemmatised_frequency">
	<index-column name="frequency"/>
    </index>
    <index name="word_lemmatised_sortOrder">
	<index-column name="sortOrder"/>
    </index>

  </table>
 
</database>

The following data is the word list used to populate the in-memory table. This table will be queried by the servlet so it can return json back to the extjs component.

Copy the contents of this file into:

src/main/resources/db/liveSearch.script

CREATE SCHEMA PUBLIC AUTHORIZATION DBA
CREATE MEMORY TABLE WORD_LEMMATISED(WORD_X VARCHAR(255) NOT NULL,WORDCLASS VARCHAR(10) NOT NULL,FREQUENCY INTEGER NOT NULL,SORTORDER INTEGER NOT NULL,PRIMARY KEY(WORD_X,WORDCLASS))
CREATE INDEX WORD_LEMMATISED_FREQUENCY ON WORD_LEMMATISED(FREQUENCY)
CREATE INDEX WORD_LEMMATISED_SORTORDER ON WORD_LEMMATISED(SORTORDER)
CREATE USER SA PASSWORD ""
GRANT DBA TO SA
SET WRITE_DELAY 10
SET SCHEMA PUBLIC
INSERT INTO WORD_LEMMATISED VALUES('a','det',2186369,5)
INSERT INTO WORD_LEMMATISED VALUES('abandon','v',4249,2107)
INSERT INTO WORD_LEMMATISED VALUES('abbey','n',1110,5204)
INSERT INTO WORD_LEMMATISED VALUES('ability','n',10468,966)
INSERT INTO WORD_LEMMATISED VALUES('able','a',30454,321)
INSERT INTO WORD_LEMMATISED VALUES('abnormal','a',809,6277)
INSERT INTO WORD_LEMMATISED VALUES('abolish','v',1744,3862)
INSERT INTO WORD_LEMMATISED VALUES('abolition','n',1154,5085)
INSERT INTO WORD_LEMMATISED VALUES('abortion','n',1471,4341)
INSERT INTO WORD_LEMMATISED VALUES('about','adv',52561,179)
INSERT INTO WORD_LEMMATISED VALUES('about','prep',144554,69)
INSERT INTO WORD_LEMMATISED VALUES('above','a',2139,3341)
INSERT INTO WORD_LEMMATISED VALUES('abroad','adv',3941,2236)
INSERT INTO WORD_LEMMATISED VALUES('abruptly','adv',1146,5106)
INSERT INTO WORD_LEMMATISED VALUES('absence','n',5949,1602)
INSERT INTO WORD_LEMMATISED VALUES('absent','a',1504,4266)
INSERT INTO WORD_LEMMATISED VALUES('absolute','a',3489,2435)
INSERT INTO WORD_LEMMATISED VALUES('absolutely','adv',5782,1651)
INSERT INTO WORD_LEMMATISED VALUES('absorb','v',2684,2907)
INSERT INTO WORD_LEMMATISED VALUES('absorption','n',932,5769)
INSERT INTO WORD_LEMMATISED VALUES('abstract','a',1605,4083)
INSERT INTO WORD_LEMMATISED VALUES('absurd','a',966,5655)
INSERT INTO WORD_LEMMATISED VALUES('abuse','n',3428,2461)
INSERT INTO WORD_LEMMATISED VALUES('abuse','v',1364,4570)
INSERT INTO WORD_LEMMATISED VALUES('academic','a',4594,1974)
INSERT INTO WORD_LEMMATISED VALUES('academy','n',1025,5453)
INSERT INTO WORD_LEMMATISED VALUES('accelerate','v',1114,5188)
INSERT INTO WORD_LEMMATISED VALUES('accent','n',1842,3707)
INSERT INTO WORD_LEMMATISED VALUES('accept','v',20373,507)
INSERT INTO WORD_LEMMATISED VALUES('acceptable','a',3647,2351)
INSERT INTO WORD_LEMMATISED VALUES('acceptance','n',2702,2895)
INSERT INTO WORD_LEMMATISED VALUES('access','n',10099,997)
INSERT INTO WORD_LEMMATISED VALUES('access','v',1389,4516)
INSERT INTO WORD_LEMMATISED VALUES('accessible','a',1637,4024)
INSERT INTO WORD_LEMMATISED VALUES('accident','n',8374,1207)
INSERT INTO WORD_LEMMATISED VALUES('accommodate','v',2065,3418)
INSERT INTO WORD_LEMMATISED VALUES('accommodation','n',4305,2085)
INSERT INTO WORD_LEMMATISED VALUES('accompany','v',4885,1892)
INSERT INTO WORD_LEMMATISED VALUES('accomplish','v',968,5648)
INSERT INTO WORD_LEMMATISED VALUES('accord','n',947,5723)
INSERT INTO WORD_LEMMATISED VALUES('accord','v',976,5613)
INSERT INTO WORD_LEMMATISED VALUES('accordance','n',2042,3443)
INSERT INTO WORD_LEMMATISED VALUES('according','prep',15722,646)
INSERT INTO WORD_LEMMATISED VALUES('accordingly','adv',2288,3214)
INSERT INTO WORD_LEMMATISED VALUES('account','n',19260,536)
INSERT INTO WORD_LEMMATISED VALUES('account','v',6130,1562)
INSERT INTO WORD_LEMMATISED VALUES('accountability','n',1184,5011)
INSERT INTO WORD_LEMMATISED VALUES('accountant','n',2199,3289)
INSERT INTO WORD_LEMMATISED VALUES('accounting','a',1640,4018)
INSERT INTO WORD_LEMMATISED VALUES('accumulate','v',1084,5279)
INSERT INTO WORD_LEMMATISED VALUES('accumulation','n',987,5570)
INSERT INTO WORD_LEMMATISED VALUES('accuracy','n',1692,3934)
INSERT INTO WORD_LEMMATISED VALUES('accurate','a',2928,2743)
INSERT INTO WORD_LEMMATISED VALUES('accurately','adv',1423,4436)
INSERT INTO WORD_LEMMATISED VALUES('accusation','n',1153,5088)
INSERT INTO WORD_LEMMATISED VALUES('accuse','v',4047,2190)
INSERT INTO WORD_LEMMATISED VALUES('accused','a',1387,4521)
INSERT INTO WORD_LEMMATISED VALUES('achieve','v',16628,611)
INSERT INTO WORD_LEMMATISED VALUES('achievement','n',4586,1980)
INSERT INTO WORD_LEMMATISED VALUES('acid','n',5897,1613)
INSERT INTO WORD_LEMMATISED VALUES('acknowledge','v',4151,2139)
INSERT INTO WORD_LEMMATISED VALUES('acquaintance','n',920,5809)
INSERT INTO WORD_LEMMATISED VALUES('acquire','v',6354,1512)
INSERT INTO WORD_LEMMATISED VALUES('acquisition','n',3245,2546)
INSERT INTO WORD_LEMMATISED VALUES('acre','n',2150,3327)
INSERT INTO WORD_LEMMATISED VALUES('across','adv',3439,2457)
INSERT INTO WORD_LEMMATISED VALUES('across','prep',21763,474)
INSERT INTO WORD_LEMMATISED VALUES('act','n',22657,455)
INSERT INTO WORD_LEMMATISED VALUES('act','v',15620,654)
INSERT INTO WORD_LEMMATISED VALUES('action','n',26894,371)
INSERT INTO WORD_LEMMATISED VALUES('activate','v',1293,4708)
INSERT INTO WORD_LEMMATISED VALUES('active','a',7290,1332)
INSERT INTO WORD_LEMMATISED VALUES('actively','adv',1493,4294)
INSERT INTO WORD_LEMMATISED VALUES('activist','n',1285,4736)
INSERT INTO WORD_LEMMATISED VALUES('activity','n',23105,440)
INSERT INTO WORD_LEMMATISED VALUES('actor','n',3540,2413)
INSERT INTO WORD_LEMMATISED VALUES('actress','n',1051,5376)
INSERT INTO WORD_LEMMATISED VALUES('actual','a',6849,1414)
INSERT INTO WORD_LEMMATISED VALUES('actually','adv',25990,385)
INSERT INTO WORD_LEMMATISED VALUES('acute','a',2294,3205)
INSERT INTO WORD_LEMMATISED VALUES('adapt','v',2687,2906)
INSERT INTO WORD_LEMMATISED VALUES('adaptation','n',1132,5153)
INSERT INTO WORD_LEMMATISED VALUES('add','v',27367,363)
INSERT INTO WORD_LEMMATISED VALUES('added','a',1334,4624)
INSERT INTO WORD_LEMMATISED VALUES('addition','n',10664,949)
INSERT INTO WORD_LEMMATISED VALUES('additional','a',7364,1319)
INSERT INTO WORD_LEMMATISED VALUES('address','n',6112,1566)
INSERT INTO WORD_LEMMATISED VALUES('address','v',5872,1625)
INSERT INTO WORD_LEMMATISED VALUES('adequate','a',3571,2397)
INSERT INTO WORD_LEMMATISED VALUES('adequately','adv',1149,5097)
INSERT INTO WORD_LEMMATISED VALUES('adjacent','a',1624,4047)
INSERT INTO WORD_LEMMATISED VALUES('adjective','n',1012,5496)
INSERT INTO WORD_LEMMATISED VALUES('adjust','v',2697,2898)
INSERT INTO WORD_LEMMATISED VALUES('adjustment','n',2114,3370)
INSERT INTO WORD_LEMMATISED VALUES('administer','v',1795,3769)
INSERT INTO WORD_LEMMATISED VALUES('administration','n',6865,1409)
INSERT INTO WORD_LEMMATISED VALUES('administrative','a',3548,2407)
INSERT INTO WORD_LEMMATISED VALUES('administrator','n',1483,4314)
INSERT INTO WORD_LEMMATISED VALUES('admiration','n',966,5654)
INSERT INTO WORD_LEMMATISED VALUES('admire','v',2168,3312)
INSERT INTO WORD_LEMMATISED VALUES('admission','n',2742,2861)
INSERT INTO WORD_LEMMATISED VALUES('admit','v',10905,925)
INSERT INTO WORD_LEMMATISED VALUES('adopt','v',8549,1186)
INSERT INTO WORD_LEMMATISED VALUES('adoption','n',1544,4191)
INSERT INTO WORD_LEMMATISED VALUES('adult','a',1547,4182)
INSERT INTO WORD_LEMMATISED VALUES('adult','n',6855,1411)
INSERT INTO WORD_LEMMATISED VALUES('advance','n',5055,1840)
INSERT INTO WORD_LEMMATISED VALUES('advance','v',3032,2683)
INSERT INTO WORD_LEMMATISED VALUES('advanced','a',3183,2583)
INSERT INTO WORD_LEMMATISED VALUES('advantage','n',10285,981)
INSERT INTO WORD_LEMMATISED VALUES('adventure','n',1993,3491)
INSERT INTO WORD_LEMMATISED VALUES('adverse','a',1184,5010)
INSERT INTO WORD_LEMMATISED VALUES('advertise','v',2099,3386)
INSERT INTO WORD_LEMMATISED VALUES('advertisement','n',2136,3344)
INSERT INTO WORD_LEMMATISED VALUES('advertising','n',3582,2392)
INSERT INTO WORD_LEMMATISED VALUES('advice','n',10437,971)
INSERT INTO WORD_LEMMATISED VALUES('advise','v',5055,1839)
INSERT INTO WORD_LEMMATISED VALUES('adviser','n',3191,2580)
INSERT INTO WORD_LEMMATISED VALUES('advisory','a',1500,4277)
INSERT INTO WORD_LEMMATISED VALUES('advocate','n',911,5848)
INSERT INTO WORD_LEMMATISED VALUES('advocate','v',1636,4029)
INSERT INTO WORD_LEMMATISED VALUES('aesthetic','a',1027,5444)
INSERT INTO WORD_LEMMATISED VALUES('affair','n',10561,954)
INSERT INTO WORD_LEMMATISED VALUES('affect','v',12867,789)
INSERT INTO WORD_LEMMATISED VALUES('affection','n',1601,4092)
INSERT INTO WORD_LEMMATISED VALUES('affinity','n',847,6101)
INSERT INTO WORD_LEMMATISED VALUES('afford','v',5346,1769)
INSERT INTO WORD_LEMMATISED VALUES('afraid','a',5967,1596)
INSERT INTO WORD_LEMMATISED VALUES('after','conj',30855,312)
INSERT INTO WORD_LEMMATISED VALUES('after','prep',85939,111)
INSERT INTO WORD_LEMMATISED VALUES('afternoon','n',8934,1128)
INSERT INTO WORD_LEMMATISED VALUES('afterwards','adv',4544,1991)
INSERT INTO WORD_LEMMATISED VALUES('again','adv',59829,160)
INSERT INTO WORD_LEMMATISED VALUES('against','prep',56208,169)
INSERT INTO WORD_LEMMATISED VALUES('age','n',25340,399)
INSERT INTO WORD_LEMMATISED VALUES('age','v',1565,4142)
INSERT INTO WORD_LEMMATISED VALUES('aged','prep',3096,2641)
INSERT INTO WORD_LEMMATISED VALUES('agency','n',9579,1054)
INSERT INTO WORD_LEMMATISED VALUES('agenda','n',2427,3069)
INSERT INTO WORD_LEMMATISED VALUES('agent','n',8100,1233)
INSERT INTO WORD_LEMMATISED VALUES('aggregate','a',1078,5294)
INSERT INTO WORD_LEMMATISED VALUES('aggression','n',1243,4845)
INSERT INTO WORD_LEMMATISED VALUES('aggressive','a',1925,3581)
INSERT INTO WORD_LEMMATISED VALUES('ago','adv',19808,522)
INSERT INTO WORD_LEMMATISED VALUES('agony','n',1017,5475)
INSERT INTO WORD_LEMMATISED VALUES('agree','v',23497,428)
INSERT INTO WORD_LEMMATISED VALUES('agreed','a',1106,5218)
INSERT INTO WORD_LEMMATISED VALUES('agreement','n',15627,651)
INSERT INTO WORD_LEMMATISED VALUES('agricultural','a',3162,2593)
INSERT INTO WORD_LEMMATISED VALUES('agriculture','n',3858,2265)
INSERT INTO WORD_LEMMATISED VALUES('ahead','adv',8809,1145)
INSERT INTO WORD_LEMMATISED VALUES('aid','n',7903,1249)
INSERT INTO WORD_LEMMATISED VALUES('aid','v',2086,3398)
INSERT INTO WORD_LEMMATISED VALUES('aids','n',2463,3042)
INSERT INTO WORD_LEMMATISED VALUES('aim','n',7460,1306)
INSERT INTO WORD_LEMMATISED VALUES('aim','v',7638,1281)
INSERT INTO WORD_LEMMATISED VALUES('air','n',19046,544)
INSERT INTO WORD_LEMMATISED VALUES('aircraft','n',6200,1548)
INSERT INTO WORD_LEMMATISED VALUES('airline','n',1982,3500)
INSERT INTO WORD_LEMMATISED VALUES('airport','n',2756,2855)
INSERT INTO WORD_LEMMATISED VALUES('alarm','n',2322,3169)
INSERT INTO WORD_LEMMATISED VALUES('alarm','v',1222,4914)
INSERT INTO WORD_LEMMATISED VALUES('albeit','conj',1406,4477)
INSERT INTO WORD_LEMMATISED VALUES('album','n',2581,2957)
INSERT INTO WORD_LEMMATISED VALUES('alcohol','n',3066,2662)
INSERT INTO WORD_LEMMATISED VALUES('alert','a',810,6273)
INSERT INTO WORD_LEMMATISED VALUES('alert','v',1125,5170)
INSERT INTO WORD_LEMMATISED VALUES('alien','a',868,6003)
INSERT INTO WORD_LEMMATISED VALUES('alike','adv',1270,4773)
INSERT INTO WORD_LEMMATISED VALUES('alive','a',4254,2103)
INSERT INTO WORD_LEMMATISED VALUES('all','adv',55704,171)
INSERT INTO WORD_LEMMATISED VALUES('all','det',230737,43)
INSERT INTO WORD_LEMMATISED VALUES('allegation','n',2124,3360)
INSERT INTO WORD_LEMMATISED VALUES('allege','v',1820,3731)
INSERT INTO WORD_LEMMATISED VALUES('alleged','a',1728,3887)
INSERT INTO WORD_LEMMATISED VALUES('allegedly','adv',1041,5398)
INSERT INTO WORD_LEMMATISED VALUES('alliance','n',3518,2422)
INSERT INTO WORD_LEMMATISED VALUES('allied','a',972,5630)
INSERT INTO WORD_LEMMATISED VALUES('allocate','v',2445,3060)
INSERT INTO WORD_LEMMATISED VALUES('allocation','n',2305,3193)
INSERT INTO WORD_LEMMATISED VALUES('allow','v',33687,279)
INSERT INTO WORD_LEMMATISED VALUES('allowance','n',3411,2472)
INSERT INTO WORD_LEMMATISED VALUES('ally','n',2381,3105)
INSERT INTO WORD_LEMMATISED VALUES('almost','adv',31588,300)
INSERT INTO WORD_LEMMATISED VALUES('alone','a',7088,1365)
INSERT INTO WORD_LEMMATISED VALUES('alone','adv',6262,1528)
INSERT INTO WORD_LEMMATISED VALUES('along','adv',8081,1235)
INSERT INTO WORD_LEMMATISED VALUES('along','prep',16233,627)
INSERT INTO WORD_LEMMATISED VALUES('alongside','prep',2720,2883)
INSERT INTO WORD_LEMMATISED VALUES('aloud','adv',999,5533)
INSERT INTO WORD_LEMMATISED VALUES('already','adv',34292,275)
INSERT INTO WORD_LEMMATISED VALUES('alright','a',3592,2386)
INSERT INTO WORD_LEMMATISED VALUES('alright','adv',4777,1926)
INSERT INTO WORD_LEMMATISED VALUES('also','adv',124884,81)
INSERT INTO WORD_LEMMATISED VALUES('altar','n',969,5643)
INSERT INTO WORD_LEMMATISED VALUES('alter','v',4061,2183)
INSERT INTO WORD_LEMMATISED VALUES('alteration','n',1527,4226)
INSERT INTO WORD_LEMMATISED VALUES('alternative','a',5098,1828)
INSERT INTO WORD_LEMMATISED VALUES('alternative','n',5228,1797)
INSERT INTO WORD_LEMMATISED VALUES('alternatively','adv',1723,3894)
INSERT INTO WORD_LEMMATISED VALUES('although','conj',43635,215)
INSERT INTO WORD_LEMMATISED VALUES('altogether','adv',3218,2558)
INSERT INTO WORD_LEMMATISED VALUES('aluminium','n',995,5546)
INSERT INTO WORD_LEMMATISED VALUES('always','adv',46228,201)
INSERT INTO WORD_LEMMATISED VALUES('amateur','a',1025,5452)
INSERT INTO WORD_LEMMATISED VALUES('amateur','n',900,5879)
INSERT INTO WORD_LEMMATISED VALUES('amazing','a',1873,3658)
INSERT INTO WORD_LEMMATISED VALUES('ambassador','n',1264,4788)
INSERT INTO WORD_LEMMATISED VALUES('ambiguity','n',1058,5345)
INSERT INTO WORD_LEMMATISED VALUES('ambiguous','a',837,6146)
INSERT INTO WORD_LEMMATISED VALUES('ambition','n',2319,3177)
INSERT INTO WORD_LEMMATISED VALUES('ambitious','a',1526,4228)
INSERT INTO WORD_LEMMATISED VALUES('ambulance','n',1690,3936)
INSERT INTO WORD_LEMMATISED VALUES('amend','v',1386,4525)
INSERT INTO WORD_LEMMATISED VALUES('amendment','n',2574,2960)
INSERT INTO WORD_LEMMATISED VALUES('amid','prep',1096,5243)
INSERT INTO WORD_LEMMATISED VALUES('among','prep',22864,450)
INSERT INTO WORD_LEMMATISED VALUES('amongst','prep',4552,1989)
INSERT INTO WORD_LEMMATISED VALUES('amount','n',16138,629)
INSERT INTO WORD_LEMMATISED VALUES('amount','v',3633,2358)
INSERT INTO WORD_LEMMATISED VALUES('amp','n',878,5960)
INSERT INTO WORD_LEMMATISED VALUES('ample','a',822,6211)
INSERT INTO WORD_LEMMATISED VALUES('amuse','v',1093,5255)
INSERT INTO WORD_LEMMATISED VALUES('amusement','n',1027,5443)
INSERT INTO WORD_LEMMATISED VALUES('an','det',343063,33)
INSERT INTO WORD_LEMMATISED VALUES('analogy','n',1098,5238)
INSERT INTO WORD_LEMMATISED VALUES('analyse','v',4106,2166)
INSERT INTO WORD_LEMMATISED VALUES('analysis','n',14149,732)
INSERT INTO WORD_LEMMATISED VALUES('analyst','n',1586,4109)
INSERT INTO WORD_LEMMATISED VALUES('ancestor','n',1249,4821)
INSERT INTO WORD_LEMMATISED VALUES('ancient','a',4981,1860)
INSERT INTO WORD_LEMMATISED VALUES('and','conj',2687863,4)
INSERT INTO WORD_LEMMATISED VALUES('angel','n',1897,3616)
INSERT INTO WORD_LEMMATISED VALUES('anger','n',3291,2530)
INSERT INTO WORD_LEMMATISED VALUES('anger','v',892,5902)
INSERT INTO WORD_LEMMATISED VALUES('angle','n',3644,2352)
INSERT INTO WORD_LEMMATISED VALUES('angrily','adv',1093,5254)
INSERT INTO WORD_LEMMATISED VALUES('angry','a',4282,2095)
INSERT INTO WORD_LEMMATISED VALUES('animal','n',15250,671)
INSERT INTO WORD_LEMMATISED VALUES('ankle','n',1363,4573)
INSERT INTO WORD_LEMMATISED VALUES('anniversary','n',2144,3332)
INSERT INTO WORD_LEMMATISED VALUES('announce','v',12582,815)
INSERT INTO WORD_LEMMATISED VALUES('announcement','n',2758,2852)
INSERT INTO WORD_LEMMATISED VALUES('annoy','v',1116,5186)
INSERT INTO WORD_LEMMATISED VALUES('annual','a',7785,1265)
INSERT INTO WORD_LEMMATISED VALUES('annually','adv',1092,5258)
INSERT INTO WORD_LEMMATISED VALUES('anonymous','a',1112,5194)
INSERT INTO WORD_LEMMATISED VALUES('another','det',60182,159)
INSERT INTO WORD_LEMMATISED VALUES('answer','n',12596,810)
INSERT INTO WORD_LEMMATISED VALUES('answer','v',10140,989)
INSERT INTO WORD_LEMMATISED VALUES('ant','n',998,5539)
INSERT INTO WORD_LEMMATISED VALUES('antibody','n',1528,4221)
INSERT INTO WORD_LEMMATISED VALUES('anticipate','v',2316,3184)
INSERT INTO WORD_LEMMATISED VALUES('anticipation','n',835,6155)
INSERT INTO WORD_LEMMATISED VALUES('anxiety','n',3129,2616)
INSERT INTO WORD_LEMMATISED VALUES('anxious','a',3088,2645)
INSERT INTO WORD_LEMMATISED VALUES('any','det',123655,83)
INSERT INTO WORD_LEMMATISED VALUES('anybody','pron',4952,1872)
INSERT INTO WORD_LEMMATISED VALUES('anyone','pron',14956,686)
INSERT INTO WORD_LEMMATISED VALUES('anything','pron',28321,347)
INSERT INTO WORD_LEMMATISED VALUES('anyway','adv',12232,837)
INSERT INTO WORD_LEMMATISED VALUES('anywhere','adv',4105,2167)
INSERT INTO WORD_LEMMATISED VALUES('apart','adv',10040,1004)
INSERT INTO WORD_LEMMATISED VALUES('apartment','n',1901,3612)
INSERT INTO WORD_LEMMATISED VALUES('apologise','v',1057,5353)
INSERT INTO WORD_LEMMATISED VALUES('apology','n',1195,4984)
INSERT INTO WORD_LEMMATISED VALUES('appalling','a',1027,5442)
INSERT INTO WORD_LEMMATISED VALUES('apparatus','n',1099,5236)
INSERT INTO WORD_LEMMATISED VALUES('apparent','a',5306,1782)
INSERT INTO WORD_LEMMATISED VALUES('apparently','adv',7696,1272)
INSERT INTO WORD_LEMMATISED VALUES('appeal','n',10020,1006)
INSERT INTO WORD_LEMMATISED VALUES('appeal','v',4764,1930)
INSERT INTO WORD_LEMMATISED VALUES('appear','v',30595,319)
INSERT INTO WORD_LEMMATISED VALUES('appearance','n',6606,1462)
INSERT INTO WORD_LEMMATISED VALUES('appendix','n',1884,3643)
INSERT INTO WORD_LEMMATISED VALUES('appetite','n',1055,5363)
INSERT INTO WORD_LEMMATISED VALUES('apple','n',2996,2704)
INSERT INTO WORD_LEMMATISED VALUES('applicable','a',1419,4443)
INSERT INTO WORD_LEMMATISED VALUES('applicant','n',2179,3305)
INSERT INTO WORD_LEMMATISED VALUES('application','n',16281,623)
INSERT INTO WORD_LEMMATISED VALUES('applied','a',1155,5081)
INSERT INTO WORD_LEMMATISED VALUES('apply','v',18982,547)
INSERT INTO WORD_LEMMATISED VALUES('appoint','v',6407,1500)
INSERT INTO WORD_LEMMATISED VALUES('appointed','a',1606,4080)
INSERT INTO WORD_LEMMATISED VALUES('appointment','n',5911,1610)
INSERT INTO WORD_LEMMATISED VALUES('appraisal','n',1092,5257)
INSERT INTO WORD_LEMMATISED VALUES('appreciate','v',4312,2082)
INSERT INTO WORD_LEMMATISED VALUES('appreciation','n',1329,4640)
INSERT INTO WORD_LEMMATISED VALUES('approach','n',16331,621)
INSERT INTO WORD_LEMMATISED VALUES('approach','v',7432,1310)
INSERT INTO WORD_LEMMATISED VALUES('appropriate','a',11010,917)
INSERT INTO WORD_LEMMATISED VALUES('appropriately','adv',891,5905)
INSERT INTO WORD_LEMMATISED VALUES('approval','n',4050,2187)
INSERT INTO WORD_LEMMATISED VALUES('approve','v',5312,1780)
INSERT INTO WORD_LEMMATISED VALUES('approved','a',911,5847)
INSERT INTO WORD_LEMMATISED VALUES('approximately','adv',2837,2798)
INSERT INTO WORD_LEMMATISED VALUES('aquarium','n',912,5843)
INSERT INTO WORD_LEMMATISED VALUES('arbitrary','a',1091,5262)
INSERT INTO WORD_LEMMATISED VALUES('arc','n',842,6125)
INSERT INTO WORD_LEMMATISED VALUES('arch','n',1248,4825)
INSERT INTO WORD_LEMMATISED VALUES('archaeological','a',826,6187)
INSERT INTO WORD_LEMMATISED VALUES('archbishop','n',1109,5206)
INSERT INTO WORD_LEMMATISED VALUES('architect','n',2572,2961)
INSERT INTO WORD_LEMMATISED VALUES('architectural','a',885,5929)
INSERT INTO WORD_LEMMATISED VALUES('architecture','n',3018,2688)
INSERT INTO WORD_LEMMATISED VALUES('archive','n',1124,5172)
INSERT INTO WORD_LEMMATISED VALUES('area','n',58449,162)
INSERT INTO WORD_LEMMATISED VALUES('arena','n',952,5704)
INSERT INTO WORD_LEMMATISED VALUES('argue','v',14196,728)
INSERT INTO WORD_LEMMATISED VALUES('argument','n',12125,843)
INSERT INTO WORD_LEMMATISED VALUES('arise','v',8860,1139)
INSERT INTO WORD_LEMMATISED VALUES('arm','n',20089,513)
INSERT INTO WORD_LEMMATISED VALUES('arm','v',1533,4214)
INSERT INTO WORD_LEMMATISED VALUES('armchair','n',886,5924)
INSERT INTO WORD_LEMMATISED VALUES('armed','a',3344,2505)
INSERT INTO WORD_LEMMATISED VALUES('army','n',12379,826)
INSERT INTO WORD_LEMMATISED VALUES('around','adv',23106,439)
INSERT INTO WORD_LEMMATISED VALUES('around','prep',22180,461)
INSERT INTO WORD_LEMMATISED VALUES('arouse','v',1308,4675)
INSERT INTO WORD_LEMMATISED VALUES('arrange','v',7021,1379)
INSERT INTO WORD_LEMMATISED VALUES('arrangement','n',9054,1113)
INSERT INTO WORD_LEMMATISED VALUES('array','n',1258,4803)
INSERT INTO WORD_LEMMATISED VALUES('arrest','n',2095,3391)
INSERT INTO WORD_LEMMATISED VALUES('arrest','v',4059,2185)
INSERT INTO WORD_LEMMATISED VALUES('arrival','n',3815,2278)
INSERT INTO WORD_LEMMATISED VALUES('arrive','v',14093,735)
INSERT INTO WORD_LEMMATISED VALUES('arrow','n',1621,4058)
INSERT INTO WORD_LEMMATISED VALUES('art','n',20168,509)
INSERT INTO WORD_LEMMATISED VALUES('article','n',9710,1037)
INSERT INTO WORD_LEMMATISED VALUES('articulate','v',821,6218)
INSERT INTO WORD_LEMMATISED VALUES('artificial','a',1901,3611)
INSERT INTO WORD_LEMMATISED VALUES('artist','n',8105,1232)
INSERT INTO WORD_LEMMATISED VALUES('artistic','a',1553,4170)
INSERT INTO WORD_LEMMATISED VALUES('as','adv',101583,98)
INSERT INTO WORD_LEMMATISED VALUES('as','conj',364164,31)
INSERT INTO WORD_LEMMATISED VALUES('as','prep',201968,48)
INSERT INTO WORD_LEMMATISED VALUES('ascertain','v',842,6124)
INSERT INTO WORD_LEMMATISED VALUES('ash','n',1051,5375)
INSERT INTO WORD_LEMMATISED VALUES('ashamed','a',1100,5233)
INSERT INTO WORD_LEMMATISED VALUES('aside','adv',3607,2375)
INSERT INTO WORD_LEMMATISED VALUES('ask','v',60879,154)
INSERT INTO WORD_LEMMATISED VALUES('asleep','a',2463,3041)
INSERT INTO WORD_LEMMATISED VALUES('aspect','n',11643,871)
INSERT INTO WORD_LEMMATISED VALUES('aspiration','n',1269,4777)
INSERT INTO WORD_LEMMATISED VALUES('assault','n',2395,3094)
INSERT INTO WORD_LEMMATISED VALUES('assault','v',919,5814)
INSERT INTO WORD_LEMMATISED VALUES('assemble','v',1621,4057)
INSERT INTO WORD_LEMMATISED VALUES('assembly','n',5847,1630)
INSERT INTO WORD_LEMMATISED VALUES('assert','v',2012,3477)
INSERT INTO WORD_LEMMATISED VALUES('assertion','n',1119,5180)
INSERT INTO WORD_LEMMATISED VALUES('assess','v',6088,1570)
INSERT INTO WORD_LEMMATISED VALUES('assessment','n',7602,1290)
INSERT INTO WORD_LEMMATISED VALUES('asset','n',5721,1663)
INSERT INTO WORD_LEMMATISED VALUES('assign','v',1778,3802)
INSERT INTO WORD_LEMMATISED VALUES('assignment','n',1707,3919)
INSERT INTO WORD_LEMMATISED VALUES('assist','v',4021,2202)
INSERT INTO WORD_LEMMATISED VALUES('assistance','n',4344,2064)
INSERT INTO WORD_LEMMATISED VALUES('assistant','a',1745,3860)
INSERT INTO WORD_LEMMATISED VALUES('assistant','n',2655,2921)
INSERT INTO WORD_LEMMATISED VALUES('associate','n',1047,5383)
INSERT INTO WORD_LEMMATISED VALUES('associate','v',8743,1156)
INSERT INTO WORD_LEMMATISED VALUES('associated','a',1447,4391)
INSERT INTO WORD_LEMMATISED VALUES('association','n',13471,757)
INSERT INTO WORD_LEMMATISED VALUES('assume','v',11044,912)
INSERT INTO WORD_LEMMATISED VALUES('assumption','n',5554,1705)
INSERT INTO WORD_LEMMATISED VALUES('assurance','n',2100,3384)
INSERT INTO WORD_LEMMATISED VALUES('assure','v',3116,2625)
INSERT INTO WORD_LEMMATISED VALUES('astonishing','a',848,6096)
INSERT INTO WORD_LEMMATISED VALUES('asylum','n',974,5620)
INSERT INTO WORD_LEMMATISED VALUES('at','prep',534162,19)
INSERT INTO WORD_LEMMATISED VALUES('athlete','n',812,6264)
INSERT INTO WORD_LEMMATISED VALUES('atmosphere','n',4902,1889)
INSERT INTO WORD_LEMMATISED VALUES('atom','n',1473,4331)
INSERT INTO WORD_LEMMATISED VALUES('atomic','a',1106,5217)
INSERT INTO WORD_LEMMATISED VALUES('attach','v',4821,1915)
INSERT INTO WORD_LEMMATISED VALUES('attachment','n',959,5677)
INSERT INTO WORD_LEMMATISED VALUES('attack','n',9963,1012)
INSERT INTO WORD_LEMMATISED VALUES('attack','v',6586,1464)
INSERT INTO WORD_LEMMATISED VALUES('attacker','n',919,5813)
INSERT INTO WORD_LEMMATISED VALUES('attain','v',1182,5016)
INSERT INTO WORD_LEMMATISED VALUES('attainment','n',948,5717)
INSERT INTO WORD_LEMMATISED VALUES('attempt','n',11877,857)
INSERT INTO WORD_LEMMATISED VALUES('attempt','v',9873,1022)
INSERT INTO WORD_LEMMATISED VALUES('attempted','a',849,6090)
INSERT INTO WORD_LEMMATISED VALUES('attend','v',8801,1148)
INSERT INTO WORD_LEMMATISED VALUES('attendance','n',1889,3633)
INSERT INTO WORD_LEMMATISED VALUES('attention','n',13968,740)
INSERT INTO WORD_LEMMATISED VALUES('attitude','n',10758,938)
INSERT INTO WORD_LEMMATISED VALUES('attract','v',6410,1498)
INSERT INTO WORD_LEMMATISED VALUES('attraction','n',2366,3124)
INSERT INTO WORD_LEMMATISED VALUES('attractive','a',5152,1814)
INSERT INTO WORD_LEMMATISED VALUES('attribute','n',1260,4798)
INSERT INTO WORD_LEMMATISED VALUES('attribute','v',2311,3187)
INSERT INTO WORD_LEMMATISED VALUES('auction','n',1466,4352)
INSERT INTO WORD_LEMMATISED VALUES('audience','n',6500,1480)
INSERT INTO WORD_LEMMATISED VALUES('audit','n',2136,3343)
INSERT INTO WORD_LEMMATISED VALUES('auditor','n',1679,3955)
INSERT INTO WORD_LEMMATISED VALUES('aunt','n',1536,4211)
INSERT INTO WORD_LEMMATISED VALUES('author','n',6852,1413)
INSERT INTO WORD_LEMMATISED VALUES('authorise','v',968,5647)
INSERT INTO WORD_LEMMATISED VALUES('authority','n',31231,303)
INSERT INTO WORD_LEMMATISED VALUES('automatic','a',2245,3242)
INSERT INTO WORD_LEMMATISED VALUES('automatically','adv',2787,2832)
INSERT INTO WORD_LEMMATISED VALUES('autonomous','a',1073,5305)
INSERT INTO WORD_LEMMATISED VALUES('autonomy','n',1788,3783)
INSERT INTO WORD_LEMMATISED VALUES('autumn','n',3917,2250)
INSERT INTO WORD_LEMMATISED VALUES('availability','n',1912,3602)
INSERT INTO WORD_LEMMATISED VALUES('available','a',27184,367)
INSERT INTO WORD_LEMMATISED VALUES('avenue','n',943,5736)
INSERT INTO WORD_LEMMATISED VALUES('average','a',5922,1607)
INSERT INTO WORD_LEMMATISED VALUES('average','n',4104,2168)
INSERT INTO WORD_LEMMATISED VALUES('aviation','n',925,5794)
INSERT INTO WORD_LEMMATISED VALUES('avoid','v',11750,866)
INSERT INTO WORD_LEMMATISED VALUES('await','v',1958,3536)
INSERT INTO WORD_LEMMATISED VALUES('awake','a',1040,5404)
INSERT INTO WORD_LEMMATISED VALUES('awake','v',825,6193)
INSERT INTO WORD_LEMMATISED VALUES('award','n',13274,764)
INSERT INTO WORD_LEMMATISED VALUES('award','v',6625,1458)
INSERT INTO WORD_LEMMATISED VALUES('aware','a',10764,936)
INSERT INTO WORD_LEMMATISED VALUES('awareness','n',3516,2424)
INSERT INTO WORD_LEMMATISED VALUES('away','adv',50294,188)
INSERT INTO WORD_LEMMATISED VALUES('awful','a',2960,2731)
INSERT INTO WORD_LEMMATISED VALUES('awkward','a',1489,4301)
INSERT INTO WORD_LEMMATISED VALUES('axis','n',1019,5469)
INSERT INTO WORD_LEMMATISED VALUES('aye','interjecti',5166,1811)
INSERT INTO WORD_LEMMATISED VALUES('baby','n',11503,883)
INSERT INTO WORD_LEMMATISED VALUES('back','a',2335,3160)
INSERT INTO WORD_LEMMATISED VALUES('back','adv',75494,118)
INSERT INTO WORD_LEMMATISED VALUES('back','n',24095,415)
INSERT INTO WORD_LEMMATISED VALUES('back','v',4391,2048)
INSERT INTO WORD_LEMMATISED VALUES('background','n',6923,1398)
INSERT INTO WORD_LEMMATISED VALUES('backing','n',1887,3636)
INSERT INTO WORD_LEMMATISED VALUES('backwards','adv',1802,3757)
INSERT INTO WORD_LEMMATISED VALUES('bacon','n',1037,5411)
INSERT INTO WORD_LEMMATISED VALUES('bacteria','n',1265,4786)
INSERT INTO WORD_LEMMATISED VALUES('bad','a',25608,393)
INSERT INTO WORD_LEMMATISED VALUES('badly','adv',4329,2072)
INSERT INTO WORD_LEMMATISED VALUES('bag','n',6955,1389)
INSERT INTO WORD_LEMMATISED VALUES('bail','n',811,6268)
INSERT INTO WORD_LEMMATISED VALUES('bake','v',930,5773)
INSERT INTO WORD_LEMMATISED VALUES('balance','n',8601,1179)
INSERT INTO WORD_LEMMATISED VALUES('balance','v',2361,3132)
INSERT INTO WORD_LEMMATISED VALUES('balanced','a',898,5884)
INSERT INTO WORD_LEMMATISED VALUES('balcony','n',1127,5165)
INSERT INTO WORD_LEMMATISED VALUES('ball','n',8636,1170)
INSERT INTO WORD_LEMMATISED VALUES('ballet','n',1340,4614)
INSERT INTO WORD_LEMMATISED VALUES('balloon','n',1030,5436)
INSERT INTO WORD_LEMMATISED VALUES('ballot','n',1055,5362)
INSERT INTO WORD_LEMMATISED VALUES('ban','n',2468,3037)
INSERT INTO WORD_LEMMATISED VALUES('ban','v',2851,2791)
INSERT INTO WORD_LEMMATISED VALUES('banana','n',924,5797)
INSERT INTO WORD_LEMMATISED VALUES('band','n',9003,1117)
INSERT INTO WORD_LEMMATISED VALUES('bang','n',980,5597)
INSERT INTO WORD_LEMMATISED VALUES('bang','v',1197,4976)
INSERT INTO WORD_LEMMATISED VALUES('bank','n',20946,491)
INSERT INTO WORD_LEMMATISED VALUES('banker','n',1348,4602)
INSERT INTO WORD_LEMMATISED VALUES('banking','n',1681,3950)
INSERT INTO WORD_LEMMATISED VALUES('bankruptcy','n',1066,5321)
INSERT INTO WORD_LEMMATISED VALUES('banner','n',857,6051)
INSERT INTO WORD_LEMMATISED VALUES('bar','n',9969,1011)
INSERT INTO WORD_LEMMATISED VALUES('bar','v',1210,4947)
INSERT INTO WORD_LEMMATISED VALUES('bare','a',2291,3211)
INSERT INTO WORD_LEMMATISED VALUES('barely','adv',2293,3206)
INSERT INTO WORD_LEMMATISED VALUES('bargain','n',1229,4886)
INSERT INTO WORD_LEMMATISED VALUES('bargain','v',893,5898)
INSERT INTO WORD_LEMMATISED VALUES('barn','n',1465,4356)
INSERT INTO WORD_LEMMATISED VALUES('barrel','n',1411,4464)
INSERT INTO WORD_LEMMATISED VALUES('barrier','n',3011,2691)
INSERT INTO WORD_LEMMATISED VALUES('base','n',9410,1070)
INSERT INTO WORD_LEMMATISED VALUES('base','v',18742,556)
INSERT INTO WORD_LEMMATISED VALUES('basement','n',852,6077)
INSERT INTO WORD_LEMMATISED VALUES('basic','a',10860,928)
INSERT INTO WORD_LEMMATISED VALUES('basically','adv',3116,2624)
INSERT INTO WORD_LEMMATISED VALUES('basin','n',1314,4661)
INSERT INTO WORD_LEMMATISED VALUES('basis','n',14420,715)
INSERT INTO WORD_LEMMATISED VALUES('basket','n',1658,3983)
INSERT INTO WORD_LEMMATISED VALUES('bass','n',1036,5416)
INSERT INTO WORD_LEMMATISED VALUES('bastard','n',1841,3709)
INSERT INTO WORD_LEMMATISED VALUES('bat','n',1249,4820)
INSERT INTO WORD_LEMMATISED VALUES('batch','n',977,5609)
INSERT INTO WORD_LEMMATISED VALUES('bath','n',3484,2439)
INSERT INTO WORD_LEMMATISED VALUES('bathroom','n',2792,2828)
INSERT INTO WORD_LEMMATISED VALUES('battery','n',2050,3433)
INSERT INTO WORD_LEMMATISED VALUES('battle','n',7063,1372)
INSERT INTO WORD_LEMMATISED VALUES('battle','v',983,5583)
INSERT INTO WORD_LEMMATISED VALUES('bay','n',2097,3387)
INSERT INTO WORD_LEMMATISED VALUES('be','v',4239632,2)
INSERT INTO WORD_LEMMATISED VALUES('beach','n',4125,2154)
INSERT INTO WORD_LEMMATISED VALUES('beam','n',1540,4205)
INSERT INTO WORD_LEMMATISED VALUES('bean','n',1767,3824)
INSERT INTO WORD_LEMMATISED VALUES('bear','n',1786,3788)
INSERT INTO WORD_LEMMATISED VALUES('bear','v',17461,592)
INSERT INTO WORD_LEMMATISED VALUES('beard','n',980,5596)
INSERT INTO WORD_LEMMATISED VALUES('bearing','n',1466,4351)
INSERT INTO WORD_LEMMATISED VALUES('beast','n',1232,4877)
INSERT INTO WORD_LEMMATISED VALUES('beat','n',1425,4430)
INSERT INTO WORD_LEMMATISED VALUES('beat','v',8106,1231)
INSERT INTO WORD_LEMMATISED VALUES('beautiful','a',8670,1162)
INSERT INTO WORD_LEMMATISED VALUES('beautifully','adv',1241,4849)
INSERT INTO WORD_LEMMATISED VALUES('beauty','n',4445,2027)
INSERT INTO WORD_LEMMATISED VALUES('because','conj',103003,96)
INSERT INTO WORD_LEMMATISED VALUES('become','v',67219,130)
INSERT INTO WORD_LEMMATISED VALUES('bed','n',17947,578)
INSERT INTO WORD_LEMMATISED VALUES('bedroom','n',5865,1626)
INSERT INTO WORD_LEMMATISED VALUES('bee','n',1237,4859)
INSERT INTO WORD_LEMMATISED VALUES('beef','n',1516,4243)
INSERT INTO WORD_LEMMATISED VALUES('beer','n',3762,2307)
INSERT INTO WORD_LEMMATISED VALUES('before','adv',6285,1522)
INSERT INTO WORD_LEMMATISED VALUES('before','conj',30731,314)
INSERT INTO WORD_LEMMATISED VALUES('before','prep',51259,185)
INSERT INTO WORD_LEMMATISED VALUES('beg','v',1885,3642)
INSERT INTO WORD_LEMMATISED VALUES('begin','v',43740,214)
INSERT INTO WORD_LEMMATISED VALUES('beginning','n',8018,1240)
INSERT INTO WORD_LEMMATISED VALUES('behalf','n',4012,2206)
INSERT INTO WORD_LEMMATISED VALUES('behave','v',3082,2650)
INSERT INTO WORD_LEMMATISED VALUES('behaviour','n',12853,793)
INSERT INTO WORD_LEMMATISED VALUES('behind','adv',2795,2823)
INSERT INTO WORD_LEMMATISED VALUES('behind','prep',20694,498)
INSERT INTO WORD_LEMMATISED VALUES('being','n',3732,2324)
INSERT INTO WORD_LEMMATISED VALUES('belief','n',7509,1302)
INSERT INTO WORD_LEMMATISED VALUES('believe','v',34603,273)
INSERT INTO WORD_LEMMATISED VALUES('bell','n',2758,2851)
INSERT INTO WORD_LEMMATISED VALUES('belly','n',959,5676)
INSERT INTO WORD_LEMMATISED VALUES('belong','v',5716,1664)
INSERT INTO WORD_LEMMATISED VALUES('below','adv',8587,1182)
INSERT INTO WORD_LEMMATISED VALUES('below','prep',5748,1656)
INSERT INTO WORD_LEMMATISED VALUES('belt','n',2328,3163)
INSERT INTO WORD_LEMMATISED VALUES('bench','n',2320,3173)
INSERT INTO WORD_LEMMATISED VALUES('bend','n',881,5946)
INSERT INTO WORD_LEMMATISED VALUES('bend','v',3453,2454)
INSERT INTO WORD_LEMMATISED VALUES('beneath','prep',4917,1883)
INSERT INTO WORD_LEMMATISED VALUES('beneficial','a',1375,4544)
INSERT INTO WORD_LEMMATISED VALUES('beneficiary','n',876,5973)
INSERT INTO WORD_LEMMATISED VALUES('benefit','n',15251,670)
INSERT INTO WORD_LEMMATISED VALUES('benefit','v',4262,2101)
INSERT INTO WORD_LEMMATISED VALUES('beside','prep',5785,1649)
INSERT INTO WORD_LEMMATISED VALUES('besides','adv',1765,3830)
INSERT INTO WORD_LEMMATISED VALUES('besides','prep',848,6095)
INSERT INTO WORD_LEMMATISED VALUES('best','adv',9790,1027)
INSERT INTO WORD_LEMMATISED VALUES('bet','n',950,5710)
INSERT INTO WORD_LEMMATISED VALUES('bet','v',2292,3209)
INSERT INTO WORD_LEMMATISED VALUES('betray','v',1310,4670)
INSERT INTO WORD_LEMMATISED VALUES('better','adv',15626,652)
INSERT INTO WORD_LEMMATISED VALUES('between','prep',91141,105)
INSERT INTO WORD_LEMMATISED VALUES('beyond','adv',1062,5333)
INSERT INTO WORD_LEMMATISED VALUES('beyond','prep',10705,945)
INSERT INTO WORD_LEMMATISED VALUES('bias','n',1372,4548)
INSERT INTO WORD_LEMMATISED VALUES('bible','n',2075,3408)
INSERT INTO WORD_LEMMATISED VALUES('bicycle','n',1134,5144)
INSERT INTO WORD_LEMMATISED VALUES('bid','n',3316,2521)
INSERT INTO WORD_LEMMATISED VALUES('bid','v',1756,3843)
INSERT INTO WORD_LEMMATISED VALUES('big','a',33300,282)
INSERT INTO WORD_LEMMATISED VALUES('bike','n',2224,3266)
INSERT INTO WORD_LEMMATISED VALUES('bile','n',1228,4892)
INSERT INTO WORD_LEMMATISED VALUES('bill','n',10125,993)
INSERT INTO WORD_LEMMATISED VALUES('bin','n',1040,5403)
INSERT INTO WORD_LEMMATISED VALUES('bind','v',6517,1472)
INSERT INTO WORD_LEMMATISED VALUES('binding','a',1246,4832)
INSERT INTO WORD_LEMMATISED VALUES('biography','n',988,5567)
INSERT INTO WORD_LEMMATISED VALUES('biological','a',1965,3523)
INSERT INTO WORD_LEMMATISED VALUES('biology','n',1029,5440)
INSERT INTO WORD_LEMMATISED VALUES('bird','n',9021,1115)
INSERT INTO WORD_LEMMATISED VALUES('birth','n',5889,1615)
INSERT INTO WORD_LEMMATISED VALUES('birthday','n',3352,2500)
INSERT INTO WORD_LEMMATISED VALUES('biscuit','n',1552,4172)
INSERT INTO WORD_LEMMATISED VALUES('bishop','n',3620,2366)
INSERT INTO WORD_LEMMATISED VALUES('bit','n',30675,315)
INSERT INTO WORD_LEMMATISED VALUES('bitch','n',1006,5510)
INSERT INTO WORD_LEMMATISED VALUES('bite','n',887,5920)
INSERT INTO WORD_LEMMATISED VALUES('bite','v',2885,2765)
INSERT INTO WORD_LEMMATISED VALUES('bitter','a',2384,3103)
INSERT INTO WORD_LEMMATISED VALUES('bitterly','adv',1097,5240)
INSERT INTO WORD_LEMMATISED VALUES('bizarre','a',1054,5369)
INSERT INTO WORD_LEMMATISED VALUES('black','a',20609,502)
INSERT INTO WORD_LEMMATISED VALUES('black','n',2310,3189)
INSERT INTO WORD_LEMMATISED VALUES('blade','n',1442,4400)
INSERT INTO WORD_LEMMATISED VALUES('blame','n',852,6076)
INSERT INTO WORD_LEMMATISED VALUES('blame','v',4248,2108)
INSERT INTO WORD_LEMMATISED VALUES('blank','a',1499,4279)
INSERT INTO WORD_LEMMATISED VALUES('blanket','n',1545,4184)
INSERT INTO WORD_LEMMATISED VALUES('blast','n',975,5616)
INSERT INTO WORD_LEMMATISED VALUES('blast','v',866,6009)
INSERT INTO WORD_LEMMATISED VALUES('bleak','a',916,5825)
INSERT INTO WORD_LEMMATISED VALUES('bleed','v',896,5889)
INSERT INTO WORD_LEMMATISED VALUES('bless','v',1228,4891)
INSERT INTO WORD_LEMMATISED VALUES('blessing','n',938,5754)
INSERT INTO WORD_LEMMATISED VALUES('blind','a',2674,2912)
INSERT INTO WORD_LEMMATISED VALUES('blink','v',896,5888)
INSERT INTO WORD_LEMMATISED VALUES('block','n',5705,1669)
INSERT INTO WORD_LEMMATISED VALUES('block','v',2688,2904)
INSERT INTO WORD_LEMMATISED VALUES('bloke','n',1597,4095)
INSERT INTO WORD_LEMMATISED VALUES('blonde','a',912,5842)
INSERT INTO WORD_LEMMATISED VALUES('blood','n',10176,986)
INSERT INTO WORD_LEMMATISED VALUES('bloody','a',5261,1791)
INSERT INTO WORD_LEMMATISED VALUES('bloody','adv',2016,3470)
INSERT INTO WORD_LEMMATISED VALUES('blow','n',2372,3118)
INSERT INTO WORD_LEMMATISED VALUES('blow','v',5013,1856)
INSERT INTO WORD_LEMMATISED VALUES('blue','a',9089,1109)
INSERT INTO WORD_LEMMATISED VALUES('blue','n',2455,3053)
INSERT INTO WORD_LEMMATISED VALUES('board','n',17878,581)
INSERT INTO WORD_LEMMATISED VALUES('board','v',850,6086)
INSERT INTO WORD_LEMMATISED VALUES('boast','v',1179,5026)
INSERT INTO WORD_LEMMATISED VALUES('boat','n',7373,1317)
INSERT INTO WORD_LEMMATISED VALUES('bodily','a',817,6240)
INSERT INTO WORD_LEMMATISED VALUES('body','n',32231,294)
INSERT INTO WORD_LEMMATISED VALUES('boil','v',1148,5101)
INSERT INTO WORD_LEMMATISED VALUES('boiler','n',878,5959)
INSERT INTO WORD_LEMMATISED VALUES('bold','a',1430,4419)
INSERT INTO WORD_LEMMATISED VALUES('bolt','n',1281,4748)
INSERT INTO WORD_LEMMATISED VALUES('bomb','n',3703,2333)
INSERT INTO WORD_LEMMATISED VALUES('bomb','v',1202,4960)
INSERT INTO WORD_LEMMATISED VALUES('bomber','n',1003,5524)
INSERT INTO WORD_LEMMATISED VALUES('bond','n',3753,2313)
INSERT INTO WORD_LEMMATISED VALUES('bone','n',4665,1955)
INSERT INTO WORD_LEMMATISED VALUES('bonus','n',1364,4569)
INSERT INTO WORD_LEMMATISED VALUES('book','n',37675,252)
INSERT INTO WORD_LEMMATISED VALUES('book','v',1894,3623)
INSERT INTO WORD_LEMMATISED VALUES('booking','n',1391,4510)
INSERT INTO WORD_LEMMATISED VALUES('booklet','n',1210,4946)
INSERT INTO WORD_LEMMATISED VALUES('boom','n',1491,4297)
INSERT INTO WORD_LEMMATISED VALUES('boost','n',978,5603)
INSERT INTO WORD_LEMMATISED VALUES('boost','v',1739,3873)
INSERT INTO WORD_LEMMATISED VALUES('boot','n',3930,2240)
INSERT INTO WORD_LEMMATISED VALUES('border','n',5028,1853)
INSERT INTO WORD_LEMMATISED VALUES('bored','a',1040,5402)
INSERT INTO WORD_LEMMATISED VALUES('boring','a',1531,4217)
INSERT INTO WORD_LEMMATISED VALUES('borough','n',2243,3246)
INSERT INTO WORD_LEMMATISED VALUES('borrow','v',3353,2499)
INSERT INTO WORD_LEMMATISED VALUES('boss','n',3739,2320)
INSERT INTO WORD_LEMMATISED VALUES('both','adv',27644,358)
INSERT INTO WORD_LEMMATISED VALUES('both','det',41162,227)
INSERT INTO WORD_LEMMATISED VALUES('bother','v',4048,2188)
INSERT INTO WORD_LEMMATISED VALUES('bottle','n',5872,1624)
INSERT INTO WORD_LEMMATISED VALUES('bottom','a',2301,3198)
INSERT INTO WORD_LEMMATISED VALUES('bottom','n',5441,1742)
INSERT INTO WORD_LEMMATISED VALUES('bounce','v',977,5608)
INSERT INTO WORD_LEMMATISED VALUES('boundary','n',4416,2036)
INSERT INTO WORD_LEMMATISED VALUES('bourgeois','a',929,5782)
INSERT INTO WORD_LEMMATISED VALUES('bow','n',1357,4585)
INSERT INTO WORD_LEMMATISED VALUES('bow','v',1359,4578)
INSERT INTO WORD_LEMMATISED VALUES('bowel','n',1441,4404)
INSERT INTO WORD_LEMMATISED VALUES('bowl','n',2631,2935)
INSERT INTO WORD_LEMMATISED VALUES('bowl','v',1020,5466)
INSERT INTO WORD_LEMMATISED VALUES('bowler','n',997,5541)
INSERT INTO WORD_LEMMATISED VALUES('box','n',11292,900)
INSERT INTO WORD_LEMMATISED VALUES('boxing','n',902,5872)
INSERT INTO WORD_LEMMATISED VALUES('boy','n',21205,486)
INSERT INTO WORD_LEMMATISED VALUES('boyfriend','n',1285,4735)
INSERT INTO WORD_LEMMATISED VALUES('bracket','n',1017,5474)
INSERT INTO WORD_LEMMATISED VALUES('brain','n',5586,1698)
INSERT INTO WORD_LEMMATISED VALUES('brake','n',974,5619)
INSERT INTO WORD_LEMMATISED VALUES('branch','n',8456,1196)
INSERT INTO WORD_LEMMATISED VALUES('brand','n',1819,3733)
INSERT INTO WORD_LEMMATISED VALUES('brandy','n',959,5675)
INSERT INTO WORD_LEMMATISED VALUES('brass','n',1433,4416)
INSERT INTO WORD_LEMMATISED VALUES('brave','a',1760,3838)
INSERT INTO WORD_LEMMATISED VALUES('breach','n',3407,2474)
INSERT INTO WORD_LEMMATISED VALUES('bread','n',3780,2294)
INSERT INTO WORD_LEMMATISED VALUES('break','n',4271,2099)
INSERT INTO WORD_LEMMATISED VALUES('break','v',19512,532)
INSERT INTO WORD_LEMMATISED VALUES('breakdown','n',1591,4104)
INSERT INTO WORD_LEMMATISED VALUES('breakfast','n',4314,2080)
INSERT INTO WORD_LEMMATISED VALUES('breast','n',2648,2926)
INSERT INTO WORD_LEMMATISED VALUES('breath','n',5347,1768)
INSERT INTO WORD_LEMMATISED VALUES('breathe','v',3372,2492)
INSERT INTO WORD_LEMMATISED VALUES('breed','n',1745,3859)
INSERT INTO WORD_LEMMATISED VALUES('breed','v',1974,3513)
INSERT INTO WORD_LEMMATISED VALUES('breeding','n',1403,4488)
INSERT INTO WORD_LEMMATISED VALUES('breeze','n',1455,4376)
INSERT INTO WORD_LEMMATISED VALUES('brewery','n',1012,5495)
INSERT INTO WORD_LEMMATISED VALUES('brick','n',2675,2911)
INSERT INTO WORD_LEMMATISED VALUES('bride','n',1111,5201)
INSERT INTO WORD_LEMMATISED VALUES('bridge','n',5367,1761)
INSERT INTO WORD_LEMMATISED VALUES('brief','a',4977,1861)
INSERT INTO WORD_LEMMATISED VALUES('briefly','adv',3280,2531)
INSERT INTO WORD_LEMMATISED VALUES('brigade','n',1245,4839)
INSERT INTO WORD_LEMMATISED VALUES('bright','a',6190,1552)
INSERT INTO WORD_LEMMATISED VALUES('brilliant','a',3498,2432)
INSERT INTO WORD_LEMMATISED VALUES('bring','v',43894,211)
INSERT INTO WORD_LEMMATISED VALUES('broad','a',6447,1488)
INSERT INTO WORD_LEMMATISED VALUES('broadcast','n',946,5726)
INSERT INTO WORD_LEMMATISED VALUES('broadcast','v',1116,5185)
INSERT INTO WORD_LEMMATISED VALUES('broadly','adv',1602,4091)
INSERT INTO WORD_LEMMATISED VALUES('brochure','n',1176,5037)
INSERT INTO WORD_LEMMATISED VALUES('broken','a',2479,3027)
INSERT INTO WORD_LEMMATISED VALUES('broker','n',1100,5232)
INSERT INTO WORD_LEMMATISED VALUES('bronze','n',1209,4951)
INSERT INTO WORD_LEMMATISED VALUES('brother','n',11757,864)
INSERT INTO WORD_LEMMATISED VALUES('brow','n',1194,4986)
INSERT INTO WORD_LEMMATISED VALUES('brown','a',4300,2088)
INSERT INTO WORD_LEMMATISED VALUES('brush','n',1686,3941)
INSERT INTO WORD_LEMMATISED VALUES('brush','v',2115,3369)
INSERT INTO WORD_LEMMATISED VALUES('bubble','n',843,6120)
INSERT INTO WORD_LEMMATISED VALUES('bucket','n',1401,4490)
INSERT INTO WORD_LEMMATISED VALUES('budget','n',9311,1078)
INSERT INTO WORD_LEMMATISED VALUES('build','v',23931,418)
INSERT INTO WORD_LEMMATISED VALUES('builder','n',1795,3768)
INSERT INTO WORD_LEMMATISED VALUES('building','n',20770,496)
INSERT INTO WORD_LEMMATISED VALUES('bulb','n',1030,5435)
INSERT INTO WORD_LEMMATISED VALUES('bulk','n',2056,3424)
INSERT INTO WORD_LEMMATISED VALUES('bull','n',1257,4807)
INSERT INTO WORD_LEMMATISED VALUES('bullet','n',1227,4894)
INSERT INTO WORD_LEMMATISED VALUES('bulletin','n',861,6036)
INSERT INTO WORD_LEMMATISED VALUES('bump','v',817,6239)
INSERT INTO WORD_LEMMATISED VALUES('bunch','n',1344,4610)
INSERT INTO WORD_LEMMATISED VALUES('bundle','n',881,5945)
INSERT INTO WORD_LEMMATISED VALUES('burden','n',2988,2710)
INSERT INTO WORD_LEMMATISED VALUES('bureau','n',1636,4028)
INSERT INTO WORD_LEMMATISED VALUES('bureaucracy','n',1509,4256)
INSERT INTO WORD_LEMMATISED VALUES('bureaucratic','a',927,5789)
INSERT INTO WORD_LEMMATISED VALUES('burial','n',1052,5373)
INSERT INTO WORD_LEMMATISED VALUES('burn','n',904,5868)
INSERT INTO WORD_LEMMATISED VALUES('burn','v',5091,1829)
INSERT INTO WORD_LEMMATISED VALUES('burning','a',1252,4813)
INSERT INTO WORD_LEMMATISED VALUES('burst','n',936,5761)
INSERT INTO WORD_LEMMATISED VALUES('burst','v',2476,3030)
INSERT INTO WORD_LEMMATISED VALUES('bury','v',2987,2713)
INSERT INTO WORD_LEMMATISED VALUES('bus','n',6761,1428)
INSERT INTO WORD_LEMMATISED VALUES('bush','n',1933,3567)
INSERT INTO WORD_LEMMATISED VALUES('business','n',38204,244)
INSERT INTO WORD_LEMMATISED VALUES('businessman','n',1895,3621)
INSERT INTO WORD_LEMMATISED VALUES('busy','a',5221,1801)
INSERT INTO WORD_LEMMATISED VALUES('but','conj',459622,23)
INSERT INTO WORD_LEMMATISED VALUES('butter','n',2044,3439)
INSERT INTO WORD_LEMMATISED VALUES('butterfly','n',1136,5132)
INSERT INTO WORD_LEMMATISED VALUES('button','n',2503,3012)
INSERT INTO WORD_LEMMATISED VALUES('buy','v',25582,394)
INSERT INTO WORD_LEMMATISED VALUES('buyer','n',4285,2092)
INSERT INTO WORD_LEMMATISED VALUES('by','adv',2898,2760)
INSERT INTO WORD_LEMMATISED VALUES('by','prep',517171,20)
INSERT INTO WORD_LEMMATISED VALUES('bye','interjecti',1626,4042)

The following is the spring application configuration file. If you are using mySQL to connect then just comment out the HSQLDB and comment in the mysql Configuration entry.

src/main/resources/applicationContext.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:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
 
http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
 
http://www.springframework.org/schema/context
 
http://www.springframework.org/schema/context/spring-context-2.5.xsd">


	<!-- Use the following for the HSQLDB in memory Java database (default) -->
	<bean name="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
	    <property name="driverClassName" value="org.hsqldb.jdbcDriver"/>
	    <property name="url" value="jdbc:hsqldb:file:src/main/resources/db/liveSearch"/>
	    <property name="username" value="sa"/>
	    <property name="password" value=""/>
	</bean>
 
    <!-- uncomment this to use mySQL and comment out the HSQLDB above
	<bean name="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
	    <property name="driverClassName" value="com.mysql.jdbc.Driver"/>
	    <property name="url" value="jdbc:mysql://xxxx:3306/xxxx"/>
	    <property name="username" value="xxxx"/>
	    <property name="password" value="xxx"/>
	</bean>
 	-->
	 
	<bean name="jdbcTemplate" class="org.springframework.jdbc.core.simple.SimpleJdbcTemplate">
	    <constructor-arg><ref bean="dataSource"/></constructor-arg>
	</bean>
</beans>

Homepage

The following page presents the user with an extjs combo box that makes ajax calls to the servlet to get search results.

src/main/webapp/index.jsp

<html>
<head>
    <title>ComboBox - Live Search</title>
    <link rel="stylesheet" type="text/css"
        href="http://dev.sencha.com/deploy/ext-3.3.1/resources/css/ext-all.css"/>
 
    <script type="text/javascript"
        src="http://dev.sencha.com/deploy/ext-3.3.1/adapter/ext/ext-base-debug.js">
    </script>
    <script type="text/javascript"
        src="http://dev.sencha.com/deploy/ext-3.3.1/ext-all-debug.js">
    </script>

	<script type="text/javascript">
		Ext.onReady(function(){
		 
			// This reader helps process search result data being 
			// returned after the search.
			var myReader = new Ext.data.JsonReader({
				root: 'records',
				totalProperty: 'totalCount',
				fields: [
				        {name: 'word_x', type: 'string'}
				    ]
			});
		 
			// This represents the URL that returns the search results.
			var myStore = new Ext.data.Store({
				// url : 'response.do' // url: uses POST by default
				proxy: new Ext.data.HttpProxy({  // force it to use GET method
					url:    '/app/searchServlet',
					method: 'GET'
				}),
			    reader : myReader
			});
			// Custom rendering Template
			var resultTpl = new Ext.XTemplate(
				'<tpl for="."><div class="search-item">',
				    '<h3>{word_x}</h3>',
				'</div></tpl>'
			);

			var search = new Ext.form.ComboBox({			
				store: myStore,
				displayField:'title',
				typeAhead: false,
				loadingText: 'Searching...',
				width: 570,
				minChars: 2,
				pageSize:5,
				hideTrigger:true,
				tpl: resultTpl,
				applyTo: 'search',
				itemSelector: 'div.search-item',
				onSelect: function(record){ 
					alert(record.data.word_x + ' was selected...');
					// override default onSelect to do redirect
//				    window.location =
//				        String.format('http://extjs.com/forum/showthread.php?t={0}&p={1}', 
//				        	record.data.topicId, record.id);
				}
			});
		});	
	</script>

    <style type="text/css">
        p { width:650px; }
		.search-item {
			font:normal 11px tahoma, arial, helvetica, sans-serif;
			padding:3px 10px 3px 10px;
			border:1px solid #fff;
			border-bottom:1px solid #eeeeee;
			white-space:normal;
			color:#555;
		}
		.search-item h3 {
			display:block;
			font:inherit;
			font-weight:bold;
			color:#222;
		}

		.search-item h3 span {
			float: right;
			font-weight:normal;
			margin:0 0 5px 5px;
			width:100px;
			display:block;
			clear:none;
		}
    </style>     
</head>
 
<body>
<p>
    <b>Combo with Templates and Ajax</b><br />
	
	Type any word that begins with the letters "a" or "b". for example "ab", "be" ...
	
</p>

<!-- The box wrap markup embedded instead of using Element.boxWrap() -->
<div style="width:600px;">
    <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
    <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
        <h3 style="margin-bottom:5px;">Search the Ext Forums</h3>
        <input type="text" size="40" name="search" id="search" />
        <div style="padding-top:4px;">
            Live search requires a minimum of 2 characters.
        </div>
 
    </div></div></div>
    <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>

</body>
</html>

Test the application

To test the application we will start the jetty servlet engine.

mvn clean compile jetty:run

Navigate to the page and start typing. Search results should start to show.

http://localhost:8080/

Advertisements
27
Mar
11

ExtJS form validation using commons-validator

This page describes the process of using commons-validator to validate extJS form submissions.

Background

Commons validation is a mature project that’s been out there for a while now. It became popular when it was introduced as part of the Struts framework. Commons validation allows developers to specify validation rules inside XML files, thus allowing them to be applied uniformly across the site. In addition the same set of rules can be used to generate both client side and server side validation thus reducing maintenance cost.

In the interest of brevity, this page will only cover the server side validation.

Using commons-validator by itself doesn’t give you much benefit. All you get is the ability to specify rules and validation logic that returns whether the validation passed or failed.

You are left on your own to:

  1. Write your own code to iterate thru the form fields and collect the failure messages
  2. Write a servlet to handle requests over HTTP and present the failure messages back to the client
  3. Internationalization Support

Although its not that much work, when you start implementing it you quickly realize that this boiler plate code is something that a framework should provide.

This boiler plate code has been written years ago by the makers of the Struts framework. By extending the framework slightly, we can use it to validate forms submitted by extJS components.

Struts comes pre-packaged with the “html:errors” tag. Upon validation failures struts returns the user back to the “input” page and the input page contains a “html:errors” tag that displays the failed validation along with a description of the failure in HTML format.

The Approach

The approach presented here focues on extending the “html:errors” tag to return JSON instead of html. The JSON is parsed by the extJS formPanel and the errors are presented to the user.

On success the extJS formPanel expects:

{success: true, msg : 'Thank you for your submission.'}

On failure the extJS formPanel expects:

{
   success : false,
   msg     : 'This is an example error message',
   errors  : {
      firstName : 'Sample Error for First Name',
      lastName  : 'Sample Error for Last Name'
   }
}

Note:
Some of the code on this page are not core to the understanding “approach”, for this reason the code will initially be collapsed.

Requirements

Since this page is about integrating 3 different technologies together a basic understanding of struts, commons-validation, and extJS is assumed. If any of these technologies are not clear then please visit some of my other tutorial pages.

  1. Maven 2
  2. Basic Understanding of extJS, Struts 1 and commons-validator

Outline

This tutorial is quite lengthy.

Here is an outline:

  1. Create and configure a new project
  2. Extend the html:errors tag
  3. Configure the Struts Framework
  4. Create the struts action class and JSP
  5. Configure the page validation

Create and configure a new project

I would recommend starting from a new project.

Create a new project using Maven 2.

mvn archetype:generate -DarchetypeArtifactId=maven-archetype-webapp

groupId: com.test
artifactId: form-validation

Answer the rest of the questions with defaults “Just hit the enter key”,

cd to the project base folder.

cd form-validation

Since this is a web project maven2 does not create the java source folder.

Create missing folder
mkdir -p src/main/java/com/test

Modify the project Configuration

Replace the pom.xml with the following.

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.test</groupId>
	<artifactId>form-validation</artifactId>
	<packaging>war</packaging>
	<version>1.0-SNAPSHOT</version>
	<name>form-validation Maven Webapp</name>
	<url>http://maven.apache.org</url>
	<dependencies>
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>3.8.1</version>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>commons-validator</groupId>
			<artifactId>commons-validator</artifactId>
			<version>1.1.3</version>
		</dependency>
		<dependency>
			<groupId>struts</groupId>
			<artifactId>struts</artifactId>
			<version>1.1</version>
		</dependency>
		<dependency>
			<groupId>org.apache.geronimo.specs</groupId>
			<artifactId>geronimo-servlet_2.5_spec</artifactId>
			<version>1.2</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>commons-logging</groupId>
			<artifactId>commons-logging</artifactId>
			<version>1.1</version>
		</dependency>
		<dependency>
			<groupId>commons-beanutils</groupId>
			<artifactId>commons-beanutils</artifactId>
			<version>1.7.0</version>
		</dependency>
		<dependency>
			<groupId>commons-digester</groupId>
			<artifactId>commons-digester</artifactId>
			<version>1.8</version>
		</dependency>
		<dependency>
			<groupId>commons-collections</groupId>
			<artifactId>commons-collections</artifactId>
			<version>3.1</version>
		</dependency>
		<dependency>
			<groupId>org.json</groupId>
			<artifactId>json</artifactId>
			<version>20090211</version>
		</dependency>
	</dependencies>
	<build>
		<finalName>form-validation</finalName>
		<plugins>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>2.0.2</version>
				<configuration>
					<source>1.5</source>
					<target>1.5</target>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.mortbay.jetty</groupId>
				<artifactId>jetty-maven-plugin</artifactId>
				<version>7.0.0.v20091005</version>
				<configuration>
					<scanIntervalSeconds>2</scanIntervalSeconds>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

Extend the html:errors tag

Extend the html:errors tag to return errors in JSON format.

src/main/java/com/test/ExtJsonErrorsTag.java

package com.test;

import java.util.Iterator;

import javax.servlet.jsp.JspException;

import org.apache.struts.action.ActionError;
import org.apache.struts.action.ActionErrors;
import org.apache.struts.taglib.html.ErrorsTag;
import org.apache.struts.util.RequestUtils;
import org.apache.struts.util.ResponseUtils;
import org.json.JSONException;
import org.json.JSONObject;

public class ExtJsonErrorsTag extends ErrorsTag {

	private static final long serialVersionUID = 1L;

	public int doStartTag() throws JspException {
		ActionErrors errors = null;
		JSONObject jsonReturn = new JSONObject();
		try {
			errors = RequestUtils.getActionErrors(this.pageContext, this.name);
		} catch (JspException e) {
			RequestUtils.saveException(this.pageContext, e);
			throw e;
		}
		if ((errors == null) || (errors.isEmpty())) {
			
			try {
				jsonReturn.put("success", true);
				jsonReturn.put("msg", "Thank you for your submission.");
			} catch (JSONException e) {
				throw new JspException(e);
			}

			ResponseUtils.write(this.pageContext, jsonReturn.toString());
			return 1;
		}

		Iterator errorIterator = errors.properties();
		JSONObject jsonErrors = new JSONObject();

		while (errorIterator.hasNext()) {
			String property = (String) errorIterator.next();
			processErrors(errors, property, jsonErrors);
		}

		try {
			jsonReturn.put("success", false);
			jsonReturn.put("msg", "There was a validation failure.");
			jsonReturn.put("errors", jsonErrors);
			ResponseUtils.write(this.pageContext, jsonReturn.toString());
		} catch (JSONException e) {
			throw new JspException(e);
		}

		return 1;
	}

	private void processErrors(ActionErrors errors, String property,
			JSONObject jsonErrors) throws JspException {
		String message;
		Iterator reports = (property == null) ? errors.get() : errors
				.get(property);
		while (reports.hasNext()) {
			ActionError report = (ActionError) reports.next();

			message = RequestUtils.message(this.pageContext, this.bundle,
					this.locale, report.getKey(), report.getValues());

			if (message != null) {
				try {
					jsonErrors.put(property, message);
				} catch (JSONException e) {
					throw new JspException(e);
				}
			}
		}

	}
}

This is the tag descriptor for the above tag. Nothing interesting here. Just copy and paste this into struts-ext-html.tld.

src/main/webapp/WEB-INF/struts-ext-html.tld

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN" "http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd">
<taglib>
	<tlibversion>1.2</tlibversion>
	<jspversion>1.1</jspversion>
	<shortname>html-ext</shortname>
	<uri>http://struts.apache.org/tags-html-ext</uri>
	<tag>
		<name>errors</name>
		<tagclass>com.test.ExtJsonErrorsTag</tagclass>
		<bodycontent>empty</bodycontent>
		<attribute>
			<name>bundle</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>footer</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>header</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>locale</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>name</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>prefix</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>property</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>suffix</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
	</tag>
</taglib>

Action Class and JSP

This is where you provide logic that will run after the form is validated. Control will only be passed to the execute method when the form is fully validated.

src/main/java/com/test/UserSubmitAction.java

package com.test;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
 
public class UserSubmitAction extends org.apache.struts.action.Action {
    public ActionForward execute(ActionMapping mapping,ActionForm form,
           HttpServletRequest request,HttpServletResponse response) throws Exception {
 
    	System.out.println("action ran.");

    	return mapping.findForward("success");
    }
}

The following JSP presents an extJS form to allow the user to enter data.

src/main/webapp/index.jsp

<html>
<head>
 
<link rel="stylesheet" type="text/css"
    href="http://dev.sencha.com/deploy/ext-3.3.1/resources/css/ext-all.css"/>
 
<script type="text/javascript"
    src="http://dev.sencha.com/deploy/ext-3.3.1/adapter/ext/ext-base-debug.js">
</script>
<script type="text/javascript"
    src="http://dev.sencha.com/deploy/ext-3.3.1/ext-all-debug.js">
</script>
 
<script type="text/javascript"> 
function buildWindow() {
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';
    var bd = Ext.getBody();

    var fs = new Ext.FormPanel({
        labelWidth: 75, 
        frame: true,
        title:'Form with crazy amount of validation',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        waitMsgTarget: true,
        defaultType: 'textfield',       
 
        items: [{
                fieldLabel: 'First Name',
                name: 'firstName'
            },{
                fieldLabel: 'Last Name',
                name: 'lastName'
            },{
                fieldLabel: 'Company',
                name: 'company'
            }, {
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email'
            },{
                fieldLabel: 'Time',
                name: 'time'
            } 
        ],       
 
    });
 
    var onSuccessOrFail = function(form, action) {
        var result = action.result;
 
        if(result.success) {
            Ext.MessageBox.alert('Success', 'Success!');
        } else { // put code here to handle form validation failure.
        }
 
    }
 
    var submit = fs.addButton({
        text: 'Submit',
        disabled:false,
        handler: function(){
            fs.getForm().submit({
                url:'/form/UserSubmit',
                waitMsg:'Submitting Data...',
                submitEmptyText: false,
                success : onSuccessOrFail,
                failure : onSuccessOrFail
            });
        }
    });
 
    fs.render('form-first');
}
Ext.onReady(buildWindow);
</script>
</head>
<body>
<div id="form-first"></div>
</body>
</html>

Success and Failure JSP’s

This JSP displays regardless if there was a validation failure or not. This is to satisfy the extJS component requirement that all form submissions should return a result.

src/main/webapp/WEB-INF/result.jsp

<%@ taglib uri="/tags/struts-html-ext" prefix="html-ext" %>
<html-ext:errors/> 

Validation configuration

All the fields of the form are required. In addition the first name must be at least 10 and no more than 15 characters. The email address must be valid formatted and the time field must be in the proper format in order to proceed. All of this is coded into the following file.

src/main/webapp/WEB-INF/validation.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE form-validation PUBLIC
          "-//Apache Software Foundation//DTD Commons Validator Rules Configuration 1.1.3//EN"
          "http://jakarta.apache.org/commons/dtds/validator_1_1_3.dtd">
 
<form-validation>
<formset>
<form name="userInformation">
    <field property="firstName" depends="required,minlength,maxlength">
        <arg0 key="userInformation.firstName" />
        <arg1 name="minlength" key="${var:minlength}" resource="false"/>
        <arg1 name="maxlength" key="${var:maxlength}" resource="false"/>
        <var>
        	<var-name>minlength</var-name>
        	<var-value>10</var-value>
        </var>
        <var>
        	<var-name>maxlength</var-name>
        	<var-value>15</var-value>
        </var>
        
    </field>
    <field property="lastName" depends="required">
        <arg key="userInformation.lastName" />
    </field>
    <field property="company" depends="required">
        <arg key="userInformation.company" />
    </field>
    <field property="email" depends="required,email">
        <arg key="userInformation.email" />
    </field>
    <field property="time" depends="required,mask">
        <msg name="mask" key="userInformation.time.maskmsg"/>
        <arg0 key="userInformation.time" />
        <var><var-name>mask</var-name><var-value>^[0-9]{1,2}:[0-9]{1,2} (AM|PM)$</var-value></var>
    </field>
</form>
</formset>
</form-validation>

Configure the Struts Framework

The following files are necessary to get the struts framework initialized and ready to process form submissions. The lines specific to this application have been highlighted.

Struts Config

The following struts configuration file contains a dyna-form and an action mapping. The /UserSubmit action mapping “input” page will be invoked if there are validation failures. If all goes well with validation the control will forward to “result.jsp” which will display JSON output expected by the extJS component.

src/main/webapp/WEB-INF/struts-config.xml

<?xml version="1.0" encoding="ISO-8859-1" ?>
    <!DOCTYPE struts-config PUBLIC
          "-//Apache Software Foundation//DTD Struts Configuration 1.3//EN"
          "http://struts.apache.org/dtds/struts-config_1_3.dtd">

<struts-config>
	<form-beans>
		<form-bean name="userInformation"
			type="org.apache.struts.validator.DynaValidatorForm">
			<form-property name="firstName" type="java.lang.String" />
			<form-property name="lastName" type="java.lang.String" />
			<form-property name="company" type="java.lang.String" />
			<form-property name="email" type="java.lang.String" />
			<form-property name="time" type="java.lang.String" />
		</form-bean>
	</form-beans>

	<action-mappings>
		<action name="userInformation" path="/UserSubmit" input="/WEB-INF/result.jsp"
			type="com.test.UserSubmitAction" validate="true">
			<forward name="success" path="/WEB-INF/result.jsp"></forward>
		</action>
	</action-mappings>

	<!-- The "application.properties" is located in the root of the classpath. -->
	<message-resources parameter="application" />

	<plug-in className="org.apache.struts.validator.ValidatorPlugIn">
		<set-property property="pathnames"
			value="/WEB-INF/validator-rules.xml,/WEB-INF/validation.xml," />
	</plug-in>

</struts-config>

The following file was taken from the commons-validator framework. It contains information about the various classes that perform validation. Just copy and paste this into validator-rules.xml. The client side JavaScript validation code has been removed since we will only be performing server side validation. I am thinking about writing another tutorial on how to have commons validator generate extJS specific client side JavaScript validation. Let me know if you guys are interested in seeing this.

src/main/webapp/WEB-INF/validator-rules.xml

<!DOCTYPE form-validation PUBLIC
          "-//Apache Software Foundation//DTD Commons Validator Rules Configuration 1.0//EN"
          "http://jakarta.apache.org/commons/dtds/validator_1_0.dtd">

<form-validation>
   <global>
      <validator name="required"
            classname="org.apache.struts.validator.FieldChecks"
               method="validateRequired"
         methodParams="java.lang.Object,
                       org.apache.commons.validator.ValidatorAction,
                       org.apache.commons.validator.Field,
                       org.apache.struts.action.ActionErrors,
                       javax.servlet.http.HttpServletRequest"
                  msg="errors.required">
      </validator>

      <validator name="requiredif"
                 classname="org.apache.struts.validator.FieldChecks"
                 method="validateRequiredIf"
                 methodParams="java.lang.Object,
                               org.apache.commons.validator.ValidatorAction,
                               org.apache.commons.validator.Field,
                               org.apache.struts.action.ActionErrors,
                               org.apache.commons.validator.Validator,
                               javax.servlet.http.HttpServletRequest"
                 msg="errors.required">
      </validator>

      <validator name="minlength"
            classname="org.apache.struts.validator.FieldChecks"
               method="validateMinLength"
         methodParams="java.lang.Object,
                       org.apache.commons.validator.ValidatorAction,
                       org.apache.commons.validator.Field,
                       org.apache.struts.action.ActionErrors,
                       javax.servlet.http.HttpServletRequest"
              depends=""
                  msg="errors.minlength">
      </validator>


      <validator name="maxlength"
            classname="org.apache.struts.validator.FieldChecks"
               method="validateMaxLength"
         methodParams="java.lang.Object,
                       org.apache.commons.validator.ValidatorAction,
                       org.apache.commons.validator.Field,
                       org.apache.struts.action.ActionErrors,
                       javax.servlet.http.HttpServletRequest"
              depends=""
                  msg="errors.maxlength">

      </validator>


      <validator name="mask"
            classname="org.apache.struts.validator.FieldChecks"
               method="validateMask"
         methodParams="java.lang.Object,
                       org.apache.commons.validator.ValidatorAction,
                       org.apache.commons.validator.Field,
                       org.apache.struts.action.ActionErrors,
                       javax.servlet.http.HttpServletRequest"
              depends=""
                  msg="errors.invalid">

      </validator>


      <validator name="byte"
            classname="org.apache.struts.validator.FieldChecks"
               method="validateByte"
         methodParams="java.lang.Object,
                       org.apache.commons.validator.ValidatorAction,
                       org.apache.commons.validator.Field,
                       org.apache.struts.action.ActionErrors,
                       javax.servlet.http.HttpServletRequest"
              depends=""
                  msg="errors.byte"
       jsFunctionName="ByteValidations">
      </validator>

      <validator name="short"
            classname="org.apache.struts.validator.FieldChecks"
               method="validateShort"
         methodParams="java.lang.Object,
                       org.apache.commons.validator.ValidatorAction,
                       org.apache.commons.validator.Field,
                       org.apache.struts.action.ActionErrors,
                       javax.servlet.http.HttpServletRequest"
              depends=""
                  msg="errors.short"
       jsFunctionName="ShortValidations">
      </validator>

      <validator name="integer"
            classname="org.apache.struts.validator.FieldChecks"
               method="validateInteger"
         methodParams="java.lang.Object,
                       org.apache.commons.validator.ValidatorAction,
                       org.apache.commons.validator.Field,
                       org.apache.struts.action.ActionErrors,
                       javax.servlet.http.HttpServletRequest"
              depends=""
                  msg="errors.integer"
       jsFunctionName="IntegerValidations">
      </validator>

      <validator name="long"
            classname="org.apache.struts.validator.FieldChecks"
               method="validateLong"
         methodParams="java.lang.Object,
                       org.apache.commons.validator.ValidatorAction,
                       org.apache.commons.validator.Field,
                       org.apache.struts.action.ActionErrors,
                       javax.servlet.http.HttpServletRequest"
              depends=""
                  msg="errors.long"/>
      <validator name="float"
            classname="org.apache.struts.validator.FieldChecks"
               method="validateFloat"
         methodParams="java.lang.Object,
                       org.apache.commons.validator.ValidatorAction,
                       org.apache.commons.validator.Field,
                       org.apache.struts.action.ActionErrors,
                       javax.servlet.http.HttpServletRequest"
              depends=""
                  msg="errors.float"
       jsFunctionName="FloatValidations">
      </validator>

      <validator name="double"
            classname="org.apache.struts.validator.FieldChecks"
               method="validateDouble"
         methodParams="java.lang.Object,
                       org.apache.commons.validator.ValidatorAction,
                       org.apache.commons.validator.Field,
                       org.apache.struts.action.ActionErrors,
                       javax.servlet.http.HttpServletRequest"
              depends=""
                  msg="errors.double"/>

      <validator name="date"
            classname="org.apache.struts.validator.FieldChecks"
               method="validateDate"
         methodParams="java.lang.Object,
                       org.apache.commons.validator.ValidatorAction,
                       org.apache.commons.validator.Field,
                       org.apache.struts.action.ActionErrors,
                       javax.servlet.http.HttpServletRequest"
              depends=""
                  msg="errors.date"
       jsFunctionName="DateValidations">


      </validator>

<!-- range is deprecated use intRange instead -->
      <validator name="range"
            classname="org.apache.struts.validator.FieldChecks"
               method="validateIntRange"
         methodParams="java.lang.Object,
                       org.apache.commons.validator.ValidatorAction,
                       org.apache.commons.validator.Field,
                       org.apache.struts.action.ActionErrors,
                       javax.servlet.http.HttpServletRequest"
              depends="integer"
                  msg="errors.range">
      </validator>

      <validator name="intRange"
            classname="org.apache.struts.validator.FieldChecks"
               method="validateIntRange"
         methodParams="java.lang.Object,
                       org.apache.commons.validator.ValidatorAction,
                       org.apache.commons.validator.Field,
                       org.apache.struts.action.ActionErrors,
                       javax.servlet.http.HttpServletRequest"
              depends="integer"
                  msg="errors.range">

      </validator>

      <validator name="floatRange"
            classname="org.apache.struts.validator.FieldChecks"
               method="validateFloatRange"
         methodParams="java.lang.Object,
                       org.apache.commons.validator.ValidatorAction,
                       org.apache.commons.validator.Field,
                       org.apache.struts.action.ActionErrors,
                       javax.servlet.http.HttpServletRequest"
              depends="float"
                  msg="errors.range">
      </validator>

      <validator name="creditCard"
            classname="org.apache.struts.validator.FieldChecks"
               method="validateCreditCard"
         methodParams="java.lang.Object,
                       org.apache.commons.validator.ValidatorAction,
                       org.apache.commons.validator.Field,
                       org.apache.struts.action.ActionErrors,
                       javax.servlet.http.HttpServletRequest"
              depends=""
                  msg="errors.creditcard">

      </validator>

     <validator name="email"
            classname="org.apache.struts.validator.FieldChecks"
              method="validateEmail"
         methodParams="java.lang.Object,
                       org.apache.commons.validator.ValidatorAction,
                      org.apache.commons.validator.Field,
                      org.apache.struts.action.ActionErrors,
                       javax.servlet.http.HttpServletRequest"
              depends=""
                  msg="errors.email">
      </validator>
   </global>
</form-validation>

The following file contains the messages to display to the user.

src/main/resources/application.properties

errors.required={0} is required.
errors.minlength={0} can not be less than {1} characters.
errors.maxlength={0} can not be greater than {1} characters.
errors.invalid={0} is invalid.
 
errors.byte={0} must be a byte.
errors.short={0} must be a short.
errors.integer={0} must be an integer.
errors.long={0} must be a long.
errors.float={0} must be a float.
errors.double={0} must be a double.
 
errors.date={0} is not a date.
errors.range={0} is not in the range {1} through {2}.
errors.creditcard={0} is an invalid credit card number.
errors.email={0} is an invalid e-mail address.

userInformation.firstName=First Name
userInformation.lastName=Last Name
userInformation.company=company
userInformation.email=email
userInformation.time=time
userInformation.time.maskmsg=Time must be formatted like (##:## AM|PM)

This is a bare minimum log4j.properties file.

src/main/resources/log4j.properties

# Set root logger level to DEBUG and its only appender to A1.
log4j.rootLogger=INFO, A1
 
log4j.appender.A1=org.apache.log4j.ConsoleAppender
log4j.appender.A1.layout=org.apache.log4j.PatternLayout
log4j.appender.A1.layout.ConversionPattern=%d %-5p %c - %m%n

src/main/webapp/WEB-INF/web.xml

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>Archetype Created Web Application</display-name>

    <servlet>
        <servlet-name>action</servlet-name>
        <servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
        <init-param>
            <param-name>config</param-name>
            <param-value>
         /WEB-INF/struts-config.xml
        </param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
 
    </servlet>
 
    <servlet-mapping>
        <servlet-name>action</servlet-name>
        <url-pattern>/form/*</url-pattern>
    </servlet-mapping>

  <!-- Struts Tag Library Descriptors -->
 
  <taglib>
    <taglib-uri>/tags/struts-html-ext</taglib-uri>
    <taglib-location>/WEB-INF/struts-ext-html.tld</taglib-location>
  </taglib>
  
</web-app>

Test the application

In the project top folder type in the following command to compile and run the code in jetty servlet engine.

mvn clean compile jetty:run

Navigate to the following URL:
http://localhost:8080/

An extJS form should display allowing you to enter values. Click submit and an Ajax form submission will be made to the Struts Action. Any validation failures will show next to the component.

That’s all for now.

20
Mar
11

ExtJS Ajax Form Submission

This page describes the process of creating a extJS HTML form that submits data to a server side resource via Ajax. This page will also cover the validation failure scenario where custom error messages are displayed next to components that have invalid data. This page “simulates” the server side resource, therefore it is not Java / JEE specific and does not require server side programming to implement.

Background

The most popular methods for HTML form submission is to use either “GET” or “POST”.

The “POST” method causes the fields to be encoded into the body of the request. Although this is the preferred method to submit forms with large amount of data, when users arrive on the next page and click refresh they are presented with an annoying message (see below).

Browser Refresh message in Firefox: “To display this page, Firefox must send information that will repeat any action (such as a search or order confirmation) that was performed earlier.”

Browser Refresh message in Internet Explorer 6: “The page can not be refreshed without resending the information. Click Retry to send the information again or click Cancel to return to the page that you were trying to view.”

To most users these messages are confusing/annoying and can result in corrupted data. Imagine a user unknowingly submitting an order twice by clicking refresh on the order confirmation page.

The “GET” method causes the form fields to be encoded into the URL get string. For most large forms or forms that contain binary data this is not an option.

One of the benefits of using extJS for form submission is that with the help of Ajax it allows for the possibility of submitting data to the server in a separate “flow” of execution. Form submissions using Ajax don’t cause the page to reload. The display of the next page is not tied to the submission of the form. This provides the user with a richer client experience and avoids the mess caused by classic HTML form submission.

Requirements

  • Basic Understanding of extJS
  • HTTP Server

Procedure

The following html draws a form on the page. On the bottom of the form there is a Load and Save buttons.

The save button calls “returnSuccess.do”. In order to see validation error messages just replace “returnSuccess.do” with “returnFailure.do”.

index.html

<html>
<head>

<link rel="stylesheet" type="text/css"
    href="http://dev.sencha.com/deploy/ext-3.3.1/resources/css/ext-all.css"/>

<script type="text/javascript"
    src="http://dev.sencha.com/deploy/ext-3.3.1/adapter/ext/ext-base-debug.js">
</script>
<script type="text/javascript"
    src="http://dev.sencha.com/deploy/ext-3.3.1/ext-all-debug.js">
</script>

<script type="text/javascript">

function buildWindow() {

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var bd = Ext.getBody();

    var fs = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden    
        frame: true,
        title:'Form 2 - Ajax Enabled',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        waitMsgTarget: true,
        defaultType: 'textfield',        
        
        items: [{
                fieldLabel: 'First Name',
                name: 'firstName',
                allowBlank:false
            },{
                fieldLabel: 'Last Name',
                name: 'lastName'
            },{
                fieldLabel: 'Company',
                name: 'company'
            }, {
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email'
            }, new Ext.form.TimeField({
                fieldLabel: 'Time',
                name: 'time',
                minValue: '8:00am',
                maxValue: '6:00pm'
            })
        ],        

	});
	
	
	// simple button add
	fs.addButton('Load', function(){
	    fs.getForm().load({url:'data.do', waitMsg:'Loading'});
	});

	var onSuccessOrFail = function(form, action) {
		var result = action.result;
		
		if(result.success) {
			Ext.MessageBox.alert('Success', 'Success!');
		} else {
			Ext.MessageBox.alert('Failure', 'Failure!');
		}
		
	}

	// explicit add
	var submit = fs.addButton({
	    text: 'Submit',
	    disabled:true,
	    handler: function(){
	        fs.getForm().submit({
	        	url:'returnSuccess.do', 
//	        	url:'returnFailure.do', 
	        	waitMsg:'Saving Data...', 
	        	submitEmptyText: false,
	        	success : onSuccessOrFail,
	        	failure : onSuccessOrFail
	        });
	    }
	});

	fs.render('form-first');

	fs.on({
	    actioncomplete: function(form, action){
	        if(action.type == 'load'){
	            submit.enable();
	        }
	    }
	});

}
Ext.onReady(buildWindow);
</script>
 
</head>
<body>

<div id="form-first"></div>

</body>
</html>

Data

The following files represent simulated responses from the server side resource.

Load Data

The “data.do” represents the name, company and email information for a single person. It is retrieved from the server when the user clicks the load button. URL specified in “index.html” line 61 (highlighted) above.

data.do

{
    success : true,
    data    : {
        firstName : 'Jack',
        lastName  : 'Slocum',
        company   : 'Slocum LLC',
        email     : 'jack@slocum.com',
        time      : '9:45 AM'
    }
}

Save Data

When the user clicks the “save” button the URL specified in “index.html” line 81 (highlighted) will be called and the extJS component is expecting the following response from the server.

returnSuccess.do

{success: true, msg : 'Thank you for your submission.'}

Save Data with Failure

In the case the server side resource returns validation failures the extJS component is expecting them in the following format from the server. The failure messages displayed below display next to their prospective fields.

returnFailure.do

{
   success : false,
   msg     : 'This is an example error message',
   errors  : {
      firstName : 'Sample Error for First Name',
      lastName  : 'Sample Error for Last Name'
   }
}

Run the Example

Since we are making Ajax requests a Web Server is required. Save all the files and navigate to index.html using a web browser.

Click on Load to load the data. Click on Save to view the success message. In order to view the validation failure messages replace the URL on line 81 with “returnFailure.do”.

Summary

The example described on this page is very simple. However it does cover some of the basics of loading and submitting an extJS form using an Ajax.

The chances of this example above being used on an actual page are slim. Reason??? What happens after a form is submitted? The answer is by default… NOTHING…

After thinking about the above I gathered my thoughts and am in the process of writing Part II of this page which covers “User Interactions” with ExtJS enabled web applications. (soon to come).

That’s all for now.

05
Mar
11

ExtJS Dynamic Grid Columns

This page describes the process of dynamically creating a ExtJS columnModel based on data from a Ajax call. Generating a data Grid when the columns can not be predefined requires a different approach. The data coming from the server is evaluated and the columnModel is constructed in a set of if-else conditions. Once the column model and store have been initialized they are passed to the gridpanel for display.

Requirements

  • Html Editor
  • HTTP Server to serve the pages from

Procedure

Create the following html page:

Procedure:

  1. Make an Ajax request using the Standard XMLHttpRequest browser object.
  2. Read the meta-data from the response
  3. Run thru a series of if-else conditions to create and insert columns into the dynamic column model
  4. Feed the GridPanel with the store and the column model.

The following html file sets up the styles and imports the core JavaScript libraries.

index.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Stateful + Dynamic Grid Panel with Grouping and Totals</title>


    <!-- ** CSS ** -->
    <!-- base library -->
    <link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-3.3.1/resources/css/ext-all.css" />

    <!-- overrides to base library -->

    <!-- page specific -->
    <link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-3.3.1/examples/shared/examples.css" />

    <style type=text/css>
/*!
 * Ext JS Library 3.3.1
 * Copyright(c) 2006-2010 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */
#grid-example .x-grid-col-1 {
	text-align: right;
}
#grid-example .x-grid-col-2{
	text-align: right;
}
#grid-example .x-grid-col-3 {
	text-align: right;
}
#grid-example .x-grid-col-4 {
	text-align: right;
}
#grid-example.x-grid-mso{
	border: 1px solid #6593cf;
}
#grid-example.x-grid-vista{
	border: 1px solid #b3bcc0;
}
#xml-grid-example{
	border: 1px solid #cbc7b8;
	left: 0;
	position: relative;
	top: 0;
}
#editor-grid .x-grid-col-2{
    text-align:right;
}
.x-grid3-td-topic b {
    font-family:tahoma, verdana;
    display:block;
}
.x-grid3-td-topic b i {
    font-weight:normal;
    font-style: normal;
    color:#000;
}
.x-grid3-td-topic .x-grid3-cell-inner {
    white-space:normal;
}
.x-grid3-td-topic a {
    color: #385F95;
    text-decoration:none;
}
.x-grid3-td-topic a:hover {
    text-decoration:underline;
}
.details .x-btn-text {
    background-image: url(details.gif);
}
.x-resizable-pinned .x-resizable-handle-south{
    background:url(../../resources/images/default/sizer/s-handle-dark.gif);
    background-position: top;
}
        /* style rows on mouseover */
        .x-grid3-row-over .x-grid3-cell-inner {
            font-weight: bold;
        }

        /* style for the "buy" ActionColumn icon */
        .x-action-col-cell img.buy-col {
            height: 16px;
            width: 16px;
            background-image: url(../shared/icons/fam/accept.png);
        }

        /* style for the "alert" ActionColumn icon */
        .x-action-col-cell img.alert-col {
            height: 16px;
            width: 16px;
            background-image: url(../shared/icons/fam/error.png);
        }

    </style>
    
    <!-- overrides to base library -->
    <link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-3.3.1/examples/ux/css/GroupSummary.css" />

    <!-- ** Javascript ** -->

    <!-- ExtJS library: base/adapter -->
<script type="text/javascript"
    src="http://dev.sencha.com/deploy/ext-3.3.1/adapter/ext/ext-base-debug.js">
</script>
<script type="text/javascript"
    src="http://dev.sencha.com/deploy/ext-3.3.1/ext-all-debug.js">
</script>

    <!-- overrides to base library -->
    <!-- extensions -->
    <script type="text/javascript" src="http://dev.sencha.com/deploy/ext-3.3.1/examples/ux/GroupSummary.js"></script>

    <!-- page specific -->

    <script type="text/javascript" src="array-grid.js"></script>

</head>
<body>
    <h1>Stateful + Dynamic Grid Panel with Grouping and Totals</h1>
    <p>Note that the js is not minified so it is readable. See <a href="array-grid.js">array-grid.js</a>.</p>
    
    <div id="grid-example2"></div>

</body>
</html>

array-grid.js

Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

	// The columns are constructed dynamically here 
	// Ext.Ajax.request() introduces timing issues since it is asynchronous.
	// use XMLHttpRequest since it is synchronous in nature.
    var xmlhttp = {};
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET",'response1.do',false); // make a synchronous request
    xmlhttp.send(null);

	var prefs = {};
    if(xmlhttp.status == 200) {
	    var ajaxReader = new Ext.data.JsonReader();
		var ajaxStore = new Ext.data.GroupingStore({
			groupField:'industry',
			reader: ajaxReader,
			data: Ext.decode(xmlhttp.responseText)
		});

		var myColumns = [];
		// create the column model dynamically.
		for (var i = 0, len = ajaxReader.meta.fields.length; i < len; i++) {
			var field = ajaxReader.meta.fields[i];
			if(field.name == 'company') {
 				var this_column = {};
                this_column['id'] = 'company';
                this_column['header'] = 'Company';
                this_column['width'] = 60;
                this_column['sortable'] = true;
                this_column['dataIndex'] = 'company';
                this_column['hideable'] = false;
                this_column['summaryType'] = 'max';                    
                myColumns.push(this_column); 					
			} else if(field.name == 'price') {
                var this_column = {};
                this_column['id'] = 'price';
                this_column['header'] = 'Price';
                this_column['width'] = 20;
                this_column['sortable'] = true;
                this_column['dataIndex'] = 'price';
				this_column['renderer'] = Ext.util.Format.usMoney;
                this_column['summaryType'] = 'average';
                myColumns.push(this_column); 				
			} else if (field.name == 'change') {
				// Change 				
                var this_column = {};
                this_column['id'] = 'change';
                this_column['header'] = 'Change';
                this_column['width'] = 20;
                this_column['sortable'] = true;
				this_column['renderer'] = Ext.util.Format.usMoney;
                this_column['dataIndex'] = 'change';
                this_column['summaryType'] = 'max';
                myColumns.push(this_column); 				
			} else if (field.name == 'industry') {                    
				// Industry
                var this_column = {};
                this_column['id'] = 'industry';
                this_column['header'] = 'Industry';
                this_column['width'] = 20;
                this_column['sortable'] = true;
                this_column['dataIndex'] = 'industry';
                myColumns.push(this_column);
			} else if (field.name == 'lastChange') {                    
				// Last Updated
                var this_column = {};
                this_column['id'] = 'lastChange';
                this_column['header'] = 'Last Change';
                this_column['width'] = 20;
                this_column['sortable'] = true;
                this_column['dataIndex'] = 'lastChange';
                this_column['summaryType'] = 'max';
                myColumns.push(this_column);
			}	 					 				
		}					
		var grid2 = new Ext.grid.GridPanel({
			store: ajaxStore,
			stripeRows: true,
			height: 350,
			width: 600,
			stateful: true,
			stateId: 'grid2',
	        plugins: new Ext.ux.grid.GroupSummary(),
	        title: 'Stateful + Dynamic Grid Panel with Grouping and Totals',				
			view: new Ext.grid.GroupingView({
			    forceFit:true,
			    groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
			}),
			fbar  : ['->', {
			    text:'Clear Grouping',
			    iconCls: 'icon-clear-group',
			    handler : function(){
			        ajaxStore.clearGrouping();
			        grid2.fireEvent('groupchange', this);
			    }
			}],        
			cm: new Ext.grid.ColumnModel({
				defaults: {
					width: 120,
					sortable: true
				},
				columns: myColumns
			})		
		});
		grid2.render('grid-example2'); 				 				
		
    } else {
        // there was an error
//        console.error('there was an error getting data from the server');
    } 
});

The “metaData” in the response below allows the JsonReader to configure itself.

response1.do

{
"metaData" : {
	totalProperty : 'totalCount',
	root : 'records',
	successProperty : "success",
	fields : [
       {name: 'company', type : 'string'},
       {name: 'price', type: 'float'},
       {name: 'change', type: 'float'},
       {name: 'pctChange', type: 'float'},
       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
       {name: 'industry', type : 'string'}
	]
},
"success": true,
"totalCount" : "30",
"records" : [
    {company: '3m Co'								,price: 71.72,change: 0.02,pctChange: 0.03,lastChange: '4/2 12:00am', industry: 'Manufacturing'},
    {company: 'Alcoa Inc'							,price: 29.01,change: 0.42,pctChange: 1.47,lastChange: '4/1 12:00am', industry: 'Manufacturing'},
    {company: 'Altria Group Inc'					,price: 83.81,change: 0.28,pctChange: 0.34,lastChange: '4/3 12:00am', industry: 'Manufacturing'},
    {company: 'American Express Company'			,price: 52.55,change: 0.01,pctChange: 0.02,lastChange: '4/8 12:00am', industry: 'Finance'},
    {company: 'American International Group, Inc.'	,price: 64.13,change: 0.31,pctChange: 0.49,lastChange: '4/1 12:00am', industry: 'Services'},
    {company: 'AT&T Inc.'							,price: 31.61,change: -0.48,pctChange: -1.54,lastChange: '4/8 12:00am', industry: 'Services'},
    {company: 'Boeing Co.'							,price: 75.43,change: 0.53,pctChange: 0.71,lastChange: '4/8 12:00am', industry: 'Manufacturing'},
    {company: 'Caterpillar Inc.'					,price: 67.27,change: 0.92,pctChange: 1.39,lastChange: '4/1 12:00am', industry: 'Services'},
    {company: 'Citigroup, Inc.'						,price: 49.37,change: 0.02,pctChange: 0.04,lastChange: '4/4 12:00am', industry: 'Finance'},
    {company: 'E.I. du Pont de Nemours and Company'	,price: 40.48,change: 0.51,pctChange: 1.28,lastChange: '4/1 12:00am', industry: 'Manufacturing'},
    {company: 'Exxon Mobil Corp'					,price: 68.1,change: -0.43,pctChange: -0.64,lastChange: '4/3 12:00am', industry: 'Manufacturing'},
    {company: 'General Electric Company'			,price: 34.14,change: -0.08,pctChange: -0.23,lastChange: '4/3 12:00am', industry: 'Manufacturing'},
    {company: 'General Motors Corporation'			,price: 30.27,change: 1.09,pctChange: 3.74,lastChange: '4/3 12:00am', industry: 'Automotive'},
    {company: 'Hewlett-Packard Co.'					,price: 36.53,change: -0.03,pctChange: -0.08,lastChange: '4/3 12:00am', industry: 'Computer'},
    {company: 'Honeywell Intl Inc'					,price: 38.77,change: 0.05,pctChange: 0.13,lastChange: '4/3 12:00am', industry: 'Manufacturing'},
    {company: 'Intel Corporation'					,price: 19.88,change: 0.31,pctChange: 1.58,lastChange: '4/2 12:00am', industry: 'Computer'},
    {company: 'International Business Machines'		,price: 81.41,change: 0.44,pctChange: 0.54,lastChange: '4/1 12:00am', industry: 'Computer'},
    {company: 'Johnson & Johnson'					,price: 64.72,change: 0.06,pctChange: 0.09,lastChange: '4/2 12:00am', industry: 'Medical'},
    {company: 'JP Morgan & Chase & Co'				,price: 45.73,change: 0.07,pctChange: 0.15,lastChange: '4/2 12:00am', industry: 'Finance'},
    {company: 'McDonald\'s Corporation'				,price: 36.76,change: 0.86,pctChange: 2.40,lastChange: '4/2 12:00am', industry: 'Food'},
    {company: 'Merck & Co., Inc.'					,price: 40.96,change: 0.41,pctChange: 1.01,lastChange: '4/2 12:00am', industry: 'Medical'},
    {company: 'Microsoft Corporation'				,price: 25.84,change: 0.14,pctChange: 0.54,lastChange: '4/2 12:00am', industry: 'Computer'},
    {company: 'Pfizer Inc'							,price: 27.96,change: 0.4,pctChange: 1.45,lastChange: '4/8 12:00am', industry: 'Services'},
    {company: 'The Coca-Cola Company'				,price: 45.07,change: 0.26,pctChange: 0.58,lastChange: '4/1 12:00am', industry: 'Food'},
    {company: 'The Home Depot, Inc.'				,price: 34.64,change: 0.35,pctChange: 1.02,lastChange: '4/8 12:00am', industry: 'Retail'},
    {company: 'The Procter & Gamble Company'		,price: 61.91,change: 0.01,pctChange: 0.02,lastChange: '4/1 12:00am', industry: 'Manufacturing'},
    {company: 'United Technologies Corporation'		,price: 63.26,change: 0.55,pctChange: 0.88,lastChange: '4/1 12:00am', industry: 'Computer'},
    {company: 'Verizon Communications'				,price: 35.57,change: 0.39,pctChange: 1.11,lastChange: '4/3 12:00am', industry: 'Services'},
    {company: 'Wal-Mart Stores, Inc.'				,price: 45.45,change: 0.73,pctChange: 1.63,lastChange: '4/3 12:00am', industry: 'Retail'},
    {company: 'Walt Disney Company (The) (Holding Company)',price: 29.89,change: 0.24,pctChange: 0.81,lastChange: '4/1 12:00am', industry: 'Services'}
]
}

Test the page

The page will NOT work if you simply save the files to a local directory and point your browser there. The pages must be served by a HTTP Server. Setting up a server is beyond the scope of this page.

05
Mar
11

How to make an Ajax Request using extJS

This page describes a page that makes an Ajax request for data, decodes and displays the data element onto the screen.

Requirements

  • html editor
  • Access to a HTTP Server

Start in an empty directory and create the following file.

index.html

<html>
<head>

<link rel="stylesheet" type="text/css"
    href="http://dev.sencha.com/deploy/ext-3.3.1/resources/css/ext-all.css"/>

<script type="text/javascript"
    src="http://dev.sencha.com/deploy/ext-3.3.1/adapter/ext/ext-base-debug.js">
</script>
<script type="text/javascript"
    src="http://dev.sencha.com/deploy/ext-3.3.1/ext-all-debug.js">
</script>

<script type="text/javascript">

function buildWindow() {
	Ext.Ajax.request({
		url : 'response1.do' , 
		method: 'GET',
		success: function ( result, request ) { 
			doJSON(result.responseText);
		},
		failure: function ( result, request) { 
			Ext.MessageBox.alert('Failed', result.responseText); 
		} 
	});

	function doJSON(stringData) {
		try {
			var jsonData = Ext.util.JSON.decode(stringData);
			Ext.MessageBox.alert('Success', 'Decode of stringData OK<br />jsonData.totalCount = ' + jsonData.totalCount);
		}
		catch (err) {
			Ext.MessageBox.alert('ERROR', 'Could not decode ' + stringData);
		}
	}
}
Ext.onReady(buildWindow);
</script>
 
</head>
<body>
</body>
</html>

response1.do

{ 
"totalCount" : "4",
"blah" : 'test', 
"records" : [
    {"state":"NY","fullName":"Neeraj Verma"},
    {"state":"NJ","fullName":"Bob Smith"},
    {"state":"NY","fullName":"John Adams"},
    {"state":"CA","fullName":"John Doe"}
]}



Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 77 other followers

November 2017
S M T W T F S
« Oct    
 1234
567891011
12131415161718
19202122232425
2627282930  

Blog Stats

  • 841,714 hits