1 of 7

Adapting the Application

Thinfinity VirtualUI not only exposes the original application on the web browser, it also allows you to integrate, extend it and customize its look using web resources.

Read more:

· Customizing the Web Page

· Programming VirtualUI

Customizing the Web Page

By default, the applications are loaded in the app.html page, located in the VirtualUI web directory. However, if you need to change the look and feel, add a new functionality, etc., you can achieve this by loading the application in a different web page with the use of a virtual path.

Read more:

****

Preparing the Web Page

Create a new directory and the web page where the application will run. You can use app.html as a template. In order for the application to work in the browser, the page must have, at least:

A reference to the thinfinity.virtualui.css stylesheet.
A reference to the virtualui.sdk.min.js javascript library.
A div named 'virtualui' that will work as 'desktop' for the application.
The necessary code to create an instance of the Thinfinity.VirtualUI class, with a call to the connect() method.

For example:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi"/>
 <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.connect();
 });
 </script>
 <div id="virtualui" style="position:absolute;display:none;"></div>
</body>
</html>

Starting from this basic page, you can change the windows' style, add new html content and interact programmatically with the executed application.

Thinfinity VirtualUI Server Page Load Acheme

In the previous example page you can see references to Thinfinity VirtualUI files (a stylesheet and a Javascript file). It's not necessary for those common files to be replicated in each virtual path folder.

The server will handle each http request from a virtual path in the following order:

1) Search for the page locally, in the folder assigned to the application's virtual path.

2) Search for the page starting in the Thinfinity VirtualUI root directory.

Read more:

· Customizing Settings

****

Customizing Settings

After creating the directory and the web page, inform Thinfinity VirtualUI of their location by defining a virtual path for the application and indicating which page will be loaded by default.

In order to set a virtual path for the application:

Open the Thinfinity VirtualUI Server Manager.
Go to the 'Applications' tab.
Add the new application or select it from the list.
Click on the 'Edit' button.
Set the Home Page. Press the 'Open' button and search for the location of your customized home page.

You can modify the virtual path name.
Press 'OK' and 'Apply'.

When the application is loaded —through the icon in the index page or typing the url to the full virtual path—, Thinfinity VirtualUI will open the page that was specified in the 'Home Page' field of the application profile, and it will show the application.

Read more:

· Programming VirtualUI

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).

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:

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.

Preparing the Web Page

Create a new directory and the web page where the application will run. You can use app.html as a template. In order for the application to work in the browser, the page must have, at least:

A reference to the thinfinity.virtualui.css stylesheet.
A reference to the virtualui.sdk.min.js javascript library.
A div named 'virtualui' that will work as 'desktop' for the application.
The necessary code to create an instance of the Thinfinity.VirtualUI class, with a call to the connect() method.

For example:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi"/>
 <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.connect();
 });
 </script>
 <div id="virtualui" style="position:absolute;display:none;"></div>
</body>
</html>

Starting from this basic page, you can change the windows' style, add new html content and interact programmatically with the executed application.

Thinfinity VirtualUI Server Page Load Acheme

The server will handle each http request from a virtual path in the following order:

1) Search for the page locally, in the folder assigned to the application's virtual path.

2) Search for the page starting in the Thinfinity VirtualUI root directory.

Read more:

· Customizing Settings

****

Using ClientSettings from Javascript

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 widget, for the moment). ClientSettings is available in Javascript as a Thinfinity.VirtualUI attribute:

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.