<< Click to Display Table of Contents >>

Running Viewer - HTML5JS Viewer

Copy the viewer installation files to a folder on the web server. And add viewer parameters on a web page to run the Viewer.

Copy the viewer installation files to a folder on the web server

Copy the viewer installation files to a folder on the web server.

Add viewer parameters to run Viewer and to bind report

Declare a Web page in HTML5 format to run the HTML5JS Viewer.

Next, set the path of Viewer installation files, Viewer ID, OZ Server information, report name, etc.

<!DOCTYPE html>

<html style="height:100%">

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"/>

<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="http://127.0.0.1:8080/ozrviewer/ui.dynatree.css" type="text/css"/>

<script type="text/javascript" src="http://127.0.0.1:8080/ozrviewer/jquery.dynatree.js" charset="utf-8"></script>

<script type="text/javascript" src="http://127.0.0.1:8080/ozrviewer/OZJSViewer.js" charset="utf-8"></script>

<!-- If you want to run the HTML5SVG viewer please change the OZJSViewer.js to OZJSSVGViewer.js.

<script type="text/javascript" src="http://127.0.0.1:8080/ozrviewer/OZJSSVGViewer.js" charset="utf-8"></script>

-->

<!-- When using a PDF document or attaching a PDF file to a report, please set compatibility.js and pdf.js to be loaded.

<script type="text/javascript" src="http://127.0.0.1:8080/ozrviewer/pdf_js/web/compatibility.js" charset="utf-8"></script>

<script type="text/javascript" src="http://127.0.0.1:8080/ozrviewer/pdf_js/build/pdf.js" charset="utf-8"></script>

<script type="text/javascript">

   if (typeof PDFJS != "undefined") {

       //cMapUrl must match the path of pdf.js file. If it is different from the default path, be sure to correct it.

       PDFJS.cMapUrl = "http://127.0.0.1:8080/ozrviewer/pdf_js/web/cmaps/";

       PDFJS.cMapPacked = true;

   }

</script>

-->

</head>

<body style="width:98%;height:98%">

<div id="OZViewer" style="width:98%;height:98%"></div>

<script type="text/javascript">

   function SetOZParamters_OZViewer() {

       var oz;

       oz = document.getElementById("OZViewer");

       oz.sendToActionScript("connection.servlet", "http://127.0.0.1:8080/oz/server");

       oz.sendToActionScript("connection.reportname", "category_path/sample.ozr");

       return true;

   }

   start_ozjs("OZViewer", "http://127.0.0.1:8080/ozrviewer/");

</script>

</body>

</html>

Using script src tag, set jquery-2.0.3.min.js, jquery-ui.min.js, jquery.dynatree.js, OZJSViewer.js path. And using link rel tag, set jquery-ui.css, ui.dynatree.css path. And using div tag, set viewer id, width/height of viewer window.

getElementById function sets viewer id, SetOZParamters_ViewerID function sets connection.servlet to OZ server path and connection.reportname to the path and name of a report to bind. start_ozjs function runs viewer.

Run Viewer

Run the web page and check if the report has been bound.

To execute HTML5JS Viewer in Mobile UI, please write web page as below.

<!DOCTYPE html>

<html style="height:100%">

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>

<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css"/>

<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>

<link rel="stylesheet" href="http://127.0.0.1:8080/ozrviewer/ui.dynatree.css" type="text/css"/>

<script type="text/javascript" src="http://127.0.0.1:8080/ozrviewer/jquery.dynatree.js" charset="utf-8"></script>

<script type="text/javascript" src="http://127.0.0.1:8080/ozrviewer/OZJSViewer.js" charset="utf-8"></script>

<!-- If you want to run the HTML5SVG viewer please change the OZJSViewer.js to OZJSSVGViewer.js.

<script type="text/javascript" src="http://127.0.0.1:8080/ozrviewer/OZJSSVGViewer.js" charset="utf-8"></script>

-->

<script src="http://127.0.0.1:8080/ozrviewer/jquery.mouseSwipe.js" type="text/javascript"></script>

<!-- When using a PDF document or attaching a PDF file to a report, please set compatibility.js and pdf.js to be loaded.

<script type="text/javascript" src="http://127.0.0.1:8080/ozrviewer/pdf_js/web/compatibility.js" charset="utf-8"></script>

<script type="text/javascript" src="http://127.0.0.1:8080/ozrviewer/pdf_js/build/pdf.js" charset="utf-8"></script>

<script type="text/javascript">

   if (typeof PDFJS != "undefined") {

       //cMapUrl must match the path of pdf.js file. If it is different from the default path, be sure to correct it.

       PDFJS.cMapUrl = "http://127.0.0.1:8080/ozrviewer/pdf_js/web/cmaps/";

       PDFJS.cMapPacked = true;

   }

</script>

-->

</head>

<body style="height:100%">

<div id="OZViewer" style="width:100%;height:100%;overflow:hidden"></div>

<script type="text/javascript">

   function SetOZParamters_OZViewer() {

       var oz;

       oz = document.getElementById("OZViewer");

       oz.sendToActionScript("connection.servlet", "http://127.0.0.1:8080/oz/server");

       oz.sendToActionScript("connection.reportname", "category_path/sample.ozr");

       return true;

   }

   start_ozjs("OZViewer", "http://127.0.0.1:8080/ozrviewer/", true);

</script>

</body>

</html>