Building a page with a form to display and change a record is a common scenario and it should be easy to implement. Some of the basic ideas where already published last week and here is a concrete implementation. The page that can be found at http://www.mathertel.de/AJAXEngine/S06_AJAXForms/SimpleReader.aspx is built by a combination of the 3 components:
- The Form contains DataInput fields and other Data Contol elements that are used to display the values.
- The Menubar is used to offer the typical buttons for searching and navigating through the dataset.
- The DataSource control controls the binding between these controls and the server side web methods.
The Form element
Many web applications need to display and modify relational data by using a form and a offering a single record at each time. The form itself contains input fields to display the columns of the record and other html elements like labels or other static text around them.
All these elements together are held together by using a html container element that is called the form element. Because we handle all data mechanisms by using AJAX functionality we do not need a real <form> element but use a <div> element instead.
The functionality that is attached to the form (the <div> element) of the page handles getting and setting values by respecting the correct formats for several datatypes and converting them to regular xml data formats.
The great benefit from this approach is, that the server has to support only the standard xml format for the known datatypes and not any country or language specific formats. More on that in another post.
The Menubar element
This element contains the typical buttons that enable the navigation through a set of records.
These buttons and icons will trigger the corresponding methods of the datasource control by publishing events.
The DataSource control
This element is not visible to the end user and is containing the main functionality to transfer the data from the server to the form element. It also contains a client side cursor model that help keeping state information away from the server.
The following commands are available:
clear: This command will just clear all the values inside the form.
search: A call to the server is started to retrieve the keys of the found records. The current values of the form before the search is started are used as a template so you can easily find a specific record or a set of records. The retrieved keys are used to form the cursor.
first: The first record in the cursor is retrieved from the server and is displayed inside the form.
next: The next record in the cursor is retrieved from the server and is displayed inside the form.
previous: The previous record in the cursor is retrieved from the server and is displayed inside the form.
last: The last record in the cursor is retrieved from the server and is displayed inside the form.
(future extensions: add, update, delete, ...)
The DataSource element also publishes an event when the data of the form was changed to inform other elements on the page that a new situation is existing.
Searching and the AJAX calls in the background
The "search" button in the menubar must be used first to build the dataset. This is done on the server by searching for all the records that match the criteria given by the current values in the form fields. This is done by using the SearchAction that is passed to the AJAXEngine to call the search method of the webservice. This method is returning a list of unique keys, each one representing a record.
Here is a sample how to search:
You can write "UK" into the country field and press "search" to search all records that have "UK" in the country colum. The database provider also offers the possibility to search using wildcards. If you enter "U%" into the country field you will find all the records with a country starting with "U".
After finding some data the dataset control automatically will fetch the first found record and will display in in the given form fields. This is done by using the DisplayAction that is passed to the AJAXEngine to call the fetch method of the webservice and passing the retrieved record data to the form.
Using the arrow buttons you can step through the dataset. The clear button will clear the form without freeing the dataset but by loosing the current cursor position.
Events between the controls
Connecting elements on the page might be done by using scripts in one element that direct address the other element or by using events.
Events like onclick and onload are already well known in the web development but they are limited to those events that are built into the DOM (Document Object Model). It is not possible to reuse this mechanism for other, self-built events and another mechanism is needed for tasks like this.
Inside jcl.js (view source) you can now find a (almost) compatible version of the OpenAjax specification that has only about 1300 bytes of real code. When the specification is finished I will release a compatible version and will follow the idea of a common functionality and compatibility of the Ajax frameworks. More on that in another post...