Sencha/ExtJs: Timer, Task used for a progression bar (Part2)

In a previous post, I have introduced the Timer and Task components of Sencha framework.

In this example more advanced, we will use the components timer/task of Sencha in order to show a progression bar in client side after the submitting of an business action to server. Each request sent by a client is identified by a requestID in order to get and display the progression’s state to the user. We will use the ConcurrentHashMap class in order to store the progression of each request sent by the client. ConcurrentHashMap class is a simple alternative for HashMap, and it offers a means of improving concurrency beyond that of normal HashMaps in order to eliminate the need for a synchronized blocks.

CLIENT SIDE:
First, we will start will create a button in order to send a request to server and start the timer:

Here, as explained in a previous post we will use the onbeforeunload javascript event in order to detect an exit (close, reload, click clink) of current page during the processing of user’s request on server side.

//Listener on Onload of window screen
addBeforeUnloadHandler();
function addBeforeUnloadHandler() {
window.onbeforeunload = function(){ return 'Warning currently an action is submitted to server, if you leave the page, the unsaved work could be lost!';} ;
}
function removeBeforeUnloadHandler() {
window.onbeforeunload = null;
}

Here, it is the progression task updateWaitDialogProgressionTask which will be started by the timer. This task will call a method updateWaitDialogProgression sending the request to server in order to get the progression’ state of client request.

On client side, the following method is the most important code. This method updateWaitDialogProgression is called by the progression task updateWaitDialogProgressionTask.
It will send a request to server and decode the JSON response in order to update the progress bar with the current state on server side.

SERVER SIDE:
On the server side, we will use the controllers based on Spring MVC.

The Map containing the states for all request sent by clients:

// BUSINESS
public final static ConcurrentHashMap<String, Float> progressionByRequestId = new ConcurrentHashMap<String, Float>();

The POJO to receive the parameters sent from CLIENT to SERVER:

// POJO to receive the parameters sent from CLIENT to SERVER
private class SaveBusinessCommand {
// Identifiy the request and is used to display the progression bar to the user.
private String requestID;
public final String getRequestID() {
return requestID;
}
public final void setRequestID(String requestID) {
this.requestID = requestID;
}
}

The progressbar displays the progression of action’s processing on server side: 25%

The progressbar displays the progression of action’s processing on server side: 75%

If during the processing action on server side, the user tries to exit the current page, (for example with a “Refresh”):

…then the code will display a confirmation message:

Click on “Cancel” button…

When the request is done, the following message is displayed and the detection of page’s exiting is disabled:
…so, if the user tries again to exit the current page, no message is displayed again.

So, in this post, we have seen an example of implementation of Sencha components used for a progressbar. There are other application of Timers: Lock a business object on server from client side (via cyclic ajax request).