CodeProject: Asynchronous JavaScript Programming using Humax. Free source code and programming help

Report Article

Discuss

Send to a friend

1 vote for this Article.

Popularity: 0.00 Rating: 1.00 out of 5

Note: This is an unedited contribution. If this article is inappropriate, needs attention or copies someone else's work without reference then please Report This Article

Download humax_async_demo - 7.64 KB

Download Humax v0.2.1 at http://humax.sourceforge.net for API reference with extensive tutorials.

Pre-requisite

You need to know Humax delegate concepts in JavaScript. Visit http://humax.sourceforge.net/tut/2007/oopart3.html.
Optionally Humax JavaScript Package System. Visit http://humax.sourceforge.net/tut/2008/pack1.html.

Introduction

Asynchronous operations are typically used to perform long running tasks and tasks which are not expected to be running in the current path of execution. For example, your programm renders two data-intensive grid in different part of the UI by clicking a button. Assume that, you should immediately display one brief message of the operation. In this case, you can use asynchronous pattern for grid rendering part.

Humax introduces asynchronous programming pattern in version 0.2.1. It uses Humax delegates in association with JavaScript's setTimeout method.

A delegate which may either single cast delegate or multicast delegate is required to invoke a method asynchronously. Instead of calling invoke in the delegate, beginInvoke is used to invoke a method asynchronously. In addition to the parameters as the method you want to invoke asynchronously, it has one more parameter (which should come in first ordinal), wich refers the callback method.

The callback executes once the asynchronous call finishes its execution.

AsyncResult

The callback method should have only one parameter of type AsyncResult. It has following methods:

getResult(). Returns result of the asynchronous method i.e return value.
getSource(). Returns from which object the asynchronous method executed.

Example

Let us have a html page, which gives you the "n"th value of a fibonacci series. It provides one textbox and a button.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Humax Asynchronous Programming</title>
        <script type="text/javascript" src="humax.js"></script>
        <script type="text/javascript">                    
            Humax.require("asyncScript");
        </script>
    </head>
    <body>
        <div>Enter a number to get fibonacci number at this place: <input type="text" id="fibText" />
        <input type="button" id="getButton" onclick="getButton_onclick()" value="Get" /></div>
        <div id="output">Output</div>
    </body>
</html>

In the above code requires a package "asyncScript". It contains the definition of "Fibonacci" class. And the event handler method "getButton_onclick()".

HxTest.Fibonacci = function()
{        
    this.AsyncFibonacci = new Humax.MulticastDelegate("AsyncFibonacci", Function("n",""));
    this.AsyncFibonacci.addTarget(this.getValueAt, this);
}

HxTest.Fibonacci.prototype = 
{        
    getValueAt : function(n)
    {
        if(isNaN(n)) return -1;
        if(n <= 2) return n-1;
        else
        {            
            var nthvalue = 0;
            var n1 = 0;
            var n2 = 1;
            
            for(var i = 3; i <= n; i++)
            {
                nthvalue = n1 + n2;
                n1 = n2;
                n2 = nthvalue;
            }
            
            return nthvalue;
        }
    }    
}

The Fibonacci type contains a method "getValueAt" which receives "n"th number as input and returns value of "n"th fibonacci series. Note that the constructor defines a MulticastDelegate on which the getValueAt is registered.

function getButton_onclick()
{
    var fib = new HxTest.Fibonacci();
    fib.AsyncFibonacci.beginInvoke(fibCallback, parseInt(document.getElementById("fibText").value));
    document.getElementById("output").innerHTML = "Calculating...";    
}

The getButton's onclick event handler create new instance of HxTest.Fibonacci and call AsyncFibonacci asynchronously. In order to get the "n"th value, it declares the fibCallback as callback method. Note that the next code just display "Calculating..." as message in the "output" div.

function fibCallback(asyncResult)
{
    document.getElementById("output").innerHTML = asyncResult.getResult();
}

The fibCallback method receives the instance of Humax.AsyncResult as argument. The Humax assigns result of the method and object source into this instance.

By beginInvoke, now you can get the return value of one or more methods those are added in a Humax.MulticastDelegate.

Note that you can set the delay time of asynchronous invocation by setting Humax.AppConfig.asyncInvokeDelayTime. The system default value is 100 milli seconds.

For more details or your contribution in Humax web framework, visit http://humax.sourceforge.net or
write me to udooz@hotmail.com.

License

This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License

About the Author

M Sheik Uduman Ali

Working as a product designer in iSOFT - An IBA Healthcare group company at Chennai, India.

Company:	iSOFT
Location:	India

Asynchronous JavaScript Programming using Humax