Creating the Index.html page

The main purpose of the index page is:

1. Define the container into which the HTML template rendering will take place.

2. Load the necessary resources for the application.

The new index.html is a variation of the HostSurfer Application Fundamentals last example. The CSS stylesheets (index.css and styles.css) and the Javascript code (index.js) now is loaded from external files. Also, this time we prefer to not explicity embed the terminal emulation into the page: HostSurfer allows to create a terminal emulation inside a floating panel to be able to see the terminal display and the HTML representation at the same time. This feature allows programmers to facilitate the development process.

The most important of this first step is in the HostSurfer constructor parameter:

  var hs = new zScope.HostSurfer({

       term: {

           url: "https://zanywhere.cybelesoft.com/hsdemo/",

           float: { top: 5, right: 5, width: 350, height: 235 }

       },

       view: {

           id: "hs-view"

       }

   });

Please note the changes made to the HostSurfer constructor call: instead of embedding a terminal emulator in an iframe, we'll delegate the creation of the terminal emulator to HostSurfer. To do that, we added the term parameter including the connection url. The float attribute indicates to HostSurfer we want to use the terminal emulation inside a floating panel.

The view attribute indicates to HostSurfer the HTML element where the processed template will be embedded. Through this attribute, HostSurfer automatically will take control of the page element identified with this id as the application rendering container. The default id for the HostSurfer rendering container is 'hs-view'. In this case (as we are using "hs-view" as id for the rendering container) we can avoid the explicit declaration of this attribute:

  var hs = new zScope.HostSurfer({

       term: {

           url: "https://zanywhere.cybelesoft.com/hsdemo/",

           float: { top: 5, right: 5, width: 350, height: 235 }

       }

   });

This is the JSFiddle version of this step:

In the next topic, we will create a screen rule with a callback handler.