Genero Browser Client User Guide - Redirect application end

When an application ends, you may want to redirect the user to a Web page. This procedure shows you how to specify a redirection URL when the application ends.

Important : For your consideration

Starting with GAS 3.20, you can specify a new redirection URL by providing an END_URL element in the application configuration file. This is the preferred method. For details on setting this parameter, see the Genero Application Server User Guide.

Overview

This procedure is for Web applications that are not yet running on GAS 3.20.

This customization sample extends the SessionEndWidget to automatically redirect the user to a specified URL after a set number of milliseconds.

Create the necessary files

The files needed for this procedure are:

MySessionEndWidget.js
MySessionEndWidget.tpl.html
MySessionEndWidget.scss

Create MySessionEndWidget JavaScript and template files

Create and edit file gbc-project-dir/customization/customization-project-dir/js/MySessionEndWidget.js:

"use strict";

modulum('MySessionEndWidget', ['WidgetBase', 'WidgetFactory'],
function(context, cls) {

 /**
  * @class MySessionEndWidget
  * @memberOf classes
  * @extends classes.WidgetBase
  */
 cls.MySessionEndWidget = context.oo.Class(cls.SessionEndWidget, function($super) {
   return /** @lends classes.MySessionEndWidget.prototype */ {
     __name: "MySessionEndWidget",

     setHeader: function(message) {
       this._element.getElementsByClassName("myHeaderText")[0].innerHTML = message;
     },

     setSessionLinks: function(base, session) {
       $super.setSessionLinks.call(this, base, session);

       // update redirection link url of the template
       var redirectionLink = this._element.getElementsByClassName("redirectionLink")[0];
       redirectionLink.text = "Redirection to www.google.com in 10 seconds. Click here to go now.";
       var url = "http://www.google.com";
       redirectionLink.href = url;

       var modelHelper = new cls.ModelHelper(this);

       // launch the redirection after a delay of 10 seconds
       // to remove the delay, remove the _registerTimeout function
       this._registerTimeout(function () {
         // check if an application is running in the current session before reloading
         if(!modelHelper.getCurrentApplication()) {
           window.location = url;
         }
       }.bind(this), 10000); // 10000ms
     }
   };
 });

  cls.WidgetFactory.registerBuilder('SessionEnd', cls.MySessionEndWidget);
});

Create and edit file gbc-project-dir/customization/customization-project-dir/js//MySessionEndWidget.tpl.html:

<div>
 <div class="mt-card">
   <div class="mt-card-richhead">
     <div class="mt-card-header-text">
         <span class="myHeaderText">
         </span>
       <br/><a class="redirectionLink" data-i18n="mycusto.session.redirectionText"></a>
     </div>
     <span class="mt-card-header-rightpic"><i class="zmdi zmdi-close-circle"></i></span>
   </div>
   <div class="mt-card-body">
     <div class="message hidden"></div>
     <p class="session hidden">
       <span class="sessionTitle" data-i18n="gwc.app.ending.session">Session ID</span> :
       <span class="sessionID"></span>
     </p>
     <ul class="mt-actions">
       <li class="mt-action vmLink from-session hidden">
         <a target="_blank" title="Virtual Machine log">
           <i class="zmdi zmdi-file-text"></i> <span class="sessionVMLog"
                                                     data-i18n="gwc.app.logs.vm">Get the VM Log</span>
         </a>
       </li>
       <li class="mt-action uaLink from-session hidden">
         <a target="_blank" title="Proxy log">
           <i class="zmdi zmdi-file-text"></i> <span class="sessionVMLog" data-i18n="gwc.app.logs.proxy">Get the Proxy Log</span>
         </a>
       </li>
       <li class="mt-action auiLink mt-as-link from-session_ hidden">
         <a title="Aui log">
           <i class="zmdi zmdi-file-text"></i> Get the AUI log
         </a>
       </li>
       <li class="mt-action restartApp from-ua hidden">
         <a title="Restart the app">
           <i class="zmdi zmdi-repeat"></i> <span class="sessionVMLog" data-i18n="gwc.app.restart">Restart the same application</span>
         </a>
       </li>
     </ul>
   </div>
   <div class="mt-card-actions">
     <button type="button" class="mt-button mt-button-flat closeApplicationEnd" aria-label="Close">
       <span aria-hidden="true" data-i18n="gwc.app.close">CLOSE</span>
     </button>
   </div>
 </div>
</div>

Create MySessionEndWidget.scss

Create and edit file gbc-project-dir/customization/customization-project-dir/sass/MySessionEndWidget.scss:


.gbc_MySessionEndWidget {
  position: absolute;
  top: 5px;
  left: 5px;
  bottom: 5px;
  right: 5px;
  display: flex;
  flex-direction: column;
}
[__MySessionEndWidget].mt-card {
  margin: 16px;
}
[__MySessionEndWidget].mt-card-richhead {
  display: flex;
  align-items: center;
}
[__MySessionEndWidget].mt-card-header-text {
  padding-left: 32px;
}
[__MySessionEndWidget].session {
  padding: 32px 16px 16px 16px;
  margin: 0;
}
[__MySessionEndWidget].message {
  border-bottom: 1px solid $theme-separator-color;
}
[__MySessionEndWidget].message, [__MySessionEndWidget].mt-actions {
  padding: 16px 32px;
}
[__MySessionEndWidget].mt-action {
  margin-bottom: 4px;
}
[__MySessionEndWidget].mt-card-actions {
  margin-bottom: 16px;
}
[__MySessionEndWidget].redirectionLink {
  font-size:60%;
}

NOTE: You can define the custom style you want here for your widget.

Update customization.scss

Open the gbc-project-dir/customization/customization-project-dir/sass/customization.scss file for editing.

Copy the code shown in the example to import the MySessionEndWidget.scss file and save.

@import "MyMainContainerWidget";
@import "MySessionEndWidget";

Edit MySessionEndWidget.js

Open gbc-project-dir/customization/customization-project-dir/js/MySessionEndWidget.js with a text editor.

To change the redirect URL, replace "http://www.google.com" with the desired URL.

{
  // update redirection link url of the template
var redirectionLink = this._element.getElementsByClassName("redirectionLink")[0];
redirectionLink.text = "Redirection to www.google.com in 10 seconds. Click here to go now.";
var url = "http://www.google.com";
redirectionLink.href = url;
}

To change the length of the delay before redirecting, replace "10000" with the number of milliseconds to delay.

{
  var modelHelper = new cls.ModelHelper(this);
// Launch the redirection after a delay of 10 seconds
// To remove the delay, remove the setTimeout, but keep the 'if' block
setTimeout(function () {
    // check if an application is running in the current session before reloading
    if(!modelHelper.getCurrentApplication()) {
        window.location = url;
    }
}.bind(this), 10000); // 10000ms

}

To eliminate the delay, remove the setTimeout function code surrounding window.location = url.

{
  var modelHelper = new cls.ModelHelper(this);
    // check if an application is running in the current session before reloading
    if(!modelHelper.getCurrentApplication()) {
        window.location = url;
    }
}

NOTE: This does not completely halt the display of the end page. The ending page flashes briefly, as redirection occurs only after the ending page displays.

Compile

$ gbc build --customization customization-project-dir

Test

Test the redirection works as expected by reopening and closing your application.

TIP: You may need to use CTRL + F5 to clear the browser cache before you see your changes.