Autocompletion using AngularJS, TypeAheadJS, Spring MVC, iBatis

Background

As I’ve mentioned in other articles. We have old web application using Struts 1, Spring, and iBatis.

My boss has informally shared his plan to replace the struts with Spring MVC, replace old javascript with angularJS, and some other exciting plans. However, that’s not a top priority.

The existing web user interface is plain JSP with no Ajax whatsoever.

User still need to key in some value like port code, country code, and other domain-related code using normal input without any sort of hints from the system. And they’ve been using this old software for about 5 years! Amazing! The users can use this software without complaint probably because they’ve been working in their vessel terminal for a very long time. They remember all those codes by heart.

Requirement

We want to gradually provide better UI experience in the newer version of this software. In this article, we’ll focus on providing autocompletion for port code.

Current Solution

This is just a side task, I don’t want to spend a lot of time researching how to do AJAX with this old struts while I know that it can easily be done using Spring MVC. Anyway, Spring MVC will be the old Struts replacement in the future.

So, I decide to use Spring MVC combined with AngularJS.

In my other project, I’ve used jQuery UI autocomplete. It works perfectly. However, I decide to use TypeAhead as it allows to lookup local data set first before calling remote API, which I believe will provide better user experience. Imagine for our case, we have a list of all port codes in the world but the vessels that comes to the terminal might come from/go to certain ports which is just a very small subset of the world’s port codes. Using TypeAhead we will eliminate unnecessary database query.

Well,  probably jQuery UI has implemented the same feature (I’m lazy to check =D). To be honest, the actual reason is I want to try out new things. Anyway, my boss don’t mind with that as long as I can deliver.

Let’s dive into code!

Spring MVC configuration

First we need to update the Maven dependency. We’ll add SpringMVC and Jackson is used to handle POJO-JSON marshalling/unmarshalling.

At this point in time, Spring MVC will be configured side-by-side with existing Struts. We need to add DispatcherServlet in web.xml

I decided to use /springmvc/* for those spring MVC related path so that it won’t mix up with existing Struts path.

I’ll have webapp-config.xml created in location defined in DispatcherServlet’s context config location above.

Basically it means, I’ll use annotation instead of manually configured the Spring dependency injection in XML. And let Spring framework to scan only the code in “com.portek.mvc”. All the SpringMVC related code will be under this package.

Exposing JSON API

We need to create Spring MVC controller that will expose the JSON API

The service implementation will reuse existing DAO which is iBatis.

I just need to define a new method “autocomplete” in PortDAO interface to handle the autocomplete query.

You’ll notice that it uses SqlMapClientDAOSupport that’s deprecated. It’s old code but it still works. I’ll just reuse it. Here is the iBatis SQL Query

 

Autocompletion Using AngularJS & TypeAheadJS

Note: we need to replace the hardcoding URL (http://localhost:8090/mvn-ctms).

 

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">