Modifying the HTML file

 Top  Previous  Next

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™ for FireMonkey® 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, target-densityDpi=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™ for FireMonkey® 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>

 

 

6. Also inside the <head> tag, add one more <script> tag. The GetWebFMX method creates the object that handles the Thinfinity® VirtualUI™ for FireMonkey® SDK functionality. It has two arguments: the Thinfinity® VirtualUI™ for FireMonkey® server URL and the connection mode in which Thinfinity® VirtualUI™ for FireMonkey® SDK will work. The connect 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 webfmx = GetWebFMX('Thinfinity® VirtualUI™ for FireMonkey® server URL', connection mode);

   webfmx.connect({

       divId: 'webfmx',

       profileKey: 'Substitute with profileKey if using Access Profiles'

       }

   });

 

};

 

</script>

 

a. Substitute the 'Thinfinity® VirtualUI™ for FireMonkey® server URL' argument, that goes inside the GetWebFMX method, with the Thinfinity® VirtualUI™ for FireMonkey® 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

How it works

Local

(remote =false)

The application is embedded in the same page inside a div structure.

Remote

(remote=true)

The sdk.min.js posts into Thinfinity® VirtualUI™ for FireMonkey® 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™ for FireMonkey® SDK events.

 

7. Use the Authentication Scheme to ensure the usernames and passwords security.