Follow these steps to integrate a .NET WinForms application with Thinfinity VirtualUI:

1. Open Microsoft Visual Studio.

2. Open the application's project you want to integrate with.

3. Right-click on the project name in the 'Solution Explorer' panel and then select 'Add' - 'Existing Item'. Look for the Thinfinity.VirtualUI.cs file, which is typically located in c:\Program Files\Thinfinity\VirtualUI\Dev\dotNet\.

4. In the program.cs file add a line as follows:

using System;
using System.Windows.Forms;
namespace MyApp
{
 static class Program
 {
 /// <summary>
 /// The main entry point for the application.
 /// </summary>
 [STAThread]
 static void Main()
 {
 new Cybele.Thinfinity.VirtualUI().Start();
 Application.EnableVisualStyles();
 Application.SetCompatibleTextRenderingDefault(false);
 Application.Run(new Form1());
 }
 }
}

1. Compile your program and run it in debug mode.

You will see this message:

If you press the 'Start Web Browser' button, a web browser will open pointing to the application. The application will also open in desktop mode.

1. Alternatively, choose to not show the message and observe on the Windows Tray Bar that the Thinfinity VirtualUI Development Server icon will appear.

You can right-click on the icon, and after that click on the 'Open Web Browser' menu.

A Web browser window will open and your application will be running inside.

1. You can also click on the 'Server Manager' menu of the tray bar icon to access the Development Server Manager.

Read more:

o Compiling and Testing a Delphi Application

o Compiling and Testing a C++ Application

o Registering the Application in Thinfinity VirtualUI Server

o Accessing the App from the Web

o Application Execution Behavior

1. Download the installer from the download page in the Cybele Software site:

http://www.cybelesoft.com/downloads/

1. Execute the installer on the target machine.

1. Select the environments to be installed:

Thinfinity VirtualUI Server

Thinfinity VirtualUI Server is an HTTPS/WebSocket Server that maintains the communication between your app and the web browser. Installing this environment will enable you to configure and run your adapted Windows apps. This is not needed for development purposes but its installation is recommended for testing purposes.

in this installation mode, the Thinfinity VirtualUI Server will be installed as a Windows Service.

Development Environment

This environment is meant to be installed on the developer machine. This mode installs the Thinfinity VirtualUI SDK files that you will need to include or reference in your application's project. It includes also one Thinfinity VirtualUI Server that will execute in 'development' mode, to quickly test your application from a web browser.

1. If you are installing the Server Environment, you will be presented with the following options:

All Components

This is the default option. Choose this for a stand-alone installation, Thinfinity VirtualUI Server will centralize all the connections.

Broker, Web Services and Virtualization Services

Choose this option to install the Broker components if you wish to distribute the connection's load between several installations. Read more about Scaling and Load Balancing.

Reverse Gateway

Choose this option to install the Gateway component if you wish to distribute the connection's load between several installations. Read more about Scaling and Load Balancing.

1. Press Next and wait for the installation process to finish. When it is done, press the 'Finish' button.

Now the application needs to be registered on Thinfinity VirtualUI Server. By doing this, the application will get published on the web server and will be available to be run from the web.

To create an application profile, follow these steps:

1. Open the Thinfinity VirtualUI Server Manager, available in the Start Menu.

2. Go to the 'Applications' tab.

3. Click on the 'Add' button.

4. Name the application and inform the application path and file name.

5. You can check the 'Default Application' option to bypass the Thinfinity VirtualUI landing page and go directly to the selected profile. You can access the rest of the profiles through their virtual path urls.

6. Press 'OK' and 'Apply' on the Server Manager screen.

Now the application is ready to be reached on the Web.

Read more:

· Accessing the App from the Web

· Application Execution Behavior

· The 'Applications' Tab

The application execution behavior will depend on how the application is run.

· Windows Shell

When the application is executed from the Windows Shell, it will behave as a standard Windows application.

· Development Environment

When the application is executed under a Development Environment (such as Microsoft Visual Studio or Embarcadero Delphi), an instance of VirtualUI Server running in development mode will be started, and the application will be seen both as an standard Windows application and as a Web application.

· VirtualUI Sever's Web Page:

If the application is launched from a VirtualUI Server's page, it will run as a web application.

Follow the next steps to access registered applications using the web browser:

1. Open your preferred web browser.

2. Type in the application URL. This URL is composed of the server URL plus the Virtual Path configured for the application, i.e. http://your-machine:6580/MyApp/

   Alternatively, leave the Virtual Path as the root path using just http://your-machine:6580/. In this case, a page with the list of applications will show up, unless you have set a profile to be the default application, in which case you will be connected to the Default Application.

a. Check the 'Open in a new browser window' option if you want the application to be opened in another tab.

b. Click on the corresponding icon of the application you want to access.

1. Authenticated users can log out with the 'Logout' button in the top right corner of the web interface.

Read more:

· Application Execution Behavior

Follow these steps to integrate a C++ application with Thinfinity VirtualUI:

1. Open Visual Studio.

2. Open the application's project.

3. Add the path to the VirtualUI library in the 'Include Directories' field, which can be found in the main menu under Project - Properties - Configuration Properties - VC++ Directories).

1. Add Thinfinity.VirtualUI.cpp to the Source Files.

2. Add Thinfinity.VirtualUI.h to the Header Files.

3. Include Thinfinity.VirtualUI.h in the application`s cpp:

#include "Thinfinity.VirtualUI.h"

1. Create a VirtualUI instance of the program and start it.

BOOL CMFCTestApp::InitInstance()
{
 INITCOMMONCONTROLSEX InitCtrls;
 InitCtrls.dwSize = sizeof(InitCtrls);
 InitCtrls.dwICC = ICC_WIN95_CLASSES;
 InitCommonControlsEx(&InitCtrls);
 CWinAppEx::InitInstance();
 if (!AfxOleInit())
 {
 AfxMessageBox(IDP_OLE_INIT_FAILED);
 return FALSE;
 }
 // Initialize VirtualUI
 VirtualUI vui;
 vui.Start();
 …
 ...
}

1. Compile the program and run it in debug mode.

You will see this message:

If you press the 'Start Web Browser' button, a web browser will open pointing to the application. The application will also open in desktop mode.

1. Alternatively, choose to not show the message and observe on the Windows Tray Bar that the Thinfinity VirtualUI Development Server icon will appear.

1. Right-click on the icon, and after that click on the 'Open Web Browser' menu.

A Web browser window will open and your application will be running inside.

1. Click on the 'Server Manager' menu to access the Development Server Manager.

Read more:

o Compiling and Testing a WinForms Application

o Compiling and Testing a Delphi Application

o Registering the Application in Thinfinity VirtualUI Server

o Accessing the App from the Web

o Application Execution Behavior

UI Remoting is made simple with Thinfinity VirtualUI. All it takes is adding one or two lines of code in your applications, compiling and, then configuring VirtualUI Server to show it.

Read more:

o Compiling and Testing a WinForms Application

o Compiling and Testing a Delphi Application

o Compiling and Testing a C++ Application

o Registering the Application in Thinfinity VirtualUI Server

o Accessing the App from the Web

o Application Execution Behavior

This section covers the basics of Thinfinity VirtualUI as follows:

1. Installing Thinfinity VirtualUI

2. Compiling and testing your WinForms, Delphi or C++ application

3. Registering the application in Thinfinity VirtualUI Server

4. Accessing the application from the Web

Find a more comprehensive reference here:

Development Server Manager

Advanced Programming with jsRO

Server Manager

Follow these steps to integrate a Delphi VCL application with Thinfinity VirtualUI:

1. Open Delphi.

2. Open the application's project.

3. Add the VirtualUI_AutoRun unit to the 'Uses' clause of the project source file. This unit will typically be located in the C:\Program Files (x86)\Thinfinity\VirtualUI\dev\Delphi folder.

program MyApp;
uses
 Windows,
 Forms,
 VirtualUI_AutoRun,
 MyApp.Main in MyApp.Main.pas' {Form1};
{$R *.res}
begin
 Application.Initialize;
 Application.CreateForm(TForm1, Form1);
 Application.Run;
end.

1. Compile the program and run it in debug mode.

You will see this message:

If you press the 'Start Web Browser' button, a web browser will open pointing to the application. The application will also open in desktop mode.

1. Alternatively, choose to not show the message and observe on the Windows tray bar that the Thinfinity VirtualUI Development Server icon will appear.

1. Right-click on the icon, and after that click on the 'Open Web Browser' menu.

A Web browser window will open and your application will be running inside.

1. Click on the 'Server Manager' menu to access the Development Server Manager.

Read more:

o Compiling and Testing a WinForms Application

o Compiling and Testing a C++ Application

o Registering the Application in Thinfinity VirtualUI Server

o Accessing the App from the Web

o Application Execution Behavior

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:

2. Go to the 'Applications' tab.

3. Add the new application or select it from the list.

4. Click on the 'Edit' button.

5. Set the Home Page. Press the 'Open' button and search for the location of your customized home page.

1. You can modify the virtual path name.

2. 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:

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:

Below you'll find a list for all the available demos for Thinfinity VirtualUI :

· Microsoft Access

· Windows Presentation Foundation

· Visual Fox Pro

· Visual Fox Pro 9

· Visual Basic 6 :

    .[Basic Demo](https://www.cybelesoft.com/support/files/DemosVUI/DemoVB6.zip)

    [.Upload Demo](https://www.cybelesoft.com/support/files/DemosVUI/VB6_Upload.zip)

· Visual Basic .Net

· Delphi Demos :

   .[VCLFileTest Demo](https://www.cybelesoft.com/support/files/DemosVUI/VCLFileTest.zip) 

   .[OnUploadEnd Event Demo](https://www.cybelesoft.com/support/files/DemosVUI/UploadDemo-OnUploadEnd.zip) 

   .[ShellExecute Demo](https://www.cybelesoft.com/support/files/DemosVUI/Delphi_ShellExecute.zip)

   .[LibConfig Create Profile Demo](https://www.cybelesoft.com/support/files/DemosVUI/LibConfigCreateProfile.zip)

· Lazarus

· C++ Demos:

   .[C++ Builder Demo](https://www.cybelesoft.com/support/files/DemosVUI/CppBuilder.zip) 

   [.Google Maps Demo ](https://www.cybelesoft.com/support/files/DemosVUI/CppGoogleMaps.zip)

· C#:

   .[Basic Demo](https://www.cybelesoft.com/support/files/DemosVUI/cSharpDemo.zip)

   [.LibConfig Create Profile Demo ](https://www.cybelesoft.com/support/files/DemosVUI/LibConfig_create_profile_CS.zip)

   [.External Auth Provider Demo ](https://www.cybelesoft.com/support/files/DemosVUI/ExternalAuthProvider_CSharp.zip)

· Microsoft Foundation Class Library

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.

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:

****

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:

1. A reference to the thinfinity.virtualui.css stylesheet.

2. A reference to the virtualui.sdk.min.js javascript library.

3. A div named 'virtualui' that will work as 'desktop' for the application.

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

****

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

****

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

****

You can check our public Github for all our available demos :

Public VirtualUI GitHub