Starting a web app from SPARKL

You can boot web pages from SPARKL by defining new tabserver connections.

Procedure

  1. Create a new service.
  2. Use the tabserver_connection value for provisioning it.
  3. Write the JavaScript of the service, which loads it as a web page.

Results

When you create a new tabserver connection, the Tabserver main page is loaded.

All services provisioned with tabserver_connection are included into the list of available tabserver connections, as shown in Figure 1.

Figure: Tabserver - List of Connections


Example

In many cases you want the service to run in a custom web page. A way to achieve that is:
  1. To detect whether the default Tabserver page is loaded. If so, the service loads the custom web page.
  2. When that other web page is loaded, the service fires a notify or solicit that starts a transaction.

See Figure 2 and Figure 3 for an example.

Figure: Robot service

<service name="Robot" 
  provision="tabserver_connection">
  <prop name="tabserver.browser.src" 
    src="/demo/robot/power_on.js"/>
</service>

Figure: JavaScript implementation of Robot - power_on.js

(function($) {

  console.warn("Bootstrapping the robot...");
  var robotWindow;

  /**
   * Loads the robot car web page.
   */
  var loadPage = function(service) {
    var serviceName =
      service.serviceInstance.openEvent.pathname();
    var protocol =
      window.location.protocol == "http:" ?
        "ws:" :
        "wss:";
    var host =
      window.location.host;
    var path =
      "/svc_tabserver/connect/";
    var wsUrl =
      protocol + "//" + host + path + serviceName;

    console.warn("Loading robot page");

    window.open("/demo/robot/robot.html"
        + "?connect=" + wsUrl, "robot");

    window.close();
  };

  /**
   * Fires the notify that starts the robot.
   */
  var powerOn = function(service) {
    console.warn("Powering on the robot...");
    var notify =
      service.notify("PowerOn")
        .send();
  };

  /**
   * Robot service implementation has open event only.
   */
  $.service({

    /**
     * This code executes upon open of the robot service.
     * If executing in the page, fire the notify event to start.
     * Otherwise, load the page and exit.
     */
    onInit : function() {
      var service = this;

      if (document.firstElementChild.attributes["robot"]) {
        powerOn(service);
      }
      else {
        robotWindow =
          loadPage(service);
      }
    }
  });
})(sparkl);