I had a client that really didn’t like the “Loading…” in the upper right. Some users don’t notice it, and they think the screen is frozen. There is the busy plugin, but as you all know, sometimes its a pain to run all functions through the busy plugin. So, below is a simple example of how to change the Loading… to something different. This shows how to change the message, and the location. In this example, we change “Loading…” to an animated spinner gif, and move it to the center of the screen. This works by adjusting the SPAN element that Servoy uses, so Servoy takes care of hiding and showing it.
Written in Servoy 6
Requires the WebClientUtils plugin
var js = 'function centerElem(elem) {\
var parent = window;\
elem.css({\
"background-color": "transparent",\
"position": "absolute",\
"top": ((($(parent).height() - elem.outerHeight()) / 2) + $(parent).scrollTop() + "px"),\
"left": ((($(parent).width() - elem.outerWidth()) / 2) + $(parent).scrollLeft() + "px")\
});\
}\
centerElem($("#indicator"));\
$("#indicator").html("<img src=\'http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif\' />");'
plugins.WebClientUtils.executeClientSideJS(js)
Note: for simplicity the code references the ajax-loader.gif on another website, but in your real code you should download the gif and host it in your Servoy ROOT/images directory, and modify the reference appropriately (/images/ajax-loader.gif).
Here is an example, as you can see the spinner in the middle of the screen.
In my solution setup, I generally only have one main form which contains tab panels, and I swab forms in and out of the tab panels in the navigation framework (so I never change the main form). So, in my case I only have to run this code once, onSolutionOpen. If you switch main forms, you may need to run it multiple times, or find a different approach (I haven’t tried it with other types of navigation)
