Servoy 2020 Documentation
Child pages
  • Customizing the Web Client

Versions Compared

Old Version 6

changes.mady.by.user Paul Bakker

Saved on

compared with

New Version 7

changes.mady.by.user Paul Bakker

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

This example shown the creation of a callback to the Web Client business logic that runs on the Server. create a button element, make is invisible through css (visibility: hidden) and through JavaScript click the button:

Code Block

var html = (<html>
 <head>
  <script>
  <![CDATA[
   var x = 10;
   var y = 10;
   function doCallback() {
    document.getElementById("myCoordinatesCallbackHandler").click()
   }
  ]]>
  </script>
 </head>
 <body>
  <button id="myCoordinatesCallbackHandler" onclick="javascript:globals.myCoordinatesCallbackMethod(browser:x, browser:y)" style="visibility: hidden">dummy</button>
 </body>
</html>).toXMLString().replace(']]>', '').replace('<![CDATA[', '');

Interacting with the browser environment through the WebClientUtils plugin

...

Inside the body a button is placed with a onclick event handler that is prefixed with "javascript:", followed by a global method called "myCoordinatesCallbackMethod" that should be defined in the Solution.

The call to "globals.myCoordinatesCallbackMethod()" in the onclick handler is setup to send 3 arguments into the callback: the first two are local, browser-side variables "x" and "y", while the third is a hardcoded false value.

The "browser:" prefix on the argument indicates that the value of a browser-side variable should be included in the callback.

The doCallback() function is a little helper function that can be called by browser-side logic to programmatically perform the click on the button.

Through the style attribute on the button, the button is made invisible to the user, while remaining programmatically clickable.

Code Block

var html = (<html>
 <head>
  <script>
  <![CDATA[
   var x = 10;
   var y = 10;
   function doCallback() {
    document.getElementById("myCoordinatesCallbackHandler").click()
   }
  ]]>
  </script>
 </head>
 <body>
  <button id="myCoordinatesCallbackHandler" onclick="javascript:globals.myCoordinatesCallbackMethod(browser:x, browser:y, false)" style="visibility: hidden">dummy</button>

...


 </body>
</html>).toXMLString().replace(']]>', '').replace('<![CDATA[', '');

Interacting with the browser environment through the WebClientUtils plugin

The WebClientUtils plugin on 

  •  
      • CDATA
      • Watch out for self closing divs
    • Manage custom StyleSheets inside Servoy and include them into the Web Client using the following code:
      var style = solutionModel.getStyleSheet(name).getText();
      .....

...