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 WebFMX 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 WebFMX 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 WebFMX SDK functionality. It has two arguments: the WebFMX server URL and the connection mode in which WebFMX 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("WebFMX server URL", connection mode);

   webfmx.connect({

       divId: 'webfmx',

       profileKey: 'Substitute with profileKey if using Access Profiles'

       }

   });

 

};

 

</script>

 

a. Substitute the "WebFMX server URL" argument, that goes inside the GetWebFMX method, with the WebFMX 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 WebFMX 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 WebFMX SDK events.

 

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