DocumentViewer example

The index.html file containing JavaScript that makes use of the DocumentViewer API functionality is listed below.

<!DOCTYPE html>
<html manifest="manifest.appcache">
  <head>
    <title>Document viewer example</title>
    <script type="text/javascript">
      
      function printText(str) {
        var d = document.getElementById('results');
        d.appendChild(document.createTextNode(str));
        d.appendChild(document.createElement('br'));
        d.scrollTop = d.scrollHeight;
      };

      function clearOutput() {
        var d = document.getElementById('results');
        d.innerHTML = "";
      };

      var openCallbacks = {
        onProgress: function (progress) {
          printText('Progress: ' + progress * 100);
        },
        onSuccess: function () {
          printText('SUCCESS!');
        },
        onFailure: function (error) {
          printText('FAILURE! ' + error.description + ' code: ' + error.code);
        }
      };

      var checkCallbacks = {
        onResult: function (result) {
          printText("SUCCESS! " + result);
        },
        onFailure: function (error) {
          printText("FAILURE! " + error.description + " code: " + error.code);
        }
      };

      function viewDoc(opening) {
        clearOutput();
        var e = document.getElementById("filetypeSelector");
        var url = e.options[e.selectedIndex].value;
        printText(e.options[e.selectedIndex].text + " selected");

        if (opening == true)
          window.launchbox.DocumentViewer.open(url, openCallbacks);
        else
          window.launchbox.DocumentViewer.canOpen(url, checkCallbacks);
      };

	</script>
  </head>
  <body>
    <header>
      <h3><span>
          Document Viewer API usage example
        </span>
      </h3>
    </header>

    <div>
      <form>
        <select id="filetypeSelector">
          <option value="http://www.wave.org.au/jupgrade/images/sample.pdf">
            PDF File
          </option>
          <option value="http://www.snee.com/xml/xslt/sample.doc">
            DOC File
          </option>
          <option value="http://www.uwcne.org/pptsample.ppt">
            PPT File
          </option>
          <option value="http://www.pega.com/sites/all/themes/pega_2014/logo.png">
            PNG File
          </option>
        </select>
        <input type="button" onclick="viewDoc(false);" value="Check if file can be displayed on this device"/>
        <input type="button" onclick="viewDoc(true);" value="Open file"/>
      </form>
      <br/>
      <input type="button" onclick="clearOutput()" value="Clear output"/>

    </div>
    <hr/>
    <div id="results">
    </div>
  </body>
</html>

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.DocumentViewer</id>
  <version>1.0.0</version>
  <name>Document Viewer API usage example</name>
</webapp-descriptor>

Document Viewer

DocumentViewer example

Related topics