NextGen Consulting

Implementing Asynchronous UI

When designing an application front end UI, it is always highly desirable to provide friendly, intuitive and pleasant user experience while they are interacting with our application.

One of the most annoying phenomena happens when the UI seems to be freezed while waiting for a lengthy task  to complete.

In order to enhance user experience and avoid possible frustration, it is recommended to provide an interactive visual feedback which continuously updates the human user about the current status of the task, while allowing them to continue free interaction their UI.

In the following example I shall demonstrate how to divert a task to a separate thread and allow the user to continue interacting with the UI for other tasks. I shall also show how two independent front end tasks can interact one with each other without interfering UI operations.

 

Task Panel

The following panel demonstrates a simple UI that allows user interaction with a task. The panel has the following controls:

• Progress Bar   –    a gauge which continuously presents percentage of task completion.
• Message line   –    displays task status
• Start Button    –    allows the user to start the task
• Stop Button     –    allows the user interrupt and stop the task
• Clear Button    –   clears the progress bar presentation to zero.

 

 

 

Progress Bar

The following picture shows the properties of the Progress Bar control. We limit the process bar values to a range of 0 to 100.

 

 

Background Task: Task A

Task A is a special ‘background’ task. We use the code bellow to define task A.

Task A is an instance of the class UifTask. We override the following parts:

doInBackround()

This part contains our main task logic, a loop which iterate 100 times, each sends the Thread to sleep for 100 ms).

Note that within each iteration the code can interact with form variables to check their status. In our example, we use the boolean variable stopA to control the process and stop the task at any time.

The code also updates the task internal property about its progress status ( backTaskA.setProgress(i) ).

Note that the Clear button is disabled while the task is running. However, the ‘Stop’ button is always enabled and can be used any time while the task is running.

 

Done()

This part is always executed after the main part either finished or interrupted.

 

 

 

Here are an additional code snippets, showing the form variables definitions and buttons action event handlers:

Form Variables:

 

 

 

Task A event handlers:

Let’s click the Start button to run Task A:

5% completed

 

50% completed

 

100% completed

 

Note that the ‘Clear’ button is now enabled again.

 

Intruppting the Task

Let’s run again – this time we interrupt and stop the task after 75 iterations:

 

 

Controlling second Task

Now let us enhance our example to show how Task A can trigger and stop another task, while the start and stop thresholds levels can be set interactively by the user.

 

Task B Panel

We replicate our first panel, this time we add several controls to allow interactive threshold setting.

Each threshold level can be set independently. Each threshold level becomes effective only if its respective check box is checked, otherwise it is ignored.

 

To carry out this two process interaction, we copy the code created earlier for task A, and change relevant variables to refer to Task B:

 

Note the following line of code which was added to the Task B code:

 

The code validates that the ‘Stop’ threshold value is checked, and then retrieves Task A progress value to compare it with the value entered by the user.

To check for start threshold level, I have added the following line of code into Task A definition:

 

Task B Event Handlers

 

Running Two Independent Tasks

We now have the following panels ready for testing.

 

Starting Task A by clicking the Start A button. Task A running…

 

Task A reaches 50% level, Task B is automatically initiated.

 

Task A passed 75% – Task B is automatically stopped.

 

 

 

View it live

View live Asynchronous UI demonstration.