Using the SDK

 Top  Previous  Next

 

Before you actually begin to code:

 

1) Verify in the ThinRDP Server settings whether you are using "Access Profiles" as the authentication mode.  If you do use "Access Profiles", make sure you already have created and configured the profile to be used on this integration.

 

2) You will be able to place a ThinRDP connection in three different html structures:

 

a. A new browser window

b. An iFrame placed inside an existing Web Page

c. A div placed inside an existing Web Page

 

If you want the ThinRDP connection to open in a new browser window (a) or inside an iFrame (b) the connection mode should be set to "Remote". Otherwise, if you want to embed the connection inside in a div (c), the connection mode should be "Local". You will need this information on HTML configuration step 5b below.

 

 

Modify your HTML file step-by-step:

 

1. Open the HTML page you are going to integrate with ThinRDP SDK 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 ThinRDP integration to work under 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, target-densityDpi=device-dpi"/>

 

4. 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. The ThinRDP SDK client library (sdk.min.js): this file will have to be deployed with your website/application.

 

<script src="sdk.min.js" type="text/javascript"></script>

 

 

 

5. Also inside the <head> tag, add one more <script> tag. This one will be used to create the connection with the remote desktop. If the page already has a script tag, just append this code into the $(document).ready method.

The GetThinRDP method creates the object that handles the ThinRDP SDK functionality. It has two arguments: the ThinRDP server URL and the connection mode in which ThinRDP SDK will work.

The connect method is the method that creates the connection and positions it on the structure you have selected (div, iFrame, Window).

 

 

<script type="text/javascript">

  var mythinrdp;

   $(document).ready(function () {

       mythinrdp = GetThinRDP("ThinRDP server URL", connection mode);

       mythinrdp.connect({

                           //Read the "The connect method" to complete all the expected parameters        

       });

   });

</script>

 

 

a. Substitute the "ThinRDP server URL" argument for the getThinRDP method with the ThinRDP protocol + Computer's IP + Port, following this format: https://127.0.0.1:8443.

 

b. Substitute the getThinRDP second argument with the connection mode:

 

Mode

How it works

Where you can place the connection

Local

(remote =false)

The connection is embedded in the same page and after the connection is established, the data exchange is sent directly to your website/application, through the sdk.min.js library.

div

Remote

(remote=true)

The sdk.min.js posts into ThinRDP Server and all the remote desktop data is exchanged through the ThinRDP Server JavaScript scripts.

The connection will occupy the whole target window area (window or iFrame).

browser window

or

IFrame

 

 

c. Find out in the next sub-topic ("Connect method") how you should complete the parameters that go along with the connect method, and substitute the text on the connect

method.

 

 

6. If you are using the "Local" connection mode you can code special behaviours for the available ThinRDP SDK events and keystrokes,.