Interacting with the Browser Environment through the WebClientUtils Plugin

The WebClientUtils plugin is a plugin that is not part of the default distribution of Servoy, but is hosted on ServoyForge.

The plugin adds the following capabilities to the Servoy environment:

• Allows to force inclusion of some of the JavaScript libraries Servoy ships with: Servoy by default conditionally includes them onto the Web Client markup only when they are needed. If custom clientside logic requires the library to be available, this can be done using the following code:

   

  plugins.WebClientUtils.addJsReference(SERVOY_WEB_RESOURCES.JQUERY)

   

  For an overview of the version of each JavaScript library that is bundled with Servoy, check the Servoy stack info

• Allows to execute custom JavaScript clientside in the browser, using the .execueClientSideJS(...) function
• Allows adding class attributes to the markup of elements, using .setExtraCssClass(element, classAttribute). The extra class can then be references in custom StyleSheets added to the markup
• Allows for generating callback scripts through .addCallback(), which can then be included into the markup through a non-editable HTMLArea or be part of the code executed client-side using the .executeClientsideJS(...)
• Allows for marking elements as rendered: this hooks deeply into Servoy mechanism for updating the Web Client markup when something changes in the UI. When some custom client-side code modifies the HTML Markup, this change will not automatically be synced back to the server-side running Web Client. when the developer implements the sync using a callback to the Server, any changes made to the UI in the callback method on the server, would normally result in Servoy performing an automatic update of the Web Client's UI in the browser again, because it recorded the changes made in the callback event. By calling the .setRendered(..) on the element(s) that were changed in the callback event in order to sync their state with their state in the browser, Servoy will ignore the updated made to the elements, thus not updated them again in the Web Client's UI. 

For example to center the current webclient form with the WebClientUtils execute the following script in each form onRender: