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:

1{
2    id: 'myButtonID',
3    xtype: 'button',
4    text: 'Save business',
5    handler: function() {
6        saveBusinessAndStartRunner();
7    }
8}

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.

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

Then, we define several objects:

1// The messageBox containing the progress bar 
2var pleaseWaitDialog = null;
3// The runner of Sencha's timer
4var runner = new Ext.util.TaskRunner();
5// The requestID generated on client side
6var requestId = Math.floor(Math.random()*9999999);

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.

1// Progression Task
2var updateWaitDialogProgressionTask = {
3    run:updateWaitDialogProgression,
4    interval: 1000
5}

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.

01// Method called at each task's execution
02var updateWaitDialogProgression = function() { 
03    if (null == pleaseWaitDialog) {
04        return;
05    } // end-if
06 
07    // Call the server in order get the pregresssion state of requestID previously sent
08    Ext.Ajax.request(
09        {
10            url: 'myController.do?action=handleGetProgression',
11            method: 'GET',
12            params: {
13                requestID:requestId
14            },
15             
16            success: function (response, options) {
17                var jsonData = Ext.decode(response.responseText);
18                var currentprogress = jsonData.data;
19                if (currentprogress >= 100) {
20                    pleaseWaitDialog.updateProgress(1, "");
21                    runner.stop(updateWaitDialogProgressionTask);
22                    pleaseWaitDialog.hide();
23                    removeBeforeUnloadHandler();
24                    Ext.MessageBox.alert('Message title', 'The task is finished correctly!!');
25 
26                } else if (currentprogress > -1) {
27                    pleaseWaitDialog.updateProgress(currentprogress / 100, "");
28 
29                } else if  (currentprogress == -1) {
30                    runner.stop(updateWaitDialogProgressionTask);
31                    pleaseWaitDialog.hide();
32                    Ext.MessageBox.alert('Message title', 'A error is occured in server side!!!');
33                } // end-if
34            },
35 
36            // Error, failure in server side
37            failure: function (response, options) {
38                runner.stop(updateWaitDialogProgressionTask);
39                pleaseWaitDialog.hide();
40                displayExceptionAlert();
41            }
42 
43        }
44    );
45}

At last, the following function is the callback method the above button to send a request for the “handleSaveBusiness” action to the server and start the timer on client side.

01// Callback to: 
02// - send a request for the "handleSaveBusiness" action to the SERVER
03// - start the timer on CLIENT side
04function saveBusinessAndStartRunner() {
05    pleaseWaitDialog = Ext.MessageBox.show(
06        {
07            title: 'Alert',
08            progressText: '- JavaBlog.fr - ProgressionBar with Sencha',
09            width: 300,
10            progress: true,
11            closable: false
12        }
13    ); 
14    // Start the timer
15    runner.start(updateWaitDialogProgressionTask);
16 
17    // Send a ajax request to the Save Business action
18    Ext.Ajax.request(
19        {
20            url: 'myController.do?action=handleSaveBusiness',
21            params : {
22                requestID:requestId
23            },
24            success: function(response, opts) {
25            },
26            failure: function (response, options) {
27                // displayExceptionAlert();
28            }
29             
30        }
31    );
32}

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:

`1`	`// BUSINESS`

`2`	`public` `final` `static` `ConcurrentHashMap<String, Float> progressionByRequestId =` `new` `ConcurrentHashMap<String, Float>();`

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

01// POJO to receive the parameters sent from CLIENT to SERVER
02private class SaveBusinessCommand {
03    // Identifiy the request and is used to display the progression bar to the user.
04    private String requestID;
05    public final String getRequestID() {
06        return requestID;
07    }
08    public final void setRequestID(String requestID) {
09        this.requestID = requestID;
10    }
11}

The POJO returned to CLIENT in JSON format:

01// POJO returned to CLIENT in JSON format
02private final class SaveBusinessCommandResultsForExJS {
03    private boolean success;
04 
05    public SaveBusinessCommandResultsForExJS(boolean sucess) {
06        this.success = sucess;
07    }
08    public final boolean isSuccess() {
09        return success;
10    }
11    public final void setSuccess(boolean success) {
12        this.success = success;
13    }
14}

The Callback for the handleGetProgression action. This callback is used to get the progression state for a requestID sent by the CLIENT:

01// Callback to get the progression state for a requestID sent by the CLIENT
02public ModelAndView handleGetProgression(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, InterruptedException {
03    logActionName("handleGetProgression");
04    SaveBusinessCommand command =   null;
05    {
06        command = new SaveBusinessCommand();
07        ServletRequestDataBinder binder = new ServletRequestDataBinder(command);
08        binder.bind(request);
09    }
10 
11    Float progression = progressionByRequestId.get(command.getRequestID());
12    if(progression==null){
13        progression = 0f;
14    }
15    try {
16        Map<String, Object> model = new HashMap<String, Object>();
17        model.put("success", "true");
18        model.put("data", "" + Math.round(progression));
19        return new ModelAndView("jsonView", model);
20    } catch (Throwable exc) {
21        return handleException(exc, "handleGetProgression");
22    } // end-try
23}

The Callback for the handleSaveBusiness action:

01// Callback for the handleSaveBusiness action
02public ModelAndView handleSaveBusiness(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, InterruptedException {
03    logActionName("handleSaveBusiness");
04 
05    SaveBusinessCommand command =   null;
06    {
07        command = new SaveBusinessCommand();
08        ServletRequestDataBinder binder = new ServletRequestDataBinder(command);
09        binder.bind(request);
10    }
11     
12    // RequestID
13    String requestID = command.getRequestID();
14     
15    progressionByRequestId.put(requestID, 0f);
16    {
17        try {
18            progressionByRequestId.put(requestID, 0f);
19            {
20                // Incrementation
21                // Calculating for each iteration the advancement
22                // 25 corresponding to the range for this "for" loop
23                // => In the business, we can assign a range of progression to each block of code (for others)
24                float divBy = 10; // number of iterations in "for" loop
25                float progression = 25 / divBy;
26                for (int i = 0; i < divBy; i++) {
27                    try {
28                        progressionByRequestId.put(requestID, progressionByRequestId.get(requestID) + progression);
29                        long numMillisecondsToSleep = 1000; // 1 second
30                        Thread.sleep(numMillisecondsToSleep);
31                    } catch (InterruptedException e) {
32                    }
33                }
34            }
35 
36            progressionByRequestId.put(requestID, 25f);
37            {
38                // Incrementation
39                // Calculating for each iteration the advancement
40                // 75 corresponding to the range for this "for" loop
41                // => In the business, we can assign a range of progression to each block of code (for others)
42                float divBy = 20; // number of iterations in "for" loop
43                float progression = 75 / divBy;
44                for (int i = 0; i < divBy; i++) {
45                    try {
46                        progressionByRequestId.put(requestID, progressionByRequestId.get(requestID) + progression);
47                        long numMillisecondsToSleep = 1000; // 1 second
48                        Thread.sleep(numMillisecondsToSleep);
49                    } catch (InterruptedException e) {
50                    }
51                }
52            }
53 
54            progressionByRequestId.put(requestID, 100f);
55 
56        } catch (Exception e) {
57            progressionByRequestId.put(requestID, -1f);
58            String errorMessage = "An error occured";
59            if (logger.isErrorEnabled()) {
60                logger.error(errorMessage,e);
61            } // end-if
62        } // end-try
63    }
64 
65    // POJO to send to CLIENT in JSON format
66    SaveBusinessCommandResultsForExJS output = new SaveBusinessCommandResultsForExJS(true);
67    try {
68        progressionByRequestId.put(command.getRequestID(), 100f);
69        {
70            Map<String, Object> model = new HashMap<String, Object>();
71            model.put("success", "true");
72            model.put("data", output);
73            return new ModelAndView("jsonView", model);
74        }
75    } catch (Throwable exc) {
76        return handleException(exc, "handleSaveBusiness");
77    } // end-try
78}

EXECUTION:
After clicking on the button:

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).

Download zip file: sencha_timer_progressbas_part2.zip

Best regards,

Huseyin OZVEREN

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

Related

Leave a Reply Cancel reply

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

Share this:

Related

Leave a Reply Cancel reply

Related Post

Sencha:ExtJs: Measure processing time in web application on client side (Model, Store loadings and AJAX calls)Sencha:ExtJs: Measure processing time in web application on client side (Model, Store loadings and AJAX calls)

Java/Web: GZIP compression with Http Filter, GZIPFilter, GZIPResponseStream, GZIPResponseWrapperJava/Web: GZIP compression with Http Filter, GZIPFilter, GZIPResponseStream, GZIPResponseWrapper

Apache: Commons lang (example StringEscapeUtils.escapeHtml)Apache: Commons lang (example StringEscapeUtils.escapeHtml)