Slashdot It!
Digg Interactive Grid with Your Own Hands
I am sure being ‘pampered’ by GUI of desktop applications, users find interfaces of web-applications as extremely uncomfortable. Their notes, probably unexpressed, are timely within AJAX Age. Besides, it is not so difficult to make web-applications more user-friendly. I will not describe whole variety of interface forms in this article, but will concentrate on such an indispensable element as a grid. Almost every web-application needs linear data list management. DB record management of PhpMyAdmin is likely a classical solution in this field. It is a popular solution, but it demands page reloading for every operation, data loss is possible and so on. Let us think about what requirements should be included to be a user-friendly interface should have. The user should have the ability to sort the list by fields, filter the list, the possibility to assign a range of selecting and pagination. With all this going on, only part of the application window should be changed.
As far as you probably know, basis of AJAX is XMLHttpRequest. It is a Java Script instrument, which allows to perform requests to a remote server script and receive its responds. Thus, when a user is initiating some event (for instance, click to an icon), we can immediately inform the server script. When the server script receives the request, it starts to ‘find out’ in referred parameters what it should return, for example, the record list, which is sorted by some user input criterion. Java Script retrieves the list and displays it in a table area. The user watches, with pleasure, the line order of the table being changed to his input request., while all other forms of this application window remain unchanged.
Figure 1. Model of the solution
How to do it? Use of XMLHttpRequest is not a difficult task. However, we can simplify this by adding a ready script library to our arsenal.. I liked a solution from YUI toolkit, which is known as Connector. With help of unpretentious construction, YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, postData); we can send POST-parcel to the specified address and analyze the response from the server script with the function, assigned within callback.
So, by using HTML, we describe the interface to the future of the grid. We omit areas, which are dependent on server script responds (records list, indicator of record number), but leave “anchors” so that we can manage content from those areas dynamically. It can be any sort of HTML-containers with the assigned unique ID. Next, we describe the functions of server respond processing. For example,
var handleSuccess = function(o){
if(o.responseText !== undefined){
document.getElementById(divName).innerHTML =
decorateList(o.responseText);
}
};
var handleFailure = function(o){
if(o.responseText !== undefined){
document.getElementById(divName).innerHTML =
'Server Error';
}
};
var callback =
{
success:handleSuccess,
failure:handleFailure,
argument:['foo','bar']
};
Likely, someone will question “But what do we receive from server?”. We receive content of server script console. In the simplest case, it will be HTML of the updated table. But it means mixed data and its decoration. I.e. every table modification will demand modification of the server script, which will adversely affect readability of application business logic. Classical universal solution of data structure transferring is XML. In that case, we will have to analyze reported content each time with Java Script and form HTML or give that charge to XSLT. You can read about it in the “AJAX:Getting started” article. But I suggest to use another more comfortable format JSON. It will allow to transfer less amounts of data, will not have difficulty with special symbols and we will have no need to analyze server script responds. JSON is for Java Script ready to use construction.
So, now we only need to define set of parameters of various events and add their processing into the server script. Assume, if “Show” button is pressed, we are passing to the server script, taken from INPUT TEXT the list offset and number of displayed records. The server script inserts those values into SQL query and transforms the record list to JSON form. We can “run” about received array lines and decorate them with HTML.
Figure 2. Commercial grid sample
As you can see, the new opportunities are coming to us. We can make Java Script on the client side to repeat requests automatically right up to successful transaction, if there are any troubles with a network connection. We can realize adequate indication of the process. We can make the filters more interactive by sorting the list automatically in accordance with the entered part of the filtration key. Well, we can use as much of our imaginations as we allow.
You can download the code archive, which contains all of the files you will need to create the working examples presented here.
