Hello All,
Here is a requireJS module for creating a loading indicator dynamically through code. In this requireJS module there are four functions,
- showProgressIndicator : In this function the UI of the loading indicator is created and added to the current form.
- dismissLoadingIndicator : In this function the UI of the loading indicator is removed from the current form.
- emptyCallback : This function is used within showProgressIndicator function.
- animateProgressIndicator : This function is used for creating the animation on the image in the loading indicator.
Images used:
- loadingicon.png : Placed this image in the <Iris project>/resources/common folder
Skins used:
- sknFlex10 : The skin for the flex container that shows the loading message
- Background color is set to 2c2c2c with 50% opacity
- sknFlex9 : The skin for flex container that blurs the background form
- Background color is set to 2c2c2c with 100% opacity
- sknLbl10 : This skin for label showing the message on the loading indicator
- Font size set to 100% and Font color set to ffffff
progressIndicatorJS.js requireJS module:
define(function () {return {
/**
* @function showProgressIndicator
*
*/
showProgressIndicator : function (loadingMsg)
{
var form = voltmx.application.getCurrentForm();
var flexBlurBackgroundDuringProgress = new voltmx.ui.FlexContainer({
“centerX”: “50%”,
“centerY”: “50%”,
“height”: “100%”,
“id”: “flexBlurBackgroundDuringProgress”,
“width”: “100%”,
“zIndex”: 9,
“autogrowMode”: voltmx.flex.AUTOGROW_NONE,
“clipBounds”: true,
“isVisible”: true,
“layoutType”: voltmx.flex.FLOW_HORIZONTAL,
“onClick”: this.emptyCallback,
“skin”: “sknFlex10”
}, {}, {});
var flexProgressIndicator = new voltmx.ui.FlexContainer({
“centerX”: “50%”,
“centerY”: “50%”,
“height”: “60dp”,
“id”: “flexProgressIndicator”,
“width”: “80%”,
“zIndex”: 10,
“autogrowMode”: voltmx.flex.AUTOGROW_NONE,
“clipBounds”: true,
“isVisible”: true,
“layoutType”: voltmx.flex.FLOW_HORIZONTAL,
“skin”: “sknFlex9”
}, {}, {});
flexProgressIndicator.setDefaultUnit(voltmx.flex.DP);
var imgLoadingIndicator = new voltmx.ui.Image2({
“bottom”: 5,
“centerY”: “50%”,
“height”: “40dp”,
“id”: “imgLoadingIndicator”,
“left”: “10dp”,
“src”: “loadingicon.png”,
“width”: “40dp”,
“isVisible”: true,
“skin”: “slImage”
}, {
“imageScaleMode”: constants.IMAGE_SCALE_MODE_MAINTAIN_ASPECT_RATIO,
“padding”: [0, 0, 0, 0],
“paddingInPixel”: false
}, {});
var lblLoadingIndicator = new voltmx.ui.Label({
“bottom”: 10,
“centerY”: “50%”,
“id”: “lblLoadingIndicator”,
“left”: 10,
“text”: loadingMsg+" …",
“width”: “70%”,
“zIndex”: 1,
“isVisible”: true,
“skin”: “sknLbl10”,
“textStyle”: {
“letterSpacing”: 0,
“strikeThrough”: false
}
}, {
“contentAlignment”: constants.CONTENT_ALIGN_MIDDLE_LEFT,
“padding”: [0, 0, 0, 0],
“paddingInPixel”: false
}, {
“textCopyable”: false
});
flexProgressIndicator.add(imgLoadingIndicator, lblLoadingIndicator);
form.add (flexBlurBackgroundDuringProgress);
form.add (flexProgressIndicator);
this.animateProgressIndicator();
},/** * @function dismissLoadingIndicator * */ dismissLoadingIndicator : function () { var form = voltmx.application.getCurrentForm(); form.remove (form.flexBlurBackgroundDuringProgress); form.remove (form.flexProgressIndicator); }, /** * @function emptyCallback * */ emptyCallback : function () { }, /** * @function animateProgressIndicator * */ animateProgressIndicator : function () { var currentForm = voltmx.application.getCurrentForm(); var transform1 = voltmx.ui.makeAffineTransform(); transform1.rotate3D(0,0,1,0); var transform2 = voltmx.ui.makeAffineTransform(); transform2.rotate3D(90,0,1,0); var transform3 = voltmx.ui.makeAffineTransform(); transform3.rotate3D(180,0,1,0); var transform4 = voltmx.ui.makeAffineTransform(); transform4.rotate3D(270,0,1,0); var transform5 = voltmx.ui.makeAffineTransform(); transform5.rotate3D(360,0,1,0); var animationObject = { 0: {"transform": transform1,"opacity":1,"stepConfig":{"timingFunction":voltmx.anim.LINEAR}}, 25: {"transform": transform2,"opacity":1,"stepConfig":{"timingFunction":voltmx.anim.LINEAR}}, 50: {"transform": transform3,"opacity":1,"stepConfig":{"timingFunction":voltmx.anim.LINEAR}}, 75: {"transform": transform4,"opacity":1,"stepConfig":{"timingFunction":voltmx.anim.LINEAR}}, 100: {"transform": transform5,"opacity":1,"stepConfig":{"timingFunction":voltmx.anim.LINEAR}} }; var animationConfigObject = { "duration":1, "iterationCount":0, "direction":voltmx.anim.DIRECTION_NONE, "fillMode":voltmx.anim.FILL_MODE_NONE }; var animationCallbackObject = {"animationEnd" : function(){}}; currentForm.imgLoadingIndicator.animate(voltmx.ui.createAnimation(animationObject),animationConfigObject,animationCallbackObject); }
};
});
How to use this progressIndicatorJS.js requireJS module from a form controller where we want to show the loading indicator?
Change the form controller code structure as shown below. This adds the "progressIndicatorJS.js" requireJS module as a dependency to the form controller and ensures that the progressIndicatorJS.js file is loaded into memory before the form controller is loaded. Then we can use the functions present in "progressIndicatorJS.js" requireJS module from the form controller.
define(['progressIndicatorJS'], function (progressIndicatorJS) {showProgressIndicator = function () { progressIndicatorJS.showProgressIndicator("Service call in progress"); }; dismissProgressIndicator = function () { progressIndicatorJS.dismissLoadingIndicator(); }; return { showProgressIndicator : this.showProgressIndicator, dismissProgressIndicator : this.dismissProgressIndicator };
});
Use the form controller function "showProgressIndicator" and "dismissProgressIndicator" to show and dismiss the loading indicator anywhere in the form. We can even load "progressIndicatorJS.js" requireJS module at the application level in any of the app-lifecycle events and use the function in this requireJS module to show and dismiss the loading indicator.
Attached RequireJSModule-For-LoadingIndicator.zip contains a video of the loading indicator.
Thanks and Regards,
Venkata Raju Bankapalli
RequireJSModule-For-LoadingIndicator.zip