Logger example

The index.html file that makes use of the Logger API functionality is listed below.

<!DOCTYPE html>
<html manifest="manifest.appcache">
  <head>
    <title>Logging API sample</title>
    <link rel="stylesheet" href="../assets/style.css" type="text/css" media="all"/>
    <script type="text/javascript">
      window.onLaunchboxLoaded = function(startCause, willShow) {
        console.log('API Loaded');
        console.log('Build: ' + window.launchbox.Container.version);
        console.log('OS: ' + window.launchbox.Container.osName + ' ' + window.launchbox.Container.osVersion);
        console.log('Network: ' + window.launchbox.Container.networkStatus.type);
        restoreLogLevel();
        window.launchbox.SplashScreen.hide();
      };

      function printText(str) {
        var d = document.getElementById('results');
        d.innerHTML += "<br/>" + str;
        d.scrollTop = d.scrollHeight;
      }

      function clearText() {
        var d = document.getElementById('results');
        d.innerHTML = "";
      }
    </script>
    <script src="main.js"></script>
  </head>
  <body>
    <header>
      <h3>AMP Hybrid Client
        <span>logging api example</span>
      </h3>
    </header>
    <div class="title">This Application demonstrates usage of Logger JavaScript API provided by AMP Hybrid Client.</div>
    <table width="100%">
      <tr>
        <td width="50%" style="border-right: 1px solid;" align="center">
          <div id="silent" onclick="setLogLevel('silent');">SILENT</div>
        </td>
        <td width="50%" align="center">
          <div id="error" onclick="setLogLevel('error');">ERROR</div>
        </td>
      </tr>
      <tr>
        <td width="50%" style="border-right: 1px solid;" align="center">
          <div id="warning" onclick="setLogLevel('warning');">WARNING</div>
        </td>
        <td width="50%" align="center">
          <div id="info" onclick="setLogLevel('info');">INFO</div>
        </td>
      </tr>
      <tr>
        <td width="50%" style="border-right: 1px solid;" align="center">
          <div id="debug" onclick="setLogLevel('debug');">DEBUG</div>
        </td>
        <td width="50%" align="center">
          <div id="verbose" onclick="setLogLevel('verbose');">VERBOSE</div>
        </td>
      </tr>
    </table>
    <div style="display: block; padding: 10px;">
      <input type="button" onclick="setLogToConsole(true);" value="Turn on logging to console" />
      <input type="button" onclick="setLogToConsole(false);" value="Turn off logging to console" />
      <input type="button" onclick="setLogToFile(true);" value="Turn on logging to file" />
      <input type="button" onclick="setLogToFile(false);" value="Turn off logging to file" />
      <input type="text" id="txtMaxFileSize" />
      <input type="button" onClick="setTotalDiskQuota();" value="Set disk quota (in bytes)" />
      <input type="button" onclick="readLogTail(10);" value="Read last 10 log records" />
    </div>
    <div style="padding: 10px;margin-top:-20px;">
        <input type="button" onclick="clearText();" value="Clear all text"/>
    </div>
    <div id="results"></div>
  </body>
</html>

The contents of the main.js file containing JavaScript used by the above application are listed below:

function setLogLevel(levelString) {
  document.getElementById("silent").className = "";
  document.getElementById("error").className = "";
  document.getElementById("warning").className = "";
  document.getElementById("info").className = "";
  document.getElementById("debug").className = "";
  document.getElementById("verbose").className = "";

  document.getElementById(levelString).className = "text-bold";

  var logLevel;

  if (levelString == "silent") {
    logLevel = window.launchbox.Logger.LogLevel.SILENT;}
  else if (levelString == "error") {
    logLevel = window.launchbox.Logger.LogLevel.ERROR;}
  else if (levelString == "warning") {
    logLevel = window.launchbox.Logger.LogLevel.WARNING;}
  else if (levelString == "info") {
    logLevel = window.launchbox.Logger.LogLevel.INFO;}
  else if (levelString == "debug") {
    logLevel = window.launchbox.Logger.LogLevel.DEBUG;}
  else if (levelString == "verbose") {
    logLevel = window.launchbox.Logger.LogLevel.VERBOSE;}

  window.launchbox.Logger.logLevel = logLevel;
  printText("Log level is set to " + levelString);
  console.log("Log level is set to " + levelString);
}

function restoreLogLevel() {
  var logLevel = window.launchbox.Logger.logLevel;

  if (logLevel == window.launchbox.Logger.LogLevel.SILENT) {
    document.getElementById("silent").className = "text-bold";}
  else if (logLevel == window.launchbox.Logger.LogLevel.ERROR) {
    document.getElementById("error").className = "text-bold";}
  else if (logLevel == window.launchbox.Logger.LogLevel.WARNING) {
    document.getElementById("warning").className = "text-bold";}
  else if (logLevel == window.launchbox.Logger.LogLevel.INFO) {
    document.getElementById("info").className = "text-bold";}
  else if (logLevel == window.launchbox.Logger.LogLevel.VERBOSE) {
    document.getElementById("verbose").className = "text-bold";}
}

function setLogToConsole(shouldLogToConsole) {
  window.launchbox.Logger.logToConsole = shouldLogToConsole;
  printText("Log to console is set to " + shouldLogToConsole);
  console.log("Log to console is set to " + shouldLogToConsole);
}

function setLogToFile(shouldLogToFile) {
  window.launchbox.Logger.logToFile = shouldLogToFile;
  printText("Log to file is set to " + shouldLogToFile);
  console.log("Log to file is set to " + shouldLogToFile);
}

function setTotalDiskQuota() {
  var txtMaxSize = document.getElementById("txtMaxFileSize");
  var maxSize;
  if (isNaN(txtMaxSize.value)) {
    maxSize = 20 * 1024 * 1024; // 20MB}
  else {
    maxSize = parseInt(txtMaxSize.value);
  }
  window.launchbox.Logger.totalDiskQuota = maxSize;
  printText("Disk quota for storing logs is set to " + maxSize + " B");
  console.log("Disk quota for storing logs is set to " + maxSize + " B");
}

function readLogTail(recordCount) {
  window.launchbox.Logger.readLogTail(recordCount, function(logs) {
    printText("Requested " + recordCount + " last log records, received: " + logs.length);
    console.log("Requested " + recordCount + " last log records, received: " + logs.length);
    for (var i = 0; i < logs.length; i++) {
      printText(logs[i]);
    }
  });
}

The contents of the cache manifest file called manifest.appcache for this application are listed below:

CACHE MANIFEST

CACHE:
index.html

NETWORK:
*

The webapp-descriptor.xml file for this application is defined in the following way:

<?xml version="1.0" encoding="UTF-8"?>
<webapp-descriptor xmlns="http://www.pega.com/application-hosting/
web-app-descriptor/2.0">
    <id>com.pega.sample.Logger</id>
    <version>1.0.0</version>
    <name>Sample Logger api usage</name>
</webapp-descriptor>

Logger

Logger example

Related topics