ProgressBar Example

copy link

Introduction

In this article we'll see how to integrate a progress bar type component into the RD3 graphics engine using Progress.js.
Attached you can also find the example project for the FLUID graphics engine.
We want to obtain this result:

Definition in the IDE

First, in the project we created a client library called ID Progress Bar and defined properties, methods, and events:

The progress, duration and easing properties are used to set the percentage that must be shown initially and with which animation, while the other properties are used to configure the layout of the component.
The OnClick event is fired server side when the component is clicked, while the OnProgress event is fired during the animation to notify that the value of the progress property has changed.
The animate method is used to set the progress and duration properties in a single call (normally used after opening the form when you want to change the progress status).

Then, a form was created into which the client library was dragged.
In the Load event, the component is initialized by setting its layout properties and the initial progress value.

Client-side wrapper class

The progressbar.js library downloaded from the reference site was copied into the custom directory and an IDProgressBar.js JavaScript file was created that contains the code of our wrapper class.

Note: We did not change the Desktop.htm or Desktop_sm.htm files, because the IDProgressBar.js file is loaded automatically, while the progressbar.js file is loaded by the IDProgressBar.js wrapper class when the form is opened.

In the JavaScript class, the constructor was defined in which some default values were set for some properties, and an extension of the CustomElement class was defined.

The progress property was defined to intercept the property change by the server. In the setter, if the component has not yet been created, the value is saved in a temporary variable, this._progress, otherwise the graphic component is updated immediately.

Loading progressbar.js

The Init method in which the progressbar.js JavaScript file is loaded was defined and is invoked immediately in order to load the JavaScript as soon as possible (see call IDProgressBar.Init();). To make sure that the file is loaded just once, the static variable IDProgressBar.inited was used. In fact, if there are multiple instances on screen, they do not all need to load the progressbar.js file.

Creating the component

The Realize method was defined in which the element is built through the classes and methods of the "native" progressbar.js library.
After having created the object, the value is set by reading the property. If the duration property is greater than 0 it is animated.
Finally, if the OnClick event has been implemented server side, the graphic object is made clickable, the click is intercepted and, when it arrives, it is notified to the server. This can be helpful to cut down on messages to the server if the latter is not interested in certain events.

Finally, the animate method was defined in order to be able to change the current progress value with animation, firing the OnProgress event every 250ms. The progress and duration properties are also updated server side.

Changed on: 17/11/2023 / From version: 20.0.7800

ProgressBar Example

Introduction

Definition in the IDE

Client-side wrapper class

Loading progressbar.js

Creating the component

See also

Is this article helpful?

Need more help?