Developers's guide
2
Thinfinity® VirtualUI™ UI 1.0
Table of Contents
Introduction
5
Architecture
6
Getting Started
7
1 Installing
...................................................................................................................................
Thinfinity® VirtualUI™
7
2 Compiling
...................................................................................................................................
and testing a WinForms application
9
3 Compiling
...................................................................................................................................
and testing a Delphi application
11
4 Registering
...................................................................................................................................
the application in Thinfinity® VirtualUI™ Server
12
5 Accessing
...................................................................................................................................
the app from the Web
13
6 Application
...................................................................................................................................
Execution behavior
15
16
Server Manager
1 General
................................................................................................................................... 18
2 RDS ................................................................................................................................... 19
3 Applications
................................................................................................................................... 20
.......................................................................................................................................................... 22
Application profile
General ......................................................................................................................................................... 24
......................................................................................................................................................... 25
Credentials
......................................................................................................................................................... 26
Permissions
.......................................................................................................................................................... 27
Weblink profile
......................................................................................................................................................... 28
Permissions
29
Managing the..........................................................................................................................................................
SSL Certificate
.........................................................................................................................................................
30
The Default
Embedded Certificate
.........................................................................................................................................................
31
A Self-signed
Certificate
......................................................................................................................................................... 32
A CA Certificate
4 Licenses
................................................................................................................................... 34
35
SDK Reference
1 Cybele.Thinfinity.VirtualUI
...................................................................................................................................
.NET assembly
35
35
BrowserInfo ..........................................................................................................................................................
Class
Properties......................................................................................................................................................... 35
Brow serWidth ......................................................................................................................................... 35
Brow serHeight ......................................................................................................................................... 36
IpAddress
......................................................................................................................................... 36
ScreenWidth
......................................................................................................................................... 36
ScreenHeight ......................................................................................................................................... 36
Height
......................................................................................................................................... 37
UserAgent
......................................................................................................................................... 37
Username
......................................................................................................................................... 37
Width
......................................................................................................................................... 37
.......................................................................................................................................................... 38
VirtualUI Class
Properties......................................................................................................................................................... 38
Active
Brow serInfo
DevMode
DevServer
Enabled
......................................................................................................................................... 38
......................................................................................................................................... 39
......................................................................................................................................... 39
......................................................................................................................................... 39
......................................................................................................................................... 40
©2014 by Cybele Software, Inc.
Contents
3
StdDialogs
......................................................................................................................................... 40
.........................................................................................................................................................
41
Methods
Dow nloadFile ......................................................................................................................................... 41
Dow nloadPDF ......................................................................................................................................... 41
Start
......................................................................................................................................... 41
Stop
......................................................................................................................................... 41
.........................................................................................................................................................
42
Events
OnBrow serResize
......................................................................................................................................... 42
OnGetUploadDir ......................................................................................................................................... 42
2 Thinfinity.VirtualUI.dll
...................................................................................................................................
ActiveX
42
43
IBrowserInfo..........................................................................................................................................................
Interface
Properties......................................................................................................................................................... 43
Brow serWidth ......................................................................................................................................... 43
Brow serHeight ......................................................................................................................................... 43
Height
......................................................................................................................................... 43
IpAddress
......................................................................................................................................... 44
ScreenHeight ......................................................................................................................................... 44
ScreenWidth
......................................................................................................................................... 44
Username
......................................................................................................................................... 45
UserAgent
......................................................................................................................................... 45
Width
......................................................................................................................................... 45
.......................................................................................................................................................... 45
IVirtualUI Interface
Properties......................................................................................................................................................... 46
Active
......................................................................................................................................... 46
Brow serInfo
......................................................................................................................................... 46
DevMode
......................................................................................................................................... 46
DevServer
......................................................................................................................................... 47
Enabled
......................................................................................................................................... 47
Events
......................................................................................................................................... 48
StdDialogs
......................................................................................................................................... 48
Methods ......................................................................................................................................................... 48
Dow nloadFile ......................................................................................................................................... 48
Dow nloadPDF ......................................................................................................................................... 49
Start
......................................................................................................................................... 49
Stop
......................................................................................................................................... 49
.......................................................................................................................................................... 50
IEvents Interface
......................................................................................................................................................... 50
OnBrowserResize
......................................................................................................................................................... 50
OnGetUploadDir
3 VirtualUI_SDK
...................................................................................................................................
Delphi unit
50
.......................................................................................................................................................... 51
TVirtualUI Class
Properties......................................................................................................................................................... 52
Active
......................................................................................................................................... 52
Brow serInfo
......................................................................................................................................... 53
DevMode
......................................................................................................................................... 53
DevServer
......................................................................................................................................... 53
Enabled
......................................................................................................................................... 54
StdDialogs
......................................................................................................................................... 55
.........................................................................................................................................................
55
Methods
Dow nloadFile ......................................................................................................................................... 55
Dow nloadPDF ......................................................................................................................................... 55
Start
......................................................................................................................................... 55
Stop
......................................................................................................................................... 56
.........................................................................................................................................................
56
Events
©2014 by Cybele Software, Inc.
3
4
Thinfinity® VirtualUI™ UI 1.0
OnBrow serResize
......................................................................................................................................... 56
OnGetUploadDir ......................................................................................................................................... 58
..........................................................................................................................................................
58
TBrowserInfo
Class
Properties......................................................................................................................................................... 59
Width
......................................................................................................................................... 59
Height
......................................................................................................................................... 59
Brow serWidth ......................................................................................................................................... 59
Brow serHeight ......................................................................................................................................... 60
ScreenWidth
......................................................................................................................................... 60
ScreenHeight ......................................................................................................................................... 61
Username
......................................................................................................................................... 61
IPAddress
......................................................................................................................................... 61
UserAgent
......................................................................................................................................... 62
TDevServer .......................................................................................................................................................... 62
Properties......................................................................................................................................................... 63
Enabled
Port
StartBrow ser
......................................................................................................................................... 63
......................................................................................................................................... 63
......................................................................................................................................... 63
4 VirtualUI_AutoRun
...................................................................................................................................
Delphi unit
65
5 JavaScript
...................................................................................................................................
API
65
Deploying .......................................................................................................................................................... 67
68
Modifying the..........................................................................................................................................................
HTML file
.......................................................................................................................................................... 70
Connect method
......................................................................................................................................................... 72
Placement
......................................................................................................................................................... 73
Application
Settings ......................................................................................................................................................... 74
Events ......................................................................................................................................................... 75
..........................................................................................................................................................
76
Authentication
Scheme
.........................................................................................................................................................
77
Generating
the key
79
Validating.........................................................................................................................................................
the key
.......................................................................................................................................................... 80
SSL Certificate
81
Appendix A - Dialogs
1 Message
...................................................................................................................................
Dialogs
82
Message Dlg.......................................................................................................................................................... 83
.......................................................................................................................................................... 84
Input Box
.......................................................................................................................................................... 85
Formatted Message
2 Printing
...................................................................................................................................
Dialogs
86
Page Setup .......................................................................................................................................................... 87
.......................................................................................................................................................... 88
Print
3 File Dialogs
................................................................................................................................... 89
Open File
Save As
.......................................................................................................................................................... 90
.......................................................................................................................................................... 91
Appendix B - Tailoring the interface
92
1 Customizing
...................................................................................................................................
the Web Interface
92
93
Changing the..........................................................................................................................................................
logo
94
Customizing ..........................................................................................................................................................
the web files
.......................................................................................................................................................... 95
Files Location
©2014 by Cybele Software, Inc.
Introduction
1
5
Introduction
Thinfinity ® VirtualUI™ is a software solution that enables developers to add user
interface web remoting to their Windows applications. Typically adding one line of code
to the application's project, you can transform your Windows Application into a crossplatform one, enabling it to run as usual on Windows or as a Web application when
installed under a Thinfinity® VirtualUI™ Server environment.
Why Thinfinity® VirtualUI™?
1. It enables you to create dual-platform Windows/HTML5 Apps, effortlessly.
2. It expands application's availability by delivering them instantly to users
anywhere on any device.
3. It dramatically reduces the Total Cost of Ownership (TCO), by slashing IT
costs and simplifying administration avoiding costly virtualization/remoting
solutions such as Citrix XenApp® or Microsoft™ RemoteApp.
See more:
Architecture
Getting Started
Installing Thinfinity® VirtualUI™
Compiling the application
Registering the application
Accessing the app from the Web
Thinfinity® VirtualUI™ Server Manager
Managing the SSL Certificate
Customizing the Web Interface
Copyright © 2014, Cybele Softw are, Inc. All rights reserved.
©2014 by Cybele Software, Inc.
6
2
Thinfinity® VirtualUI™ UI 1.0
Architecture
Thinfinity® VirtualUI™ is composed by:
Thinfinity®
Browser
Thinfinity®
Thinfinity®
included in
VirtualUI™ Javascript Client, running on an HTML5-capable Web
VirtualUI™ Server, running as a Windows Service
VirtualUI™ SDK dlls and/or source code files libraries referenced and/or
your Windows application
Requirements:
Applications
Potentially, any Windows application with source code available to be
recompiled, that uses Microsoft Windows Win32 API GDI calls and can
interface with an ActiveX library. Typically, .NET WinForms apps, old Visual
Basic apps, Dephi VCL apps, C/C++ MFC apps, etc.
Server OS
Windows 8 32-bit / 64-bit
Windows Server 2012 32-bit / 64-bit
Web Client
HTML5-compliant Web Browser
©2014 by Cybele Software, Inc.
Architecture
3
Getting Started
This section covers the basics of Thinfinity® VirtualUI™ as follows:
1. Installing Thinfinity® VirtualUI™
2. Compiling and testing your application
3. Registering the application in Thinfinity® VirtualUI™ Server
4. Accessing the application from the Web
Find a more exhaustive reference here:
Server Manager
SDK Reference
Appendix A - Dialogs
Appendix B - Tailoring the interface
3.1
Installing Thinfinity® VirtualUI™
Thinfinity ® VirtualUI™ can be installed using the setup file provided:
1. Download the installer from one of the links below:
32-bit installation
http://www.cybelesoft.com/downloads/Thinfinity_VirtualUI_Setup.exe
64-bit installation
http://www.cybelesoft.com/downloads/Thinfinity_VirtualUI_Setup_64.exe
2. Execute the installer on the target machine.
©2014 by Cybele Software, Inc.
7
8
Thinfinity® VirtualUI™ UI 1.0
3. 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.
On 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 a "development mode", to
quickly test your application from a Web Browser.
4. Press Next and wait for the installation process to finish. When it is done, press
the "Finish" button.
©2014 by Cybele Software, Inc.
Getting Started
3.2
Compiling and testing a WinForms application
To integrate a .NET
WinForms application with Thinfinity® VirtualUI™ follow these
steps:
1. Open Microsoft Visual Studio.
2. Open the application's project you want to integrate with.
3. Right-click on the 'References' node and select 'Add Reference'. Click 'Browse'
and find Cy be le .T hinfinit y .V irt ua lUI.dll assembly, which is typically located in c :
\Progra m F ile s\T hinfinit y \V irt ua lUI\De v \dot Ne t \.
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()
{
Cybele.Thinfinity.VirtualUI.Instance.Start();
Application.EnableVisualStyles();
Application.SetCompatibleTextRenderingDefault(false);
Application.Run(new Form1());
}
}
©2014 by Cybele Software, Inc.
9
10
Thinfinity® VirtualUI™ UI 1.0
}
5. Compile your program and run it.
6. Observe on the Windows Task Bar that the Thinfinity® VirtualUI™ Development
Server icon will appear.
7. Right-click on the icon, and after that click on the "Open" menu.
A Web browser window will open and your application will be running inside.
If you don't want the debugging mode to start a new Thinfinity ® VirtualUI™ Server or
want to specify the port in which it will start, you can change the DevServer property to
reflect that change. You may also configure Thinfinity ® VirtualUI™ to open a new
browser window as soon as you run your application.
©2014 by Cybele Software, Inc.
Getting Started
3.3
11
Compiling and testing a Delphi application
To integrate a Delphi VCL application with Thinfinity® VirtualUI™ follow these steps:
1. Open Delphi.
2. Open the application's project.
3. Add the V irt ua lUI_Aut oRun unit to the 'Uses' clause of the project source file.
This unit will typically be located in the C:\Progra m F ile s (x86)
\T hinfinit y \V irt ua lUI\de v \De lphi folder.
program MyApp;
uses
Windows,
Forms,
VirtualUI_AutoRun,
MyApp.Main in MyApp.Main.pas' {Form1};
{$R *.res}
begin
Application.Initialize;
Application.C reateForm(TForm1, Form1);
Application.Run;
end.
4. Compile the program and run it.
5. Observe on the Windows Task Bar that the Thinfinity® VirtualUI™ Development
Server icon will appear.
6. Right-click on the icon, and after that click on the 'Open' menu.
A Web browser window will open and your application will be running inside.
If you don't want the debugging mode to start a new Thinfinity ® VirtualUI™ Server or
want to specify the port in which it will start, you can change the DevServer property to
reflect that change. You may also configure Thinfinity ® VirtualUI™ to open a new
browser window as soon as you run your application.
©2014 by Cybele Software, Inc.
12
3.4
Thinfinity® VirtualUI™ UI 1.0
Registering the application in Thinfinity® VirtualUI™ Server
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.
We consider you have already C ompiled and tested your application with the Thinfinity ®
VirtualUI™ runtime units.
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. Press 'OK' and 'Apply' on the Server Manager screen.
Now the application is ready to be reached on the Web.
©2014 by Cybele Software, Inc.
Getting Started
3.5
13
Accessing the app from the Web
Follow the next
steps to access registered applications using the Web Browser:
1. Open your preferred Web Browser.
2. Type in the Thinfinity® VirtualUI™ Server url. Typically http://your-machine:6580.
3. Enter your username and password, if required.
4. If you have registered only one application, Thinfinity® VirtualUI™ Server will
connect you directly to that application.
5. If you have registered more than one application, you will see a home page which
lists all the registered applications to pick from.
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.
Now you will be able to see and interact with your application from the web browser:
©2014 by Cybele Software, Inc.
14
Thinfinity® VirtualUI™ UI 1.0
©2014 by Cybele Software, Inc.
Getting Started
3.6
15
Application Execution behavior
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's Delphi), an instance of Thinfinity®
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.
Thinfinity ® VirtualUI™ Sever's web page:
If the application is launched from a Thinfinity® VirtualUI™ Server's page, it will
run as a web application.
©2014 by Cybele Software, Inc.
16
4
Thinfinity® VirtualUI™ UI 1.0
Server Manager
Thinfinity® VirtualUI™ Server Manager is a tool to administrate the Thinfinity®
VirtualUI™ Server. From its interface you can manage applications profiles, permissions
and other settings related to Thinfinity® VirtualUI™ Server.
To access Thinfinity® VirtualUI™ Server Manager go to the Start Menu and look for the
"Thinfinity VirtualUI™ Server Manager " item.
Thinfinity® VirtualUI™ Server Manager has the following tabs:
General
RDS
Applications
Licences
Its main menu has two sub-menus:
File Menu:
The File Menu is composed by the following options:
Language
Save
Exit
Allows you to choose different languages for the
application.
Click on the Language that you want the
application to work with.
English is the default language.
Click to save any change done on the system
Settings.
Click on this option to exit the Thinfinity®
VirtualUI™ Server Manager.
Help Menu:
©2014 by Cybele Software, Inc.
Server Manager
The Help Menu is composed by the following options:
Help
Buy
About Thinfinity®
VirtualUI™
©2014 by Cybele Software, Inc.
Takes you to the application online guide.
Takes you to the Cybele Software's Buy page.
Click on the About to see the application version
and build number.
17
18
4.1
Thinfinity® VirtualUI™ UI 1.0
General
On the Thinfinity® VirtualUI™ Manager 'General' tab you will find the following options:
Bind to IP
Protocol
Port
Use this option to restrict access to the service to one
specific IP address. The "All unassigned" option allows
access through all the available IP addresses.
Choose between the http and https protocol.
Choose which port will Thinfinity® VirtualUI™ Server be
listening on. If the port is not available, you will see an
error message on the status bar.
Always remember to press "Apply" in order to save the changes.
©2014 by Cybele Software, Inc.
Server Manager
4.2
RDS
On Thinfinity® VirtualUI™ manager "RDS" tab you will find the following options:
Use this account for
the Remote Desktop
Services session:
Check this option to enable Thinfinity® VirtualUI™ to
run applications under a separate Remote Desktop
Services session.
User name
Enter the username for the Remote Desktop Services
session you want Thinfinity® VirtualUI™ to run
applications under.
Password
Enter the password for the Remote Desktop Services
session you want Thinfinity® VirtualUI™ to run
applications under.
Always remember to press 'Apply' in order to save the changes.
©2014 by Cybele Software, Inc.
19
20
4.3
Thinfinity® VirtualUI™ UI 1.0
Applications
The 'Applications' tab will allow you to configure the applications' locations and settings as
well as the user permissions to access them.
On the Thinfinity® VirtualUI™ Server Manager's 'Applications' tab you will find the
following options:
This list shows the available applications. You
can enable or disable them by checking the
box to the left of the name.
Name
Application List
Target
Shows the name of
the application.
Shows the
application path or
the web address for
Web Link profiles.
Add
Press this button to add a new application.
Edit
Select an application and press this button to
edit it.
©2014 by Cybele Software, Inc.
Server Manager
Remove
Select an application and press this button to
remove it.
Allowed users
and groups for
selected profile
See here the allowed users or group(s) of
users for the selected application. If you want
to change the permissions, edit the
application.
Database path
When the application is set to work with Load
Balancing, you can set a common database
path to all Thinfinity® VirtualUI™ Brokers by
informing it on this field.
Always remember to press "Apply" in order to save the changes.
©2014 by Cybele Software, Inc.
21
22
4.3.1
Thinfinity® VirtualUI™ UI 1.0
Application profile
When you edit or add an application profile you will be presented with this screen below.
The radio button 'Application' must be checked.
These are the profile properties you can edit:
Name
Use this field to change the application name.
Access
Key
This Access Key identifies the application within
Thinfinity® VirtualUI™ Server. It is used when you
want to debug your application, for example.
New Key
This button will change the Access Key. A new
access key will be provided and access through de
previous key will be disabled.
Icon
Click on the Icon gray box to load an image to be
associated with the profile. The image will be
presented along with the profile name on the web
interface profiles selection.
©2014 by Cybele Software, Inc.
Server Manager
Application
/Web link
Select the Application option to have a regular profile
that gives access to an application.
If you select the Web link radio button, this profile
will behave like a Web Hyperlink.
Default
Application
Check this option to make this profile the default
application: the authenticated user will connect to
this profile directly instead of choosing between the
available profiles.
The properties located inside the tabs will be described throughout the next subtopics.
©2014 by Cybele Software, Inc.
23
24
4.3.1.1
Thinfinity® VirtualUI™ UI 1.0
General
On the application profile editor's 'General' tab you will find the following options:
Program path and file
name
Specify the complete path that gives access to the
application executable file.
Applications arguments
Arguments
Start in the following
folder
Resolution
Idle Timeout
Inform a context directory for the application set on
the field "Program path and file name"
Choose from the available list of resolutions
including "Fit to browser window" and "Fit to
screen", ideal for hiding the browser and working on
a full screen mode.
Set a timeout in minutes if you want Thinfinity®
VirtualUI™ Server to wait this period before killing
the application once the browser has been closed.
Timeout 0 will kill the application immediately after
the browser has been closed.
©2014 by Cybele Software, Inc.
Server Manager
4.3.1.2
Credentials
On the Thinfinity® VirtualUI™'s application editor 'Credentials' tab, you should inform the
mode for logging into the specified application:
Use the same credentials entered in the browser
Use the
authenticated
credentials
Use these
credentials
©2014 by Cybele Software, Inc.
for Thinfinity® VirtualUI™ (specified in the
"Permissions" tab).
Note: If the credentials are correct, this option
will connect the user automatically when selecting
the application, or after authenticating for
Thinfinity® VirtualUI™ if this is the only profile for
their credentials.
Complete the credentials used to access the
computer.
Note: If the credentials are correct, this option will
connect the user automatically when selecting the
application, or after authenticating for Thinfinity®
VirtualUI™ if this is the only profile for their
credentials.
25
26
4.3.1.3
Thinfinity® VirtualUI™ UI 1.0
Permissions
Here you need to select the users that will access this application. If you don't select any
user, this application will not be accessed.
These are the options you will find on the application profile editor "Permissions" tab:
Allow anonymous
access
Add
Remove
Check this option to make this application
available without any authentication. Use this
option if you want this profile to be available for
everyone. This means that everybody accessing
Thinfinity® VirtualUI™ will have access to this
application. Checking this option will disable the
Add and Remove buttons.
Press "Add" to access the windows dialog for
selecting Active Directory users.
Press "Remove" to remove a user for this profile.
If you want a user or a user group to access more than one application, you need to
create more application profiles and then add this user to each profile.
The authenticated user will be able to choose from the available application profiles on
the Web interface.
©2014 by Cybele Software, Inc.
Server Manager
4.3.2
27
Weblink profile
When you edit or add a Web Link profile you will be presented with this screen below.
The radio button "Web Link" must be checked.
These are the profile properties you can edit:
Name
Access Key
New Key
Icon
Web link /
Application
profile
Web URL
Use this field to change the profile name.
Used in combination with Thinfinity® VirtualUI™
Javascript API to access this profile.
This button will change the Access Key. A new
access key will be provided and access through
de previous key will be disabled.
Click on the Icon gray box to load an image to be
associated with the application. The image will be
presented along with the application name on the
web interface.
Select the Weblink option to have a profile that
connects to a Web link. These links will be shown
along with all the other applications on the
Thinfinity® VirtualUI™ start page.
Inform in this field the URL that you want this
application profile to connect to.
The properties located inside the other tabs will be described throughout the next
subtopics.
©2014 by Cybele Software, Inc.
28
4.3.2.1
Thinfinity® VirtualUI™ UI 1.0
Permissions
Here you need to select the users that will access this application profile. If you don't select
any users, this profile will not be available from the Web interface.
These are the options you will find under the "Permissions" tab:
Allow anonymous
access
Add
Remove
Check this option to make this application
available without any authentication. Use this
option, if you want this profile to be available for
everyone. This means that everybody accessing
Thinfinity® VirtualUI™ home page will see this
profile. Checking this option will disable the Add
and Remove buttons.
Press "Add" to access the windows dialog for
selecting Active Directory users.
Press "Remove" to remove a user for this
application profile.
If you want a user or a user group to access more than one application, you need to
create more profiles and then add this user to each profile.
The authenticated user will be able to choose from the Web interface which application
s/he will connect to.
©2014 by Cybele Software, Inc.
Server Manager
4.3.3
29
Managing the SSL Certificate
An SSL certificate is an effective way to secure a website against unauthorized interception
of data. At its simplest, an SSL Certificate is used to identify the website and encrypt all
data flowing to and from the Certificate holder's web site. This makes all exchanges
between the site and its visitors 100 percent private.
A valid SSL certificate is included with the Thinfinity® VirtualUI™ Server installation and all
communications are already encrypted with the product's default certificate. You may want
to create your own certificate to identify your company better.
Managing the SSL Certificate
1. There are two forms of creating your own SSL certificate:
a. Create A self-signed certificate
b. Use A CA Certificate
2. Once you already have your certificate files, go to the Thinfinity® VirtualUI™ Server
Settings 'General' tab.
3. Click on the 'Manage Certificate' option.
4. On this screen you should inform the location of the certificate files, as follows:
Certificate File
Inform the path to the certificate file.
CA File
If the certificate is issued by a unknown CA, you should fill in the pathname to the CA
certificate.
Private Key
You should inform the pathname to the certificate private key file.
Pass Phrase
Inform the password, if there is any, used when the private key was generated.
Note: The path names can be absolute (C:\MyCertPath\UserThisCert.pem) or relative to
the path where Thinfinity® VirtualUI™ Server is installed (\cert\UserThisCert.perm).
©2014 by Cybele Software, Inc.
30
4.3.3.1
Thinfinity® VirtualUI™ UI 1.0
The Default Embedded Certificate
A certificate called "self-signed.pem" is included with the Thinfinity® VirtualUI™ Server
installation. You will find it inside the \cert directory, located inside the Thinfinity® VirtualUI™
Server application path.
If you want to use this default certificate you should have the files set as the image
below:
You'll find these settings inside the Thinfinity® VirtualUI™ Server Settings 'General'
tab, by clicking on the 'Manage certificate' button.
Because this certificate is not issued by a known C ertificate Authority (C A), the web
browsers will warn you they can not verify its authority.
©2014 by Cybele Software, Inc.
Server Manager
4.3.3.2
31
A Self-signed Certificate
This option is used to create your own self-sign certificate.
1. Go to the Thinfinity® VirtualUI™ Server Settings 'Security' tab.
2. Press the 'Manage certificate' button.
3. Press the 'Create a self-signed certificate' button.
4. Fill in the form below with your organization data:
5. The 'Common Name' field should be filled with the server+domain that will be used to
access Thinfinity® VirtualUI™ Server (ThinfinityVirtualUI.mycompany.com).
6. Press 'Create'.
7. Select the location where you want the certificate to be stored.
8. The application will start using this self-signed certificate created by you.
Because this certificate is not issued by a known C ertificate Authority (C A), the web
browsers will warn you they can not verify its authority.
©2014 by Cybele Software, Inc.
32
4.3.3.3
Thinfinity® VirtualUI™ UI 1.0
A CA Certificate
In order to use this option you will have to get a certificate from a known Certificate
Authority (CA). Some CA examples are GoDaddy, VeriSign, Thawte, GeoTrust and Network
Solutions.
The CA will ask you for a "certificate request". Create one following the next steps:
1. Go to the Thinfinity® VirtualUI™ Server Settings 'Security' tab.
2. Press the 'Manage certificate' button.
3. Click on the 'Create a certificate request' button.
4. Fill in the form below with your organization data:
5. The 'Common Name' field should be filled with the server+domain that will be used to
access Thinfinity® VirtualUI™ server (ThinfinityVirtualUI.mycompany.com)
6. Press 'Create' and the application will generate two files.
7. The first window will ask you for a location to keep the private key file: "Where do you
want the private key file to be stored".
a. Inform a name for your private key.
b. Select a place to keep it safe.
c. Press the 'Save' button.
8. The second window will ask you for a location to keep the request file: "Where do you
want the request file to be stored.".
©2014 by Cybele Software, Inc.
Server Manager
a. Inform a name for the request file.
b. Select a directory where you can find the file later on to send to the CA.
c. Press the 'Save' button.
9. The first file is the certificate private key. It should always be kept safe with you.
10. Send only the request file to the CA.
After the CA validation process, place the certificate they sent to you in the Thinfinity®
VirtualUI™ Server cert directory and inform the path to the files on Thinfinity® VirtualUI™
Server Manager, Manage Certificate option (Certificate file, CA file and Private Key).
©2014 by Cybele Software, Inc.
33
34
4.4
Thinfinity® VirtualUI™ UI 1.0
Licenses
On the Thinfinity® VirtualUI™ Manager 'Licenses' tab you will find the following options:
This tab always shows the licenses you have currently installed. If you don't have a
license yet, you will see a message letting you know how many evaluation days you
have left until the trial finishes.
Contact us regarding pricing and/or licensing questions.
©2014 by Cybele Software, Inc.
Server Manager
5
35
SDK Reference
Thinfinity® VirtualUI™ SDK is composed by a set of libraries ready to use for several
different development environments and programming languages:
ActiveX library
.NET assembly
Delphi units
Javascript API
5.1
Cybele.Thinfinity.VirtualUI .NET assembly
This assembly contains the .NET
classes needed to enable Thinfinity® VirtualUI™'s web
remoting.
5.1.1
BrowserInfo Class
The BrowserInfo class holds the properties with information regarding the end-user
remote environment.
Properties
BrowserWidth
BrowserHeight
Height
IPAddress
ScreenWidth
ScreenHeight
Username
UserAgent
Width
.
5.1.1.1
Properties
5.1.1.1.1 BrowserWidth
Returns the current
web browser width.
C# Syntax
bool BrowserWidth;
©2014 by Cybele Software, Inc.
36
Thinfinity® VirtualUI™ UI 1.0
5.1.1.1.2 BrowserHeight
Returns the current
web browser height.
C# Syntax
bool BrowserHeight;
5.1.1.1.3 IpAddress
Returns the remote IP address.
C# Syntax
string IPAddress;
5.1.1.1.4 ScreenWidth
Returns the remote screen width.
C# Syntax
bool ScreenWidth;
5.1.1.1.5 ScreenHeight
Returns the remote screen height.
C# Syntax
©2014 by Cybele Software, Inc.
SDK Reference
bool screenHeight;
.
5.1.1.1.6 Height
Returns the height
of the application area in the web browser.
C# Syntax
bool Height;
5.1.1.1.7 UserAgent
Returns the UserAgent
corresponding to the Web Browser.
C# Syntax
string UserAgent;
5.1.1.1.8 Username
Returns the username.
C# Syntax
string Username;
5.1.1.1.9 Width
Returns the width of the application area in the web browser.
©2014 by Cybele Software, Inc.
37
38
Thinfinity® VirtualUI™ UI 1.0
C# Syntax
bool Width;
5.1.2
VirtualUI Class
Provides methods, properties and events to manage Thinfinity® VirtualUI™ settings
and behaviors.
Properties
Active
BrowserInfo
DevServer
Enabled
StdDialogs
Methods
DownloadFile
Start
Stop
Events
OnBrowserResize
OnGetUploadDir
5.1.2.1
Properties
5.1.2.1.1 Active
Returns the state of web remoting.
C# Syntax
bool Active;
See also
Read also the Start and Stop methods
©2014 by Cybele Software, Inc.
SDK Reference
5.1.2.1.2 BrowserInfo
Returns information regarding the end-user environment.
C# Syntax
IBrowserInfo BrowserInfo;
Remarks
Every time you run your application, the BrowserInfo property will be loaded with
the user environment settings.
5.1.2.1.3 DevMode
Gets or sets the development
mode state. When the development mode is true, the
application runs in both Windows and Web modes, and can be accessed from a web
browser through the Development Server.
C# Syntax
bool DevMode;
Remarks
The DevMode property is automatically set to true when you run the application
from inside the Development Environment, otherwise is set to false.
5.1.2.1.4 DevServer
The DevServer property allow you to configure the Development
Server Behavior.
The Development Server is the server which is started while you debug your
application.
c# Syntax
©2014 by Cybele Software, Inc.
39
40
Thinfinity® VirtualUI™ UI 1.0
IDevServer DevServer;
See also
You may also find useful the Application Execution behavior topic.
5.1.2.1.5 Enabled
Enables/disables the web remoting.
C# Syntax
bool Enabled;
Remarks
When the application is started from inside of the Development Environment or from
the VirtualUI™ Server it defaults to true, enabling the web remoting. Otherwise, it
defaults to false, so the Start method does nothing and the application runs just as
a normal Windows app.
See also
See also Start topic.
5.1.2.1.6 StdDialogs
Defines when the open and save file standard dialogs are replaced by browser dialogs,
enabling download and upload of files.
C# Syntax
bool StdDialogs;
Remarks
The default value is false, enabling the replacement of the standard open and save
dialogs by their counterparts in the web browser.
©2014 by Cybele Software, Inc.
SDK Reference
5.1.2.2
Methods
5.1.2.2.1 DownloadFile
Downloads a file to the remote machine.
C# Syntax
void DownloadFile(string Filename);
5.1.2.2.2 DownloadPDF
Downloads and displays a PDF file on the remote machine.
C# Syntax
void DownloadPDF(string Filename);
5.1.2.2.3 Start
Starts the web remoting.
C# Syntax
void Start(long Timeout);
5.1.2.2.4 Stop
Stops the web remoting.
C# Syntax
©2014 by Cybele Software, Inc.
41
42
Thinfinity® VirtualUI™ UI 1.0
void Stop();
5.1.2.3
Events
5.1.2.3.1 OnBrowserResize
Fired when the web browser resizes.
C# Syntax
void OnBrowserResize(long Width, long Height, ref bool Handled);
Remarks
By default, when the web browser resizes and the resolution is set to follow the
browser size, this size is taken into account as the windows maximization area. You
can override this behavior by returning t rue in Handled parameter.
5.1.2.3.2 OnGetUploadDir
Fired when the open file dialog is called and StdDialogs is false.
C# Syntax
void OnGetUploadDir(ref string Directory, ref bool Handled);
Remarks
Controls the location where the remote file will be uploaded. By default, Dire c t ory
holds the w indow s t e m p directory. If you override this parameter, you must return
true.
5.2
Thinfinity.VirtualUI.dll ActiveX
This ActiveX library contains the COM objects needed to manage Thinfinity®
VirtualUI™ web remoting.
©2014 by Cybele Software, Inc.
SDK Reference
5.2.1
IBrowserInfo Interface
The IBrowserInfo interface holds the properties with information regarding the enduser remote environment.
Properties
BrowserWidth
BrowserHeight
Height
IPAddress
ScreenWidth
ScreenHeight
Username
UserAgent
Width
5.2.1.1
Properties
5.2.1.1.1 BrowserWidth
Returns the current
webbrowser width.
C++ Syntax
BOOL get_BrowserWidth();
5.2.1.1.2 BrowserHeight
Returns the current
webbrowser height.
C++ Syntax
BOOL get_BrowserHeight();
5.2.1.1.3 Height
Returns the height
C++ Syntax
©2014 by Cybele Software, Inc.
of the application area in the web browser.
43
44
Thinfinity® VirtualUI™ UI 1.0
BOOL get_Height();
5.2.1.1.4 IpAddress
Returns the remote IP address.
C++ Syntax
BSTR get_IPAddress();
5.2.1.1.5 ScreenHeight
Returns the remote screen height.
C++ Syntax
BOOL get_ScreenHeight();
5.2.1.1.6 ScreenWidth
Returns the remote screen width.
C++ Syntax
BOOL get_ScreenWidth();
©2014 by Cybele Software, Inc.
SDK Reference
45
5.2.1.1.7 Username
Returns the username.
C++ Syntax
BSTR get_Username();
5.2.1.1.8 UserAgent
Returns the UserAgent
corresponding to the Web Browser.
C++ Syntax
BSTR get_UserAgent();
5.2.1.1.9 Width
Returns the width of the application area in the web browser.
C++ Syntax
BOOL get_Width();
5.2.2
IVirtualUI Interface
Provides methods, properties to manage Thinfinity® VirtualUI™ settings and behaviors.
Properties
Active
BrowserInfo
DevMode
DevServer
Enabled
©2014 by Cybele Software, Inc.
46
Thinfinity® VirtualUI™ UI 1.0
StdDialogs
Methods
DownloadFile
DownloadPDF
Start
Stop
5.2.2.1
Properties
5.2.2.1.1 Active
Returns the state of web remoting.
C++ Syntax
BOOL get_Active();
See also
Read also the Start and Stop methods.
5.2.2.1.2 BrowserInfo
Returns information regarding the end-user environment.
C++ Syntax
IBrowserInfo get_BrowserInfo();
Remarks
Every time you run your application, the BrowserInfo property will be loaded with
the user environment settings.
5.2.2.1.3 DevMode
Gets or sets the development
mode state. When the development mode is true, the
application runs in both Windows and Web modes, and can be accessed from a web
©2014 by Cybele Software, Inc.
SDK Reference
47
browser through the Development Server.
C++ Syntax
void put_DevMode(BOOL newValue);
BOOL get_DevMode();
Remarks
The DevMode property is automatically set to true when you run the application
from inside the Development Environment, otherwise is set to false.
5.2.2.1.4 DevServer
The DevServer property allow you to configure the Development
Server Behavior.
The Development Server is the server which is started while you debug your
application.
C++ Syntax
IDevServer get_DevServer();
See also
You may also find useful the Application Execution behavior topic.
5.2.2.1.5 Enabled
Enables/disables the web remoting.
C++ Syntax
void put_Enabled(BOOL newValue);
BOOL get_Enabled();
Remarks
When the application is started from inside of the Development Environment or from
the VirtualUI™ Server it defaults to true, enabling the web remoting. Otherwise, it
defaults to false, so the Start method does nothing and the application runs just as
©2014 by Cybele Software, Inc.
48
Thinfinity® VirtualUI™ UI 1.0
a normal Windows app.
See also
See also Start topic.
5.2.2.1.6 Events
Gets or sets the object
implementing the IEvent interface.
C++ Syntax
void put_StdDialogs(BOOL newValue);
BOOL get_StdDialogs();
Remarks
Events are fired through the IEvents interface. In order to receive these events,
your code must implement the IEvents interface and assign it to this property.
5.2.2.1.7 StdDialogs
Defines when the open and save file standard dialogs are replaced by browser dialogs,
enabling download and upload of files.
C++ Syntax
void put_StdDialogs(BOOL newValue);
BOOL get_StdDialogs();
Remarks
The default value is false, enabling the replacement of the standard open and save
dialogs by their counterparts in the web browser.
5.2.2.2
Methods
5.2.2.2.1 DownloadFile
Downloads a file to the remote machine.
C++ Syntax
©2014 by Cybele Software, Inc.
SDK Reference
void DownloadFile(BSTR Filename);
5.2.2.2.2 DownloadPDF
Downloads and displays a PDF file on the remote machine.
C++ Syntax
void DownloadPDF(BSTR Filename);
5.2.2.2.3 Start
Starts the web remoting.
C++ Syntax
void Start(long Timeout);
5.2.2.2.4 Stop
Stops the web remoting.
C++ Syntax
void Stop();
©2014 by Cybele Software, Inc.
49
50
5.2.3
Thinfinity® VirtualUI™ UI 1.0
IEvents Interface
Provides methods that
will be called when required by the VirtualUI object.
Methods
OnGetUploadDir
OnBrowserResize
5.2.3.1
OnBrowserResize
Fired when the web browser resizes.
C++ Syntax
void OnBrowserResize(long Width, long Height, BOOL*
Handled);
Remarks
By default, when the web browser resizes and the resolution is set to follow the
browser size, this size is taken into account as the windows maximization area. You
can override this behavior by returning TRUE in Handled parameter.
5.2.3.2
OnGetUploadDir
Fired when the open file dialog is called and StdDialogs is false.
C++ Syntax
void OnGetUploadDir(BSTR* Directory, BOOL*
Handled);
Remarks
Controls the location where the remote file will be uploaded. By default, Directory
holds a windows temp directory. If you override this parameter, you must return
TRUE in Handled parameter.
5.3
VirtualUI_SDK Delphi unit
This unit
contains the classes need to manage Thinfinity® VirtualUI™ web remoting.
©2014 by Cybele Software, Inc.
SDK Reference
5.3.1
TVirtualUI Class
Provides methods, properties and events to manage Thinfinity® VirtualUI™ settings
and behaviors.
Properties
Active
BrowserInfo
DevMode
DevServer
Enabled
StdDialogs
Methods
DownloadFile
DownloadPDF
Start
Stop
Events
OnGetUploadDir
OnBrowserResize
See also
Find on the TBrowserInfo and TDevServer topics more information regarding the
BrowserInfo and DevServer properties.
©2014 by Cybele Software, Inc.
51
52
5.3.1.1
Thinfinity® VirtualUI™ UI 1.0
Properties
5.3.1.1.1 Active
Returns the state of VirtualUI™ redirection.
Delphi Syntax
var Active : Boolean;
Active := Obje c t .Active;
See also
Read also the Start and Stop methods.
©2014 by Cybele Software, Inc.
SDK Reference
5.3.1.1.2 BrowserInfo
The BrowserInfo object
allows you to retrieve information regarding the end-user
environment.
Delphi Syntax
var BrowserInfo : TBrowserInfo;
BrowserInfo := Obje c t .BrowserInfo;
Remarks
Every time you run your application, the BrowserInfo property will be loaded with
the user environment settings.
5.3.1.1.3 DevMode
Gets or sets the development
mode state. When the development mode is true, the
application runs in both Windows and Web modes, and can be accessed from a web
browser through the Development Server.
Delphi Syntax
var dm : boolean;
dm := obje c t .DevMode;
Remarks
The DevMode property is automatically set to true when you run the application
from inside the Development Environment, otherwise is set to false.
5.3.1.1.4 DevServer
The DevServer property allow you to configure the Development
Server Behavior.
The Development Server is the server which is started while you debug your
application.
Delphi Syntax
©2014 by Cybele Software, Inc.
53
54
Thinfinity® VirtualUI™ UI 1.0
var DevServer : TDevServer;
DevServer := Obje c t .DevServer;
See also
You may also find useful the Application Execution behavior topic.
5.3.1.1.5 Enabled
Enables/disables the web remoting. Defaults to true.
Delphi Syntax
Obje c t .Enable [:= Boolean];
Remarks
When enabled, the applications uses Thinfinity® VirtualUI™ platform when:
a) The application is run under Delphi
b) The application is accessed through the Thinfinity® VirtualUI™ Web Server.
When the application is started from the windows shell, it will behave as a normal
Windows Application.
See also
See also The Application Execution behavior topic.
©2014 by Cybele Software, Inc.
SDK Reference
55
5.3.1.1.6 StdDialogs
Defines when the open and save file standard dialogs are replaced by browser dialogs,
enabling download and upload of files.
Delphi Syntax
Obje c t .StdDialogs [:= Boolean];
Remarks
The default value is false, enabling the replacement of the standard open and save
dialogs by their counterparts in the web browser.
5.3.1.2
Methods
5.3.1.2.1 DownloadFile
Downloads a PDF file to the remote machine.
Delphi Syntax
Obje c t .DownloadFile ( FileName: String );
5.3.1.2.2 DownloadPDF
Downloads and displays a PDF file on the remote machine.
Delphi Syntax
Obje c t .DownloadPDF ( FileName: String );
5.3.1.2.3 Start
Starts the web remoting.
Delphi Syntax
©2014 by Cybele Software, Inc.
56
Thinfinity® VirtualUI™ UI 1.0
procedure Start(Timeout:Integer=60);
5.3.1.2.4 Stop
Stops the web remoting.
Delphi Syntax
procedure Stop;
5.3.1.3
Events
5.3.1.3.1 OnBrowserResize
This event
is fired whenever the end-user resizes the browser window.
Delphi Syntax
Obje c t .OnBrowserResize := MyBrowserResizeEvent;
procedure MyBrowserResizeEvent(Sender: TObject; var AHandled: Boolean);
begin
AHandled := True;
// Your code here
end;
Arguments
Se nde r
AHa ndle d
The Sender object.
Prevents Thinfinity® VirtualUI™ from
resizing automatically the application
TObject
Boolean
©2014 by Cybele Software, Inc.
SDK Reference
See also
Read also BrowserInfo topics.
©2014 by Cybele Software, Inc.
57
58
Thinfinity® VirtualUI™ UI 1.0
5.3.1.3.2 OnGetUploadDir
Fired when the open file dialog is called and StdDialogs is false.
Delphi Syntax
procedure OnGetUploadDir(var Directory:string;var
Handled: boolean);
Remarks
Controls the location where the remote file will be uploaded. By default, Directory
holds a windows temp directory. If you override this parameter, you must return
TRUE in Handled parameter.
5.3.2
TBrowserInfo Class
The TBrowserInfo class holds the properties with information regarding the end-user
remote environment.
Properties
BrowserWidth
BrowserHeight
Height
IPAddress
ScreenWidth
ScreenHeight
Username
UserAgent
Width
Remarks
Whenever you run your application, a TBrowserInfo object is instantiated
automatically and set as a property of the PlatformHTML5 object.
See also
Read also, about the TPlatformHTML5 DevServer property.
©2014 by Cybele Software, Inc.
SDK Reference
5.3.2.1
59
Properties
5.3.2.1.1 Width
Current
width of the application.
Delphi Syntax
var width : Integer;
width := Obje c t .Width;
Remarks
The width is a read only property.
See also
You may also read the topics Height, BrowserWidth, BrowserHeight, ScreenWidth
and ScreenHeight regarding the application resolution.
5.3.2.1.2 Height
Current
height of the application.
Delphi Syntax
var height : Integer;
height := Obje c t .Height;
Remarks
The height is a read only property. In order to modify the application height, you
should use the method OnBrowserResize.
See also
You may also read the topics Width, BrowserWidth and BrowserHeight, ScreenWidth
, ScreenHeight regarding the application resolution.
5.3.2.1.3 BrowserWidth
Current
width of the end-user browser window.
Delphi Syntax
var browserWidth : Integer;
browserWidth := Obje c t .BrowserWidth;
©2014 by Cybele Software, Inc.
60
Thinfinity® VirtualUI™ UI 1.0
Remarks
The browserWidth is a read only property. In order to modify the application width,
you should use the method OnBrowserResize.
See also
You may also read the topics Width, Height, BrowserHeight and ScreenWidth,
ScreenHeight regarding the application resolution.
5.3.2.1.4 BrowserHeight
Current
height of the end-user browser window.
Delphi Syntax
var browserHeight : Integer;
browserHeight := Obje c t .BrowserHeight;
Remarks
The browserHeight is a read only property. In order to modify the application height
, you should use the method OnBrowserResize.
See also
You may also read the topics Width, Height, BrowserWidth, ScreenWidth and
ScreenHeight regarding the application resolution.
5.3.2.1.5 ScreenWidth
Width of the end-user screen.
Delphi Syntax
var screenWidth : Integer;
screenWidth := Obje c t .ScreenWidth;
Remarks
The screenWidth is a read only property. In order to modify the application width,
you should use the method OnBrowserResize.
See also
You may also read the topics Width, Height, BrowserWidth, BrowserHeight and
ScreenHeight regarding the application resolution.
©2014 by Cybele Software, Inc.
SDK Reference
61
5.3.2.1.6 ScreenHeight
Height
of the end-user screen.
Delphi Syntax
var screenHeight : Integer;
screenHeight := Obje c t .ScreenHeight;
Remarks
The screenHeight is a read only property. In order to modify the application height,
you should use the method OnBrowserResize.
See also
You may also read the topics Width, Height, BrowserWidth, BrowserHeight and
ScreenWidth regarding the application resolution.
5.3.2.1.7 Username
WebFMX authenticated username.
Delphi Syntax
var userName : String;
userName := Obje c t .UserName;
Remarks
The UserName is a read only property.
See also
Read the Permissions topic to learn how to give users permission to access your
application.
5.3.2.1.8 IPAddress
IP address of the end-user.
Delphi Syntax
var peerIP : String;
peerIP := Obje c t .PeerIP;
©2014 by Cybele Software, Inc.
62
Thinfinity® VirtualUI™ UI 1.0
Remarks
The PeerIP is a read only property.
See also
Besides the end-user IP, you may have more information regarding the end-user
browser through the UserAgent property.
5.3.2.1.9 UserAgent
User-Agent
of the browser that have been used to open the Thinfinity® VirtualUI™
application.
Delphi Syntax
var userAgent : String;
userAgent := Obje c t .UserAgent;
Remarks
The UserAgent is a read only property.
5.3.3
TDevServer
The TDevServer class holds the properties that
allows you to modify some of the
Development Server settings.
Properties
Enabled
Port
StartBrowser
Remarks
Whenever you run your application, a TDevServer object is instantiated
automatically as a property of the TVirtualUI class. Read the DevServer property
topic, for more information.
See also
Read also BrowserInfo property.
©2014 by Cybele Software, Inc.
SDK Reference
5.3.3.1
Properties
5.3.3.1.1 Enabled
Allows you to disable/enable the development
server.
Delphi Syntax
Obje c t .Enabled [:= Boolean];
Remarks
The Enabled is a read/write property.
5.3.3.1.2 Port
Allows you to change the port
on which the Development Web Server will answer.
Delphi Syntax
Obje c t .Port [:= Integer];
Remarks
The Port is a read/write property.
See also
Read also the Enabled and StartBrowser topics.
5.3.3.1.3 StartBrowser
Configures whether the server will open a new browser window when running the
application from the development environment.
Delphi Syntax
Obje c t .StartBrowser [:= Boolean];
Remarks
The StartBrowser is a read/write property.
©2014 by Cybele Software, Inc.
63
64
Thinfinity® VirtualUI™ UI 1.0
See also
Read also the Enabled and Port topics.
©2014 by Cybele Software, Inc.
SDK Reference
5.4
65
VirtualUI_AutoRun Delphi unit
This unit
contains no public methods or clases and its only purpose is to allow enabling
Thinfinity® VirtualUI™ by just adding this unit to the project's uses clause.
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.
5.5
JavaScript API
Thinfinity® VirtualUI™ JavaScript API enables you to embed applications into preexisting Web environments.
©2014 by Cybele Software, Inc.
66
Thinfinity® VirtualUI™ UI 1.0
In order to integrate Thinfinity® VirtualUI™ into your web page you will be required to
modify the HTML page by adding some Javascript code.
From this point on, we consider you have already installed and configured Thinfinity®
VirtualUI™. If not, go back to the Getting Started topic.
To learn how to use the SDK library, read the following topics:
Deploying
Modifying the HTML file
Connect method
Authentication Scheme
SSL Certificate
Take a look also on the sdk.html file available in the Thinfinity ® VirtualUI™ server
installation directory, under the folder Thinfinity ® VirtualUI™. After configuring the
profileKey parameter on the connect method, you can try it out from the browser
through the address
http(s)://server_IP:port/sdk.html.
©2014 by Cybele Software, Inc.
SDK Reference
5.5.1
67
Deploying
These are the files that should be deployed within your application/website, when using
the Thinfinity® VirtualUI™ SDK.
All the files can be found inside the application directory under the Thinfinity®
VirtualUI™ folder.
1.
2.
3.
4.
The
The
The
The
sdk.m in.js library
w e bfm x.ui.c ss and the popups.c ss
whole c ss.m directory. These are the styles for mobile devices.
whole im a ge s/c ore directory.
The images and the mobile stylesheets (items 3 and 4 above) must be placed in the
same subdirectory tree relative to sdk.min.js location.
©2014 by Cybele Software, Inc.
68
5.5.2
Thinfinity® VirtualUI™ UI 1.0
Modifying the HTML file
You need a remote application container in your web page. This can be either:
A div element
An iframe element
A new browser window
You will be able to configure this through the connection mode (step 6b explained
further below).
Modifying your html file, step-by-step:
1. Open the HTML page for editing.
2. Add these meta tags into the <head> tag:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
3. If you want the Thinfinity® VirtualUI™ integration to work with iOS, add the
following <meta> tags into the <head> tag.
<link rel="apple-touch-icon" href="images/icon.png"/>
<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, targetdensityDpi=device-dpi"/>
4. Add a reference to the css stylesheet files into the <head> tag. These files must
be deployed with your website/application.
<link rel="stylesheet" type="text/css" href="css/popups.css"/>
<link rel="stylesheet" type="text/css" href="css/webfmx.ui.css"/>
5. Add the following libraries inside the <head> tag:
a. The jQuery library (jquery.min.js):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/
jquery.min.js" type="text/javascript"></script>
b. Point a script tag to the Thinfinity® VirtualUI™ SDK client library (sdk.min.js): this
file will have to be deployed with your website/application. The tag below should be
added to the <head> section, too.
<script src="sdk.min.js" type="text/javascript"></script>
©2014 by Cybele Software, Inc.
SDK Reference
69
6. Also inside the <head> tag, add one more <script> tag. The GetW ebFM X method
creates the object that handles the Thinfinity® VirtualUI™ SDK functionality. It has two
arguments: the Thinfinity® VirtualUI™ server URL and the connection mode in which
Thinfinity® VirtualUI™ SDK will work. The con n ect method is the method that creates the
application and positions it on the structure you have configured (div, iFrame, Window).
<script type="text/javascript">
function connect() {
window.scroll(0, 1);
var ThinfinityVirtualUI = GetWebFMX("Thinfinity VirtualUI
server URL", connection mode);
ThinfinityVirtualUI.connect({
divId: 'WebFMX',
profileKey: 'Substitute with profileKey if using Access
Profiles'
}
});
};
</script>
a. Substitute the "Thinfinity VirtualUI server URL" argument, that goes inside the
GetW ebFM X method, with the Thinfinity® VirtualUI™ protocol + IP + Port following
this format example https://127.0.0.1:8443.
b. Substitute the second argument with the mode you want the connection to be
established:
Mode
Local
(remote
=false)
Remote
(remote=true)
How it works
The application is embedded in the same page inside a div
structure.
The sdk.min.js posts into Thinfinity ® VirtualUI™ Server.
With this mode you can place the application inside an iFrame or
a new window tab.
c. Find out the next sub-topic ("Connect method") how you should complete the
arguments that go within the connect method.
6. Code special behaviours on the available Thinfinity® VirtualUI™ SDK events.
7. Use the Authentication Scheme to ensure the usernames and passwords
security.
©2014 by Cybele Software, Inc.
70
5.5.3
Thinfinity® VirtualUI™ UI 1.0
Connect method
The "connect" method creates the application and places it on the specified html
structure. In order to do so, it expects a JSON object as argument in which you can
inform all the desired settings. If you want to understand exactly how each setting will
influence on the connection, read the following topics:
Placement parameters
Application parameters
Settings parameters
Event parameters
Right bellow, you will find the connect method with all the possible parameters set.
They should not be sent all together, because each mode and environment will require
a different JSON object setup.
The Placement parameters will be required depending on the connection mode
(remote or local).
The Application parameters will configure which application and the authentication
information generated previously.
The other parameters (Settings and Events ) are optional and should be sent
whenever you need to change a determined Thinfinity® VirtualUI™ behavior.
©2014 by Cybele Software, Inc.
SDK Reference
71
virtualUI.connect({
// Placement
targetWindow:
exitURL :
postpage:
divId :
"substitue with the iframe id or window name",
"about:blank",
"connection.html",
"WebFMX",
// Application
profileKey: "substitute with the application Key",
profilePass: "substitute with the generated password",
// Settings
resolution:
width:
height:
maxWidth:
maxHeight:
showToolbar:
scaled:
clipboard:
showToolbar:
fitToBrowser:
"fittobrowser",
$(window).width(),
$(window).height(),
0,
0,
false,
false,
true,
true,
true,
// Events
events: {
onServerConnecting
onQueryDisconnect
onServerConnect
onSessionStart
onServerConnectionError
onServerDisconnect
}
:
:
:
:
:
:
function
function
function
function
function
function
(reconnecting) { },
() { },
() { },
() { },
(errMessage) { },
() { }
});
If you are using the SDK Authentication Scheme, you should call the method
IsOneTimeKeyValid, before connecting. This method will validate the authentication key
and password and open a new client session.
©2014 by Cybele Software, Inc.
72
5.5.3.1
Thinfinity® VirtualUI™ UI 1.0
Placement
Find below all the parameters related to the application placement.
Some of the parameters should be sent only when the connection mode is set to
Remote and some of them should be sent only when the connection mode is Local.
Parameter
targetWindow
exitURL
postpage
divId
send when
mode
remote
loca
l
yes
no
What it means
Type/format
Default
Inform "_self" to have the
connection opened over the
current window. The "*"
value will open a new
window with a name
assigned by Thinfinity ®
VirtualUI™. If you inform an
existing window name or
iframe id, Thinfinity ®
VirtualUI™ will position the
connection on this target
and if the target does not
exist, a new window will be
created with the that name.
Assign an URL to redirect
after the connection has
closed.
This parameter configures
the server HTML file. The
embedded file name is
'connection.html'. You only
have to change this value in
case you have customized
this file.
div id where the remote
desktop will be placed, when
using local mode.
string
"*" ,
"_self" ,
target
window
(iframe id or
window
name)
"_self"
string
URL
"about:blank"
yes
no
string
html file
name
"connection.
html"
yes
no
string
div id
"WebFMX"
no
yes
©2014 by Cybele Software, Inc.
SDK Reference
5.5.3.2
Application
These are the parameters related to the application.
Parameter
profileKey
profilePass
©2014 by Cybele Software, Inc.
What it means
Type/format
Key that identifies the application to be started.
You will find the key information by editing the
application on the Thinfinity ® VirtualUI™ Server
Manager Application tab.
string
profile key
Generated one-time password, used to validate
the user from the client side.
string
password
73
74
5.5.3.3
Thinfinity® VirtualUI™ UI 1.0
Settings
Find below all the settings that can be configured through Thinfinity® VirtualUI™ SDK
connect method.
Parameter
What it means
resolution
"fittobrowser", "fittoscreen",
"fixed", when fixed, the
parameters width and height will
be considered.
width
height
maxWidth
maxHeight
showToolbar
scaled
clipboard
fitToBrowser
Type/
format
string
resolutio
n
Default
"fittobrowse
r"
Application environment width. It
will only be considered when the
resolution parameter is set to
"fixed".
Application environment height.
It will only be considered when
the resolution parameter is set
to "fixed".
Maximum width for the
application environment. Only
available when the setting
fitToBrowser below is enabled.
Maximum height for the
application environment. Only
available when the setting
fitToBrowser below is enabled.
integer
pixels
$("#WebFM
X").width()
integer
pixels
$("#WebFM
X").height()
integer
pixels
0
integer
pixels
0
Set false to hide Thinfinity ®
VirtualUI™ toolbar.
boolea
n
true,
false
boolea
n
true,
false
true
By setting this option, you will
have the connection image
scaled. The original desktop size
will be the maximum limit size
applied to the connection.
It works only when the
fitToBrowser property is
enabled.
Enables/disables the application
clipboard.
Set this property to true in order
to have the application div
adjusted to the web browser
size. If this property is set to
false, you will have to manage
manually the div location and
size.
boolea
n
true,
false
boolea
n
true,
false
false
true
true
©2014 by Cybele Software, Inc.
SDK Reference
5.5.3.4
Events
These are the events that can be handled from the Thinfinity® VirtualUI™ SDK.
Event
onServerConnecting
onQueryDisconnect
onServerConnect
onSessionStart
onServerConnectionError
onServerDisconnect
©2014 by Cybele Software, Inc.
Parameters
When it is triggered
reconnecting
This event is fired during the
server connection
establishment.
The reconnecting argument
informs whether this is a
reconnection or a first-time
connection.
-
Anytime the Web client is
about to be disconnected, the
"onQueryDisconnect" will
be triggered. It is intended
to validate with the user if
the disconnection is desired.
-
The "onServerConnect" event is
fired every time a "connect"
command is exchanged between
the browser and the
Thinfinity® VirtualUI™ Server.
It is a way of making sure the
server received a sent
"connect" command.
-
errMessage
-
This event
the client
started on
VirtualUI™
will be fired when
session has been
Thinfinity®
Server.
If an error prevents the
client connection to be
established, this event will
be fired. The errMessage
argument brings the error
message.
Anytime the Web client gets
disconnected from the
Thinfinity® VirtualUI™ Server,
the "onServerDisconnect" will
be fired. It could be
triggered because the
connection was lost
incidentally or also because
the user disconnected from the
server on purpose.
75
76
5.5.4
Thinfinity® VirtualUI™ UI 1.0
Authentication Scheme
This SDK is intended to embed an application within an existing website/application.
In this multi-application context, the authentication process involves two steps that
were designed to ensure the security of the exchanged data among the different
applications components:
1. Generating an authentication key from the website/application server side
2. Validating this key from the application client side, before starting the application
(connect method).
©2014 by Cybele Software, Inc.
SDK Reference
5.5.4.1
77
Generating the key
The one-time authentication key is a temporary key generated by Thinfinity®
VirtualUI™ Server, intended to protect the actual username and password. Both key
and password are temporary data and they will be only valid for a single connection
and limited period of time.
How it works:
1. First you need to ask Thinfinity® VirtualUI™ Server to generate the key and
password for you. Call the server following this URL format:
http(s)://Thinfinity® VirtualUI™ Server:Port/ws/oturl/get?
<queryString>
2. The queryString should be built with all parameters listed below:
username= <username> &password= <password> &plen= <passlen>
&expires= <expires>
Find on the table below a description for each required parameter.
Parameter
Description
username
This is the username to be authenticated on
Thinfinity® VirtualUI™ Server.
password
The password of the user to be authenticated.
plen
expires
This parameter carries the returned unique
password length.
Through this parameter you can set an
expiration(in minutes) for the key-password
pair. Expires = 30 means that the pair won't
work anymore after 30 minutes have passed from
the pair generation.
3. If Thinfinity® VirtualUI™ gets to authenticate with the sent parameters, it
will return a JSON object containing the One-Time key/password pair.
Parameter
Description
valid
Use this result to know whether the
authentication was successful (username and
password were valid).
key
This is the one-time key to be used for the
client side authentication.
pass
©2014 by Cybele Software, Inc.
This is the password to be used for the client
side authentication.
78
Thinfinity® VirtualUI™ UI 1.0
4. If the authentication was successful, write on the end HTML file the
generated key and password information, so that they can be used for the
client-side key/password Validation.
JavaScript example:
This is a JavaScript example. The actual Ge t One T im e Ke y method should be
translated to the Server side programming language and only invoked from there to
avoid username/password exposure on the client side.
function GetOneTimeKey(username,password) {
var otkey = getOneTimeKey(username, password);
if (!otkey.valid) {
alert('Invalid username/password');
}
return otkey;
}
function getOneTimeKey (username, password, passlen, expires) {
var returl = "";
if (!passlen) passlen = 8;
if (!expires) expires = 30;
$.ajax({
url: "http(s)://Thinfinity® VirtualUI™ Server:port" + "/
ws/oturl/get?username=" + username + "&password=" + password +
"&plen=" + passlen + "&expires=" + expires,
async: false,
dataType: "html",
statusCode: {
200: function (data) {
returl = eval("("+data+")");
}
}
});
return returl;
}
©2014 by Cybele Software, Inc.
SDK Reference
5.5.4.2
79
Validating the key
After you have generated the one-time key and password on the server side and have
written them on the HTML file, you should call the IsOnTimeKeyValid method from the
client-side. This method checks whether this authentication credentials are valid and
opens a new Web client session, using Ajax.
After invoking this method, you will be able to call the Connect method, responsible to
create and place the application on the HTML container.
JavaScript example:
function ValidateOneTimeKey(key, pass) {
ThinfinityVirtualUI.isOneTimeKeyValid(
key,
pass,
function () {
connect();
},
function () {
alert('error');
}
);
}
Parameters:
Parameter
Description
Type
key
one-time generated key
String
pass
one-time generated password.
String
success
function to be executed in case the
authentication info is validated.
functi
on
error
function to be executed in case the
authentication info is not valid.
functi
on
Read also:
Read also the connect method, called in case of the validation success.
©2014 by Cybele Software, Inc.
80
5.5.5
Thinfinity® VirtualUI™ UI 1.0
SSL Certificate
When you embed Thinfinity® VirtualUI™ into a website and the browser can not verify
the configured certificate authenticity, your integration will not work.
There are two ways of handling this issue:
1. Using your own certificate
If you already have your own certificate or if you will get one from a Certificate
Authority (CA) , the only thing you will have to do is configure the certificate as
described on "A CA Certificate" section.
2. Using the HTTP protocol
Otherwise, you should configure the Thinfinity® VirtualUI™ protocol to HTTP. This
setting is available on the Thinfinity® VirtualUI™ Manager General tab.
Keep in mind you will have to change the protocol on the GetThinfinity® VirtualUI™
server parameter as well.
©2014 by Cybele Software, Inc.
SDK Reference
6
Appendix A - Dialogs
In Thinfinity® VirtualUI™, window frames have a "web-native" interface. The same
happens with standard dialog boxes, that are translated to HTML dialogs.
Find on the next topics how each one of these dialogs will be shown on the Windows
and HTML5 platforms:
Message Dialogs
MessageDlg
InputBox
Formatted Message
Printing Dialogs
Page Setup
Print
File Dialogs
Open File
Save As
©2014 by Cybele Software, Inc.
81
82
6.1
Thinfinity® VirtualUI™ UI 1.0
Message Dialogs
The Message Dialogs implemented in Thinfinity® VirtualUI™ are:
MessageDlg
InputBox
Formatted Message
©2014 by Cybele Software, Inc.
Appendix A - Dialogs
6.1.1
83
Message Dlg
Usage Example
MessageDlg ('Would you like to continue?',mtConfirmation,[mbYes,mbNo],0);
This is how the dialog is shown on each platform:
Windows Platform
HTML5 Platform
Find on the table below how the Windows MessageDlg Symbols will be presented on the
HTML5 Platform:
DialogType
mtWarning
mtError
mtInformation
mtConfirmation
©2014 by Cybele Software, Inc.
Windows Platform
HTML5 Platform
84
6.1.2
Thinfinity® VirtualUI™ UI 1.0
Input Box
Usage Example
value := InputBox( 'Input Test' , 'Please type a name' , '' );
This is how the dialog is shown on each platform:
Windows Platform
HTML5 Platform
©2014 by Cybele Software, Inc.
Appendix A - Dialogs
6.1.3
Formatted Message
Usage Example
ShowMessageFmt( '%d/%d = %1.2f' , [2, 5, 2/5] );
This is how the dialog is shown on each platform:
Windows Platform
HTML5 Platform
©2014 by Cybele Software, Inc.
85
86
6.2
Thinfinity® VirtualUI™ UI 1.0
Printing Dialogs
The Printing Dialogs implemented in Thinfinity® VirtualUI™ are:
PageSetup
Print
©2014 by Cybele Software, Inc.
Appendix A - Dialogs
6.2.1
Page Setup
Usage Example
type
PageSetupDialog1: TPageSetupDialog;
...
PageSetupDialog1.Execute;
This is how the dialog is shown on each platform:
Windows Platform
HTML5 Platform
©2014 by Cybele Software, Inc.
87
88
6.2.2
Thinfinity® VirtualUI™ UI 1.0
Print
Usage Example
type
PrintDialog1: TPrintDialog;
...
PrintDialog1.Execute;
This is how the dialog is shown on each platform:
Windows Platform
HTML5 Platform
©2014 by Cybele Software, Inc.
Appendix A - Dialogs
6.3
File Dialogs
The File Dialogs implemented in Thinfinity® VirtualUI™ are:
Open File
Save As
©2014 by Cybele Software, Inc.
89
90
6.3.1
Thinfinity® VirtualUI™ UI 1.0
Open File
Usage Example
type
OpenDialog1: TOpenDialog;
...
OpenDialog1.Title := 'Open file';
OpenDialog1.Execute;
This is how the dialog is shown on each platform:
Windows Platform
HTML5 Platform
In order to open a File from the remote machine the user will be able to make an upload
of one local file into the server.
©2014 by Cybele Software, Inc.
Appendix A - Dialogs
6.3.2
Save As
Usage Example
type
SaveDialog1: TSaveDialog;
...
SaveDialog1.Title := 'Save As...';
SaveDialog1.Filter := '*.txt';
SaveDialog1.FileName := 'somefile.txt';
SaveDialog1.Execute;
This is how the dialog is shown on each platform:
Windows Platform
HTML5 Platform
In order to save a File from the remote machine Thinfinity ® VirtualUI™ will do a
download into the LocalMachine.
©2014 by Cybele Software, Inc.
91
92
Thinfinity® VirtualUI™ UI 1.0
7
Appendix B - Tailoring the interface
7.1
Customizing the Web Interface
Thinfinity® VirtualUI™ allows you to modify the web interface and tailor it to
your branding scheme.
Customizing the application logo and other image files can be very simple, once
it only requires you to have the new image file and tell the application where it
is located.
Customizing the structure and style of the application may be a little bit more
complex. These kind of customizations have to be done at a programming level
(HTML and CSS).
Read also how to protect the customized web files in the Files Location topic.
©2014 by Cybele Software, Inc.
Appendix B - Tailoring the interface
7.1.1
93
Changing the logo
Modifying the application logo can be as simple as copying the new logo image and
telling Thinfinity® VirtualUI™ application where it is located:
1. Create a folder called "BrandingFiles", if it doesn't exist yet, under the folder web
located inside the Thinfinity® VirtualUI™ installation directory.
(e.g.: C:/Program Files/Thinfinity® VirtualUI™/web)
2. Copy your own logo image file to the "BrandingFiles" folder.
3. Create the WebAliases.ini file and configure it:
a. Create a file called "WebAliases.ini" in the installation directory (e.g.: C:/
Program Files/Thinfinity® VirtualUI™/WebAliases.ini). If the file already exists,
only append the lines to it.
b. Configure the redirection of the logo files you want to substitute, following the
two examples below (Thinfinity_Virtual_UI_150.png.png and favicon.ico):
[Alias]
;=================
;Main logo
;=================
/images/Thinfinity_Virtual_UI_150.png.
png=BrandingFiles\MyLogo.png
;=================
;Favicon
;=================
/favicon.ico=BrandingFiles\MyFavicon.ico
c. Save it.
4. Open the application to see the changes.
Take into account:
a. Any line in the "WebAliases.ini" file starting with a semicolon will not be
considered by the application. It can be used to leave comments in the file.
b. You can substitute any interface image or file, by following the same steps
described above.
c. Sometimes the favicon is not shown right the way, because the browser keeps
history of the images. In that case, you should clean the browser cache before
trying out the changes.
©2014 by Cybele Software, Inc.
94
7.1.2
Thinfinity® VirtualUI™ UI 1.0
Customizing the web files
To customize the web files, you should:
1. Create a folder called "BrandingFiles", if it doesn't exist yet, under the folder
web located inside the Thinfinity® VirtualUI™ installation directory. (e.g.: C:/
Program Files/Thinfinity® VirtualUI™/web)
2. Make copies of the original web files that you want to modify to the
"BrandingFiles" folder. Copy only the files to be modified without their associated
folder structure.
3. Customize the files (html, css, etc) as you prefer.
4. Create the WebAliases.ini file and configure it:
a. Create a file called "WebAliases.ini" in the installation directory (e.g.: C:/
Program Files/Thinfinity® VirtualUI™/WebAliases.ini). If the file already exists,
only append the lines to it.
b. Configure the redirection to the files you have modified, by adding a line
similar to the examples below for each modified file:
[Alias]
/index.html=BrandingFiles\my_index.html
/css/index.css=BrandingFiles\my_index.css
c. Save it.
5. Open the application and check out the changes.
Take into account:
a. Any line in the "WebAliases.ini" file that starts with a semicolon will not be
considered by the application. It can be used to leave comments.
b. The paths located in the HTML, CSS, and other contents will be kept relative to the
original file location. This means that you won't have to change the content paths
when customizing this files.
©2014 by Cybele Software, Inc.
Appendix B - Tailoring the interface
7.1.3
95
Files Location
We recommend that a new folder be created in order to keep the customized files
instead of having them with the original files. This will enable you to:
a) Get back to the original interface configuration at any time.
b) Make sure that your files will be safe after a version upgrade.
You can also choose to place the files inside or outside the webroot structure. Keep
reading to see how each option will behave:
Storing the customized files in the webroot directory:
In this case:
1) The files will be externally accessible from a URL similar to: https://127.0.0.1/
BrandingFiles/customizedFile.html
2) The file paths, indicated in the "WebAliases.ini", can be relative to the webroot
directory. (e.g. "/img/Thinfinity_Virtual_UI_150.png.png=BrandingFiles\MyLogo.
png"). You will find other relative path examples on the topics Changing the logo
and Customizing the web files.
Storing the customized files outside the webroot directory:
In that case:
1) The files will be protected, because it won't be possible to access the customized
files from a URL.
2) The file paths, indicated in the "WebAliases.ini", must be absolute, as in the
©2014 by Cybele Software, Inc.
96
Thinfinity® VirtualUI™ UI 1.0
example below:
[Alias]
/index.html=c:/BrandingFiles/my_index.html
/images/Thinfinity_Virtual_UI_150.png.png=c:/
BrandingFiles/MyLogo.png
©2014 by Cybele Software, Inc.
Appendix B - Tailoring the interface
©2014 by Cybele Software, Inc.
97