Arun Gupta, Miles to go ...

Arun Gupta is a technology enthusiast, a passionate runner, and a community guy who works for Sun Microsystems.

« Previous day (Jul 28, 2008) | Main | Next day (Jul 30, 2008) »

Tuesday July 29, 2008

TOTD #39: Prototype/Script.aculo.us Autcomplete widget with MySQL, GlassFish, NetBeans

There are several JavaScript libraries that can be embedded in your webapplication to create a visually appealing interface. Script.aculo.us is one of the popular ones and is built on the Prototype JavaScript Framework. The library provides an easy-to-use, cross-browser user interface JavaScripts that allows you to create fancy effects commonly visible on web pages these days.

This blog entry gets you started by using Ajax.Autocompleter that allows for server-powered autocompleting of text fields. Basically, you type a character in a text field and suggestions for possible correct values starting with that character are shown . This is achieved by by sending an Ajax request to the data source on server, passing the typed character in the request and processing the response to display on the web page. This effect was first popularized by Google Suggest.

In this TOTD (Tip Of The Day) we will create a simple web application with a text field in a JSP page that will use Servlet as the data source. The Servlet retrieves the parameter from the RequestContext, uses Java Persistence API to query the database and return response in the expected format. We will use:

NetBeans IDE 6.1 for Web app creation/deployment
GlassFish v2 UR2 as deployment platform
MySQL database server bundled with Mac OSX 10.5.4

Let's get started!

TOTD #38 explains how to create a MySQL Persistence Unit. Please follow the steps there to create a new Web application and Persistence Unit. Follow the steps listed below after the PU is created.

In Project Explorer, expand "Source Packages", "server" and open "States" class. Add the following NamedQuery:

@NamedQuery(name = "States.findLikeName", query = "SELECT s FROM States s WHERE LOWER(s.name) LIKE :searchString"),

at the position shown below:

In "StatesServlet" class, replace the commented code in "processRequest" with the following fragment:

            String searchString = request.getParameter("autocomplete_parameter");

            List<States> list = em.createNamedQuery("States.findLikeName").
                    setParameter("searchString", searchString.toLowerCase() + "%").
                    getResultList();

            out.println("<ul>");

            for (int i = 0; i < list.size(); i++) {
                States s = list.get(i);
                out.println("<li>" + s.getName() + "</li>");
            }
            out.println("</ul>");

and fix the imports by right-clicking in editor pane and selecting "Fix Imports".

Download & Use Script.aculo.us libraries

Download latest Script.aculo.us libraries from here (version 1.8.1 as of this writing) and unzip them.
In NetBeans, right-click on "Web Pages", select "New", "Folder" and specify the folder name as "javascripts".
From the unzipped Script.aculo.us bundle, copy all files from "src" and "lib" directory to the newly created "javascripts" folder.

Expand "Web Pages" and open "index.jsp". Add the following fragment in HTML <head>:

and the following in HTML <body>:

These fragments are part of the original tutorial.

Optionally, specify a stylesheet to render the result nicely

Create a "stylesheets" folder in "Web pages".
Right -click on the newly created folder, select "New", "Other...", "Other" category and "Cascading Style Sheet" file type. Give the name "autocompleter" and click on "Finish".

Replace the generated template with the following contents:

.autocomplete {
    position:absolute;
    width:250px;
    background-color:white;
    margin:0px;
    padding:0px;
    overflow:hidden;
}
.autocomplete ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
    overflow:auto;
}
.autocomplete ul li.selected { background-color: #ffb;}
.autocomplete ul li {
    list-style-type:none;
    display:block;
    margin:0;
    padding:2px;
    height:32px;
    cursor:pointer;
}

Add the following fragment in "index.jsp" in <head>:

<LINK href="stylesheets/autocompleter.css" rel="stylesheet" type="text/css">

Now the show time ... right-click the project and select "Run". This deploys the project on GlassFish v2 and brings up "http://localhost:8080/Autocomplete/index.jsp" in the default browser window. The default page looks like:

As you start typing characters in the text box, Ajax.Autocompleter sends a request to the Servlet (specified using the "/Autocomplete/StatesServlet") by passing the typed characters as query parameters. The servlet returns an unordered HTML list. Typing "A" in the text box shows the following output:

and Firebug output looks like:

Typing "C" in the text box shows the following output:

Typing "Mi" in the text box shows the following output:

A request to the Servlet is made everytime a letter is typed. The minimum number of characters that must be entered in the field before a Servlet request is made can be altered by passing the arguments to Ajax.Autocompleter function as shown below (changes highligted in bold):

            window.onload = function() {
                new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "/Autocomplete/StatesServlet", { minChars: 2 });
            }

Some potential fun ideas to make this entry more meaningful:

Servlet can access data from a RESTful endpoint and transform the data to an unordered list
Autocompleter data source return data in JSON format
Autocompleter used in a HTML <form> and "afterUpdateElement" is used to process the selected entry, may be filter the data shown

Please leave suggestions on other TOTD (Tip Of The Day) that you'd like to see. A complete archive of all tips is available here.

Technorati: totd web2.0 autocompleter scriptaculous prototype javascript glassfish mysql netbeans

Posted by Arun Gupta in web2.0 | Comments[6]