Adding Screen Rules

 Top  Previous  Next

We'll add two rules. The first screen rule will be associated with the first screen and will have a handler function, which will be called upon rule selection. Please note the condition specified in this function: it will only send the <ENTER> key when the hs.screens attribute array contains no previous screens, meaning that the connection has been established and this is the first screen received. So, this rule will help to bypass the "cics" screen when the connection is open, but not when the user returns from the log-in (the second screen).

 

The handler definition for this screen rule is:

 

   apply: {

      handler: function (hs) {

        if (hs.screens.length == 1) {

          hs.enter();

        }

      }

   }

 

The second screen rule will be associated with the second application screen. It will include user fields that will be used in the HTML template to bind part of the screen buffer with HTML elements. Also, it will include a couple of actions that will provide screen navigation.

 

The apply property will have this content:

 

   apply: {

      fields: [

        { name: 'shopsLastUpdate', row: 18, col: 29, len: 8 },

        { name: 'accountsLastUpdate', row: 18, col: 62, len: 8 },

        { name: 'username', row: 19, col: 67, len: 6 },

        { name: 'password', row: 20, col: 67, len: 6 }

        { name: 'newPassword', row: 21, col: 67, len: 6 }

      ],

      render: {

        view: {

          template: "<H5>BLUE CARD LOGIN</H5>"

        }

      },

      actions: {

        main: function (hs) { hs.enter(); },

        exit: function (hs) { hs.pf1(); }

      }

   }

 

 

Here is the JSFiddle version to test this step:

 

 

 

NOTE: In previous examples we included the rules registrations in the same index.js file. This is fine for the scope of this tutorial, but we strongly recommend to use a modular approach by defining the screen rules as external resources and loaded by HostSurfer when is created.

 

To load screen rules from external files we need to declare a repository, and the list rules that will be loaded during HostSurfer initialization:

 

  var hs = new zScope.HostSurfer({

       term: {

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

           float: { top: 4, right: 4, width: 320, height: 200 }

       },

       rules: {

           baseUrl: 'rules/',

           paths: ['cics', 'bluecardLogin']

       },

       view: {

           id: "hs-view"

       }

   });

 

Now, when the HostSurfer object is created, it will load and register the new rules from the declared repository. Each screen rule has to be created as an auto-executable script:

 

(function () {

   hs.register({

       id: 'cics',

       match: [{ text: "CICS", row: 5, col: 1 }],

       apply: {

           handler: function (hs) {

              if (hs.screens.length==1) {

                   hs.enter();

               }

           }

       }

   });

})();