1 of 3

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 Virtual Path for the Application

****

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:

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:

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

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

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

****