Clients Section: The Ultimate People Company

URL: http://www.upco.co.uk

UPCO are a software development business focused on designing, developing and deploying innovative IT solutions.

This project involved operating as a contractor within UPCO on a 3rd party client development project.

The project was to develop a browser based interface for providing Modile Phone usage information to be used by an internal team within the clients company and by the Police.

Building an HTML framework from a predesigned concept

The original design concept had been developed internally by UPCO based on a set of requirements provided by the client.

The original designs were created by UPCO using Adobe Photoshop.

The first task was to split the artwork into its component parts in order to construct the relevant HTML component elements to be used to construct a webpage.

A pure HTML prototype was constructed to provide a basic demonstration that the overall concept could be replicated as a web application, both in form and function.

The image to the right shows the WebDrs homepage which demonstrates the basic page layout.

Constructing an AJAX 'Auto-complete' mechanism

Part of the proposed design involved providing the facility for some of the text input controls to 'Auto-complete' when text was entered.

For example, in a text input control that was designated for entering an individuals name, the auto-complete mechanism would operate once the user had entered 3 or more characters. A box would appear below the text input control containing all matches to the currently inputed content.

Entering additional characters would further filter the results provided.

The user could then select an option from the list provided which would be inserted into the text input control.

This functionality was achieving utilising some client-side Javascript functionality, an AJAX function which queried a back end Spring MVC view (to retrieve the results) and further client-side Javascript to filter against the user input and finally render the results.

Several existing Javascript frameworks include this type of functionality. However in this case the requriement was very specific and it was also necessary for the mechanism to be implemented in several different cases where the results could be quite different. The frameworks that employ the better version of this functionality required the inclusion of large libraries along with a vast number of other functions that were not required. It was therefore decided to build a bespoke mechanism to support this requirement.

The image to the right displays the Auto Complete results pane having been instigated by the user entering more than three characters into the form control above.

Constructing 'Accordian' style content box controls

The core functionality of the application is to construct 'Authorisations' which comprise of 'Disclosure Requests' that are reports generated against selected criteria. An 'Authorisation' can have multiple 'Disclosure Requests'.

When viewing an individual 'Authorisation' the page displays all of the 'Disclosure Requests' for that 'Authorisation'. Each 'Disclosure Request' inhabits a self-contained rectangular box.

To reduce potential user confusion and increase overall application usability the requirement stated that only one DR could be open at any time. DRs could be expanded and collapsed. Therefore an 'Accordian' mechanism was required to provide the functionality to expand and collapse DRs.

As with the 'Auto-complete' mechanism, the overall requirement was so specific, and the available instances of this kind of functionality where only available embeded in large libraries, such that a bespoke mechanism was developed to support this requirement.

The image to the right displays an 'Authorisation', showing the top section open and the 'Disclosure Request' closed (the orange horizontal bar is the tab heading for the 'Disclosure Request')

Converting the HTML to relevant JSPs and components

It had been decided by UPCO to utilise the Java Spring MVC framework architecture for this application.

The original HTML prototype was deconstructed into appropriate JSP components to facilitate development of a Spring MVC model application.

The presentational aspects of the application where developed within the JSP elements, including interacting with data generated by the Spring Controllers and Views, with some JSP fragments implemented for re-usability.

Developing Spring MVC view, controllers and classes to display the corresponding filtered datasets

The application was broken into the key operational components in order to define corresponding Spring Controllers and Views that needed to be constructed.

The application included the following core operational components:

• Login/Authorisation
• 'Search'
• Authorisation Create/Read/Update/Delete
• Disclosure Request Create/Read/Update/Delete
• Reports
• Help
• Basic user credential management

A full API existed that was developed by the 3rd party. This API provided all the functionality necessary to manage and retrieve Authorisation, Disclosure and User information along with a variety of other functions.

The application homepage presents the user with a list of Authorisations responsible to the entire team. Another section displays Authorisations assigned directly to the user. There is also a 'Search' section used to identify Authorisations against selected Search Paramaters.

This piece of work involved developing a standard results Controller that would take a parameter derived from where the user was, or selected search parameters, and present the relevent results accordingly.

The basic elements for this Controller were as follows:

• Identify which mode of operation was required; 'Team results', 'My results', 'Simple Search, 'Full Search'
• Construct the appropriate API call to retrieve the data against the corresponding mode of Search activity
• Return only the relevant results with regard to paginating the entire result set

Ancillary Classes and helper functions were constructed where necessary to augment the core functionality.

Developing a Search mechanism with results pagination

As briefly mentioned above, the application required a 'Quick Search' and a full parameterised Search mechanism.

The core Controller was extended to incorporate this functionality.

The top image to the right displays a Simple Search, with options to select the status of the 'Authentications' to Search against.

The middle image to the right displays a Search Results Page. The left hand blue section displays the 'extended' search parameter options.

The bottom image to the right displays the bottom of a Search Results Page including the pagination controls.