Hi,
this is my second tutorial for XojoWE.
The problem:
You have a webapp where some processes takes a long time. Most of us want to display the users, that there something happen in the background. All operations are calculated by the webserver and the results are send back to the user until completing ALL calculations. In the meantime the app is not really blocked there is no indicator that the app do something.
One solution is to put all the time-consuming operations in the run-event of a timer. In the main-thread you can display a wait-spinner or a modal dialog or so.
But, me personally is this more a “workaround” and not a solution. If you have several time-taking functions, you’ll need a lot of timer or your code will become messy.
My solution:
My solution is to manipulate the DOM of your app with Javascript. (Xojo-Staff will remind, that this is not officially supported - meh).
What do you need:
1. Two JavaScript-Functions:
Place this Code into you App.HTMLHeader-Property:
<script>
function show_indicator() {
var x = document.getElementsByClassName("progress_hidden");
for (var i = 0; i < x.length; i++) {
x[i].className = 'progress_visible';
}
}
function remove_indicator() {
var y = document.getElementsByClassName("progress_visible");
for (var i = 0; i < y.length; i++) {
y[i].className = 'progress_hidden';
}
}
</script>2. Two CSS-Classes:
Also place this code in your App.HTMLHeader-Property:
<style>
.progress_visible{
width: 100% !important;
height: 100% !important;
z-index: 100000 !important;
background-color: rgba(221, 221, 221, 0.4);
left: 0px !important;
top: 0px !important;
}
.progress_hidden{
display: none !important;
}
<style>3. A Xojo-Webstyle:
Create in the XojoIDE a Webstyle and name it “progress_hidden”
4. A ContainerControl with a Progresswheel:
Create a ContainerControl, place a ProgressWheel inside and add the CC to your main Page.
Apply the Webstyle “progress_hidden” to this CC.
5. Two Xojo-Funtions:
Add the following Functions to your App:
Sub RegisterWaitindicator(cntrl as WebControl)
WebPage1.ExecuteJavaScript("document.getElementById(""" + cntrl.ControlID + """).onclick = show_indicator")
End SubSub RemoveWaitIndicator()
WebPage1.ExecuteJavaScript("remove_indicator();")
End SubHow to use:
Select the button which starts a time-consuming operation. Add the following code into the Shown-Event:
app.RegisterWaitindicator(me)And on the end of the time-consuming function you’ll have to add the following:
App.RemoveWaitIndicator()
[h]That’s it![/h]
How it works:
When the Shown-Event of the webbuttons raises, the Xojo-function “RegisterWaitindicator()” is called. Inside this Function a little Javascript adds an own, non xojo-driven, click-event to the webbutton.
Now, if you click the webbutton, this event will be fired and the custom JS-Method in your App.HTMLHeader is called. This JS-Method applies another style to your ContainerControls, which displays it with the Progresswheel.
After completing the time-consuming method the method “RemoveWaitIndicator” calls the JS-Funktion which make the CC invisible again.
All this is done in the user-browser, so xojo don’t crash.
Here is a test project:
https://www.dropbox.com/s/kzcdk78srx15hmj/WaitIndicatorProject.xojo_binary_project?dl=0
Bye
Lars
