Tutorial: Using Module Settings

Creating a User Keep-Alive (pingback) Module

By Kevin M Schreiner

March 29, 2010

Introduction

OpenWebStudio has an integrated ability to assign to and read from the settings assigned to the module. The provided demonstration will show an example of assigning to the module settings and, once established, consuming the module settings values which were assigned.

Demonstration

Video
Tutorial: Watch and Learn

 


To get started, lets assume you have already installed Open Web Studio on your target platform.

 

The scenario will provide a simple keep-alive functionality which will keep the existing user logged in even when they remain idle for an extremely long period of time. In the scenario we will provide two settings, the first a setting which provides a friendly message that the system is keeping them logged in, and second, a frequency which will ping back to the server.
The logic is straight forward. The browser will automatically ping back to the server on a scheduled basis. This pinging will not visually affect the page, but will callback in the background. To provide this capability all we need to use is a little trick which hits the server page. In this case, the request will simply hit the current page. The trick is to use the Image object provided within Javascript, settings its href to a url which will change dynamically so that it will not be cached by the browser.
First, lets create the interface so that the parameters can be established.
1. Add a No-Query template to the configuration, and setup a Div to contain the visual reminder that the site will be pinging back to the server, and second, a javascript block to contain the pingback functionality:
<div id="dvPinging" style="display:none;">Pinging...</div>
<script type="text/javascript">
function pingBack() {
//Display the Friendly Reminder
document.getElementById('dvPinging').style.display='block';
window.setTimeout("document.getElementById('dvPinging').style.display='none';",1000);
//Make the pingback request
var randomnumber=Math.floor(Math.random()*32767);
var img=new Image();
img.src=document.location+'#pb'+randomnumber;
}
window.setInterval('pingBack();',5000);
</script>
The provided functionality first makes the Reminder message visible, and sets it to be hidden again after one second. Then it makes the official pingback request. This request appends a random number to the end of the url hash tag which effectively makes it unique for the user. By setting the url to the source of the image, the browser physically hits the url, passing the cookie and other important information. The user therefore remains logged in as long as the pingback is functioning.
2. Now, to use the Module Settings, let's first assume we already have two module settings - one named "PingMessage" which we will place inside of the dvPinging div and the other named "PingFrequency" which will change the period of time between pings.
To consume this, you need only place the Name of the module settings in Square Brackets, followed by the ModuleSettings collection. Therefore, the first line becomes:
<div id="dvPinging" style="display:none;">[PingMessage,ModuleSettings]</div>
And the last line of the Javascript becomes:
window.setInterval('pingBack();',[PingFrequency,ModuleSettings]*1000);
I added the *1000 to the frequency so that in the module settings we can request the seconds between refreshes, not the milliseconds.
3. Now we need to create a new configuration which will request the module settings and save those settings. Click New and then pick the General Tab to provide a name.
"Sample.Using.Module.Settings.Settings"
4. Clear out the default Regions and start from scratch.
5. To prompt for the values we will add a No-Query Detail template which provides a form:
<table>
<tr>
<td width="200">Message</td>
<td><input style="width:400px;" id="frmPingMessage" name="frmPingMessage"/></td>
</tr>
<tr>
<td width="200">Frequency</td>
<td><input id="frmPingFrequency" name="frmPingFrequency"/>
</table>
6. This will provide the default form, however we also want to display the current value of the module settings. Add the value of each to the interface:
value="[FORMAT,PingMessage,ModuleSettings,{ENCODEHTML}]"
value="[PingFrequency,ModuleSettings]"
7. Now we need to save the module settings when the user click Update at the bottom of the Module Settings inteface. We automatically recieve a Module Communication Message with a message type of "Settings" and a Message value of "Update". Add a Message action to consume the incoming and expected message.
8. Finally, add two assignment actions. The first assigning the Module Settings PingMessage to the value [frmPingMessage,Form]. The second assigns Module Settings PingFrequency to [frmPingFrequency,Form].
9. Publish the Configuration and return to the front end interface.
10. To complete this venture, we need to select the appropriate Module Settings configuration. Click Settings, and then select the new configuration as our Module Settings inteface.
11. Save the settings and upon returning to the module settings interface you will see your configuration.
12. When you are ready, you can actually hide all the OpenWebStudio interfaces from this module by clicking the provided option below the Configurations.

 

The scenario will provide a simple keep-alive functionality which will keep the existing user logged in even when they remain idle for an extremely long period of time. In the scenario we will provide two settings, the first a setting which provides a friendly message that the system is keeping them logged in, and second, a frequency which will ping back to the server.

The logic is straight forward. The browser will automatically ping back to the server on a scheduled basis. This pinging will not visually affect the page, but will callback in the background. To provide this capability all we need to use is a little trick which hits the server page. In this case, the request will simply hit the current page. The trick is to use the Image object provided within Javascript, settings its href to a url which will change dynamically so that it will not be cached by the browser.

  1. First, lets create the interface so that the parameters can be established. Add a No-Query template to the configuration, and setup a Div to contain the visual reminder that the site will be pinging back to the server, and second, a javascript block to contain the pingback functionality:

    <div id="dvPinging" style="display:none;">Pinging...</div>
    <script type="text/javascript">
    function pingBack() {
    //Display the Friendly Reminder
    document.getElementById('dvPinging').style.display='block';
    window.setTimeout("document.getElementById('dvPinging').style.display='none';",1000);

    //Make the pingback request
    var randomnumber=Math.floor(Math.random()*32767);
    var img=new Image();

    img.src=document.location+'#pb'+randomnumber;

    }

    window.setInterval('pingBack();',5000);
    </script>
  2. The provided functionality first makes the Reminder message visible, and sets it to be hidden again after one second. Then it makes the official pingback request. This request appends a random number to the end of the url hash tag which effectively makes it unique for the user. By setting the url to the source of the image, the browser physically hits the url, passing the cookie and other important information. The user therefore remains logged in as long as the pingback is functioning. 
  3. Now, to use the Module Settings, let's first assume we already have two module settings - one named "PingMessage" which we will place inside of the dvPinging div and the other named "PingFrequency" which will change the period of time between pings.
  4. To consume this, you need only place the Name of the module settings in Square Brackets, followed by the ModuleSettings collection. Therefore, the first line becomes:

    <div id="dvPinging" style="display:none;">[PingMessage,ModuleSettings]</div>

    And the last line of the Javascript becomes:

    window.setInterval('pingBack();',[PingFrequency,ModuleSettings]*1000);
  5. I added the *1000 to the frequency so that in the module settings we can request the seconds between refreshes, not the milliseconds.
  6. Now we need to create a new configuration which will request the module settings and save those settings. Click New and then pick the General Tab to provide a name, in this case we used "Sample.Using.Module.Settings.Settings"
  7. Clear out the default Regions and start from scratch.
  8. To prompt for the values we will add a No-Query Detail template which provides a form:

    <table>
    <tr>
    <td width="200" class="SubHead">Message</td>
    <td><input style="width:400px;" id="frmPingMessage" name="frmPingMessage"/></td>
    </tr>
    <tr>
    <td width="200" class="SubHead">Frequency</td>
    <td><input id="frmPingFrequency" name="frmPingFrequency"/>
    </tr>
    </table>
  9. This will provide the default form, however we also want to display the current value of the module settings. Add the value of each to the interface:

    value="[FORMAT,PingMessage,ModuleSettings,{ENCODEHTML}]"
    value="[PingFrequency,ModuleSettings]"
     
  10. Now we need to save the module settings when the user click Update at the bottom of the Module Settings inteface. We automatically recieve a Module Communication Message with a message type of "Settings" and a Message value of "Update". Add a Message action to consume the incoming and expected message.
  11. Finally, add two assignment actions. The first assigning the Module Settings PingMessage to the value [frmPingMessage,Form]. The second assigns Module Settings PingFrequency to [frmPingFrequency,Form].
  12. Publish the Configuration and return to the front end interface.
  13. To complete this venture, we need to select the appropriate Module Settings configuration. Click Settings, and then select the new configuration as our Module Settings inteface.
  14. Save the settings and upon returning to the module settings interface you will see your configuration.
  15. When you are ready, you can actually hide all the OpenWebStudio interfaces from this module by clicking the provided option below the Configurations.

 

Average ( Ratings):
 
Want to help out?
 
 

New York, NY • Baltimore, MD • Vienna, VA • St. Louis, MO • Seattle, WA • 410.327.0007 • info@R2Integrated.com

Bookmark & Share Bookmark and Share