Development – User Interfaces

The user interface is the part of the system that the users come into contact with. Hence their judgment heavily depends on the condition of the user interface. A system can meet its downfall if its user interfaces were not properly designed, Even if the system comprises of powerful and helpful logical functionalities. From the point of view of the user the system earns lot of plus marks if the user interfaces are properly designed and developed.

Most of the time, someone can misunderstand this as providing flashy interfaces. However this is not true. When it comes to user interface design “Simplicity Sells”.

Basically what is expected from a proper user interface design and some good practices to be adhered to when designing user interfaces is as follows.

1. Providing information to the user in an uncluttered and easy to understand manner.
2. Not stressing the eyes of the user.
3. Avoid the usage of certain colour combinations as they can be unrecognizable by certain individuals with sight disorders.
4. Avoid the usage of colours that can generate mental imbalances in certain individuals.
5. Limiting to few of selected colours rather than using a wider range of colours which sometimes can be a burden on the users and even the computer.
6. Be simple as possible and design controls that need higher priority to stand out from the rest of the user interface. This will avoid the user from being frustrated by having to figure out which is which.
7. Use fonts that read clearly and use font colours that stand out from the background.
8. When describing the usage of a control try to stick to the mindset of the user. Use a language that the user will understand clearly and avoid using technical notations as much as possible.
9. Avoid the usage of words that can mean two things at the same time.
10. Check the user interface for spelling mistakes for this can sometimes lead to complicated situations.

When designing user interfaces for this system a somewhat radical approach was used. That is the heavy utilization of Ajax. This is done to avoid the pages from constantly refreshing themselves for each and every request to the server, And also to avoid the browser from constantly reloading the same resource from the server or from the cache. In addition to that, usage of Ajax gave the distinct advantage of reduced network traffic which resulted in a distinct performance gain.

As described earlier, the system was designed in such a manner that it can be implemented as a collection of modules. Each of these modules had a user interface and this user interface was comprised of two parts, the HTML page and the Module Specific JavaScript file (the structure of the system is described in [link]). Only a handful of colours were used. Black, A darker shade of Red, Several shades of Gray and White were the only colours to be utilized.

Here are several of user interfaces used in the system.

The Main page

The most important part of the user interface was the “Main” page. This was the page that loaded when a user logs in to the system. This page was designed to be an anchor point for the whole system. In other words that is to say that this page will facilitate all other subsequent operations of the system.

The objective was to load all other modules within the Main page. And the main page was given the ability to load modules by the implementation of a menubar. The Figure illustrates a module loaded inside the Main Page.

Application module loaded inside the Main page

The menubar itself was loaded according to the privileges that have been granted to the user who is logging in. This method avoided users from trying to gain access to modules that they are not suppose to use. And also cross communication between modules in the user interface layer was banned so to avoid a privilege collision from happening.

Even from the early stages of requirement gathering users were asking for an interface that uses less amount of scrolling to navigate around. The system interfaces were designed bearing that in mind. And the outcome of it was a Main page that occupied the whole screen when it is running. Horizontal scrolling was also banned from the Main page.

Development - Using Ajax

Ajax, which stands for Asynchronous JavaScript and XML, is a method that enables web sites and web applications to communicate asynchronously with the server.

Well, it does sound a mouthful. Doesn’t it?

To explain what Ajax is first let’s talk about how a web site works. The method web sites work is called client-server architecture. In this the client is your web browser and the server is your web server. The client asks for a web page from the server and the server sends the requested page to the client. In early days, when you ask for a web page, the client request for that whole page from the server. This means that you will have to wait staring at a blank screen until the page loads which is a boring thing to do and a complete waste of time and bandwidth. This is where Ajax came in. Ajax enabled web pages to load in parts and send requests behind the scene enabling a web page to request only the required data from the server to update its appearance and information. Nowadays web sites use Ajax frequently to deliver a seamless user experience.

There are several ways that you can implement Ajax to a web site. In this project I have used the “XMLHttpRequest” object.

This is how the request object was created using JavaScript. The implementation of XMLHttpRequest object differs depending on the browser. That is why an “if” statement block is used.

/*

* create the request object

*/

function ajaxObj()

{

    var ajaxCall = false;

    if(window.XMLHttpRequest) //check whether the browser is Firefox

    {

        ajaxCall = new XMLHttpRequest();

        ajaxCall.overrideMimeType("text/xml");

    }

    else if(window.ActiveXObject) //check whether the browser is IE

    {

        ajaxCall = new ActiveXObject("Microsoft.XMLHTTP");

    }

    return ajaxCall;

}

After creating the Ajax object you can send asynchronous requests to the server using it. Here is the code for that. This function takes the following parameters.

dataSource – The page that you wish to call asynchronously

ajaxCall – Ajax object created using the above ajaxObj() function.

/*

* communicating with the server asynchronously

*/

function getData(dataSource, ajaxCall)

{

     // The GET method is used here. Also can use the POST method with little

     // modification to the code

     if(ajaxCall)

    {

       ajaxCall.open("GET", dataSource);

       ajaxCall.send(null);

    }

}

Finally this is how you tie all these up to get the job done. The following code is used to load HTML content asynchronously from the server to dynamically change the appearance of the user interface.

This function takes the following parameter.

formName – Name of the HTML content file that is to be loaded

/*

* load forms dynamically

*/

function loadForm(formName)

{

    var ajaxCall = ajaxObj();

    getData("./ui/forms/" + formName, ajaxCall);

    ajaxCall.onreadystatechange = function()

       {

           //show a message while loading

           if(ajaxCall.readyState == 3)

           {

                var target;

                target = document.getElementById("divMain");

                target.innerHTML = "Loading…"        

}

           if(ajaxCall.readyState == 4 && ajaxCall.status == 200)

           {

                target = document.getElementById("divMain");

                //get form data

                var formContent = ajaxCall.responseText;

                //display form

                target.innerHTML = formContent;

           }

       }

}

Development – Automatic Number Generation

The system required to generate serial numbers for Users, Applications, Clients and for many other records. These serial numbers were supposed to follow a certain format; they should have a defined character width; and also they should comprise of two parts (the prefix part and the incrementing numeric part).

For an example, the serial number for an application should look like this.

APP000001
 

In this, the “APP” part is the prefix for Applications. The “000001” is the incrementing numeric part.

For generating auto incrementing numbers the easiest way is to use “Auto increment” facility in MySQL. However that facility cannot be used to create serial numbers this complex.

So here’s what I did. This method is inspired from a project that I participated a few years back.

The auto number generator uses data from a table called “sys_autono”.
 

ER Diagram for the sys_autono table

The table that has been filled with data looks like this.

sys_autono filled with data - powered by phpMyAdmin

Here is the code to generate serial numbers. You can find the DBAdapter class in Development – Database Connection and Transaction Management

require_once($_SERVER['DOCUMENT_ROOT'] . '/FixedDeposit/adapters/DBAdapter.php');

/**

* Get the current auto number from the database.

* @param $prefix String Prefix for the auto number

* @return String Auto number or an error message if the auto number

* generation faild

*/

function getAutono($prefix)
{
        $DBAdapter = new DBAdapter;
   
        $query = "SELECT AUTO_pre_name, AUTO_current, AUTO_length

                        FROM sys_autono

                        WHERE AUTO_prefix = '$prefix'";

        $result = $DBAdapter -> runQueryDirect($query);


        $autoPreName; //prefix name
        $autoCurrent; //current number
        $autoLength; //length of the auto number

        if($result)
        {
            while($row = mysql_fetch_array($result))
            {
                $autoPreName = $row["AUTO_pre_name"];
                $autoCurrent = $row["AUTO_current"];
                $autoLength = $row["AUTO_length"];
            }

            //generate the auto number
            $autoNumber = $autoPreName . str_pad($autoCurrent, $autoLength, "0", STR_PAD_LEFT);
            return $autoNumber;
        }
        else
        {
            return "Error - Auto number not found";
        }
}


Now, after you create one serial number and used it you have to update “sys_autono” so the above function will not create the same number again. The following function is used to do so.

function updateAutono($prefix)
{
        $DBAdapter = new DBAdapter;
   
        $query = "UPDATE sys_autono

                    SET AUTO_current = AUTO_current+1,

                        AUTO_rec_date = curdate(),

                        AUTO_sync = 'N'

                    WHERE AUTO_prefix = '$prefix'";

        return $DBAdapter -> runQueryTrans($query);
}


When you want to generate a serial number all you have to do is this. Call “getAutono” method with the prefix name as the parameter.

$autono = getAutono("APP");

Then you can use that number for the required purpose. And afterwards update the auto number table by calling updateAutono with the prefix name as the parameter.

updateAutono("APP");