1 of 3

Programming VirtualUI

The virtualui.sdk.min.js javascript library has everything that you need to connect to your application and interact from it from the web page, extending and integrating with your execution environment as much as you wish.

The library has the following classes:

· The Thinfinity.VirtualUI class

· The Thinfinity.JsRO class

Thinfinity.VirtualUI class

This class is necessary and mandatory, because it's the one handling the communication between the browser and Thinfinity VirtualUI Server.

Properties

devMode

Methods

connect

Events

onClose

onError

onLoading

onShow

Read more:

· Handling VirtualUI Events

****

Handling VirtualUI Events

The following example shows how to assign handlers to events available in the VirtualUI object (they can be seen in the javascript console or shown as alerts in the case of errors or disconnections)

<!DOCTYPE html>
<html>
<head>
 <title>Thinfinity VirtualUI - Basic Page</title>
 <link rel="stylesheet" type="text/css" href="css/thinfinity.virtualui.css" />
 <script src="virtualui.sdk.min.js" type="text/javascript"></script>
</head>
<body>
 <script type="text/javascript">
 $(document).ready(function () {
 var virtualUI = new Thinfinity.VirtualUI();
 virtualUI.onError = function (errorMsg) {
 if (errorMsg == null) { errorMsg = ""; }
 alert("Application load failed: " + errorMsg);
 };
 virtualUI.onLoading = function () {
 console.log("Loading...");
 };
 virtualUI.onShow = function () {
 console.log("Application loaded.");
 };
 virtualUI.onClose = function () {
 alert("Application closed.");
 window.close();
 };
 virtualUI.connect();
 });
 </script>
 <div id="virtualui" style="position:absolute;display:none;"></div>
</body>
</html>

Thinfinity.jsRO Class

The Thinfinity.jsRO class helps create interaction between the application and the web that's much more fluid than any other methodology or standard technology available.

This class interacts with the executable file and accesses the data models that are exposed from the application and the properties, methods and events that have been written for each of these models.

In the next chapter we will see how to work with jsRO (Javascript Remote Objects).

Read more:

· Advanced Programming with jsRO

****

Using ClientSettings from Javascript

ClientSettings is an additional interface available in the Thinfinity VirtualUI Library that allows developers to programmatically configure some browser environment layout and behavior settings from their applications (e.g., the mouse movement type).

This interface is available both in the application (C++, C#, Delphi, etc.) and in the browser side, where it was extended to manage some web interface elements (the DockMenu widget, for the moment). ClientSettings is available in Javascript as a Thinfinity.VirtualUI attribute:

var vui = new Thinfinity.VirtualUI();
var clientSettings = vui.ClientSettings;

All ClientSettings attributes have a default value that determines the typical behavior in each case. Developers can change it by setting new values to these attributes, which override the defaults before the connection starts.

To hide the mouse pointer and remove the “Error Reporting” icon from the DockMenu, just do the following:

var vui = new Thinfinity.VirtualUI();
var clientSettings = vui.ClientSettings;

clientSettings.CursorVisible = false;
clientSettings.DockMenu.ErrorReporting = false;

ClientSettings Applying Order

As most of the ClientSettings values can be applied both in the browser side and the application, we need to define an applying order:

· A value set in the application overrides the default value.

· Any value set in the browser side always overrides any other value.

Read more about how to change browser behavior using ClientSettings.

Handling VirtualUI Events

<!DOCTYPE html>
<html>
<head>
 <title>Thinfinity VirtualUI - Basic Page</title>
 <link rel="stylesheet" type="text/css" href="css/thinfinity.virtualui.css" />
 <script src="virtualui.sdk.min.js" type="text/javascript"></script>
</head>
<body>
 <script type="text/javascript">
 $(document).ready(function () {
 var virtualUI = new Thinfinity.VirtualUI();
 virtualUI.onError = function (errorMsg) {
 if (errorMsg == null) { errorMsg = ""; }
 alert("Application load failed: " + errorMsg);
 };
 virtualUI.onLoading = function () {
 console.log("Loading...");
 };
 virtualUI.onShow = function () {
 console.log("Application loaded.");
 };
 virtualUI.onClose = function () {
 alert("Application closed.");
 window.close();
 };
 virtualUI.connect();
 });
 </script>
 <div id="virtualui" style="position:absolute;display:none;"></div>
</body>
</html>

Thinfinity.jsRO Class

The Thinfinity.jsRO class helps create interaction between the application and the web that's much more fluid than any other methodology or standard technology available.

In the next chapter we will see how to work with jsRO (Javascript Remote Objects).

Read more:

· Advanced Programming with jsRO

****

Programming VirtualUI

The library has the following classes:

· The Thinfinity.VirtualUI class

· The Thinfinity.JsRO class

Thinfinity.VirtualUI class

This class is necessary and mandatory, because it's the one handling the communication between the browser and Thinfinity VirtualUI Server.

Properties

devMode

Methods

connect

Events

onClose

onError

onLoading

onShow

Read more:

· Handling VirtualUI Events

****

Using ClientSettings from Javascript

var vui = new Thinfinity.VirtualUI();
var clientSettings = vui.ClientSettings;

To hide the mouse pointer and remove the “Error Reporting” icon from the DockMenu, just do the following:

var vui = new Thinfinity.VirtualUI();
var clientSettings = vui.ClientSettings;

clientSettings.CursorVisible = false;
clientSettings.DockMenu.ErrorReporting = false;

ClientSettings Applying Order

As most of the ClientSettings values can be applied both in the browser side and the application, we need to define an applying order:

· A value set in the application overrides the default value.

· Any value set in the browser side always overrides any other value.

Read more about how to change browser behavior using ClientSettings.