Montag, Juni 11, 2007

Building data-centric and forms based AJAX applications

Most of the business web applications on the Internet are HTML forms based applications where data, bound to html elements, is the core functionality. I am talking about registration forms, dialogs and pages to display and modify records of a server side relational database system, ERP or CRM systems. There are not a lot of drag & drop elements or popping visual effects here but most active elements deal with data that comes from databases or other data sources.

Many developers do not build E-Mail applications, portal frameworks, maps or mashups but we need to display, edit and control records from a company's database and implement transactions on these entities.

This part of the framework and the upcoming posts are about the aspects and coding the client side of this kind of web applications and here is my blueprint of the ongoing work that will extend and consolidate the framework in this direction.

The server side is kept minimal for now and you can adopt any data binding layer on the server you like as long as you implement the small ITableDataService interface on the web service that handles the AJAX calls.

Inside the archive file download you can follow the development of this part of the framework in the S06_AJAXForms folder.

Typical data-centric web pages

From a high level viewpoint onto pages that implement data-centric applications you see that the elements on the page can be categorized into the following cases:

  • Fields and other elements where values are shown and edited by the users (Input fields, checkboxes, ...)
  • Buttons that help editing these values (calendar popup, drop-down lists, ...)
  • Foreign key Lookup mechanisms [check against a list of countries]
  • Buttons that offer a way of navigation through huge data sources  (|< first, next >>, ...)
  • Buttons that commit a current state to the backend system ([Update])
  • Buttons that trigger special transactions or back-end calculations
  • Tables that display mass data by paging or scrolling
  • Tree Views that display hierarchical (mass-) data

Some of these features where already shown here on the blog but it's time to rearrange these features a little bit and make them working together. Here are some aspects about the major features.

Forms and binding data

A core functionality of this kind of business application is a data binding functionality that connects elements of the form to the corresponding data source. Because we want to keep the page loaded while navigating through many records coming from the server we need a client-side mechanism for moving data into html elements and back. The core of this mechanism was introduced in an early post using the ajaxForms.js include file. This mechanism will be extended and tuned a little bit.

Supporting national language specific notations

Of course we need some functionality to convert non-text datatypes to a string representation that can be read by the user and this frameworks goes further by converting values to human readable strings with the typical national language specific notations in decimal numbers and date values.

Because this is done on the client we need no conversion on the server and therefor have a server that must not care about the specific formats out there in the world. Supporting these notations is done by using a plugable mechanism that delivers the right conversion routines to the client based on the language settings of the browser.

Input Helpers

These elements are bound to a standard input field. They are built to help entering some specific datatypes by offering an alternative input method . This might be small dialogs like a calendar popup, drop-down buttons that open a list of possible values or sliders that can be used to adjust a value.

Some of these controls do already exist in the controls collection of this framework but again they have to be adjusted and extended a little bit.

Navigating through table data

In many cases the data comes from a data source on the server that stores many records in a table format. On the client we will need some elements that help us navigating through this kind of data. The most common used user interface elements are buttons that allow positioning to the first, previous, next and last record and support searching and modifying the current record.

By implementing a webservice on the server that implements a common interface and a set of controls on the client that use this webservice there will a set of basic functionality available without the need for scripting on the client.

Tree Data

A data bound tree sample has already been published at

but we will see how to integrate it into the scenario by reusing the same web service interface for the Ajax call.

Common data interface on the server

Serving data from the server and some more functions is provided to the client by using several methods of a webservice. This webservice has to support several simple methods that will bring the databinding to the client through ajax calls. To support an easy development of these web services the ITableDataService interface is defined with the minimal set of methods.

AJAX Controls for AJAX forms

AJAX Form Controls are very similar to the PropXXX controls I had introduced some time ago. AJAX Form Controls are made to bind data from an external data provider and from web services using elements on a html page. The AJAX Form Controls are AJAX Controls that implement the Data Interface functions.

(The PropXXX Controls are using primarily the Page Properties storage mechanism and are used to control the state of the view of the page. This is typically something different than the data, but we will see some changes in this scenario too in some time to make it OpenAJAX compatible).


Technorati tags: , , ,

Keine Kommentare: