ReaderControl JavaScript Tutorial

PDFTron SilverDox SDK

previous page next page
Collapse image Expand Image Copy image CopyHover image

Introduction

The SilverDox ReaderControl is viewer built using SilverDox DocumentViewer control. A ReaderControl provides buttons for page navigation, a zoom slider, pan and text select modes, full text search, a thumbnail viewer and a bookmark viewer.

The ReaderControl sample included in SilverDoxSdk/Samples/ReaderControl allows users to take advantage of JavaScript and Silverlight interoperability. This means that users can control, interact, and communicate with the SilverDox ReaderControl using JavaScript code embedded or added in the HTML page which hosts the control.

This tutorial describes the steps to get started using JavaScript code to interact with the SilverDox ReaderControl provided out-of-the box.  A sample HTML page with HTML controls and JavaScript code communicating with the SilverDox ReaderControl can be found at SilverDoxSDK\Samples\ReaderControlSample\ReaderControlSample.Web

Using JavaScript with the ReaderControl

1.     Create an HTML page.

2.      Add the following on the <head> tag of the HTML page.

CopyAdded to HTML header
<script type="text/javascript" src="ReaderControl.js"></script>

This will allow you to use the ReaderControl class in your JavaScript code.

3.      Add the following code within the <body> tag of the HTML page to embed the Silverlight control.

CopyAdded to HTML body
<script type="text/javascript">
var readerCtrl = new
ReaderControl("rc1",
"ReaderControlSample.xap",
false, null);
</script>

The script above will create and reader a SilverDox ReaderControl plugin on the HTML page.

4.      It is now possible to use the “readerCtrl” variable to invoke ReaderControl’s methods. For example, the following code demonstrates how to load a document:

CopyTo load a document (in Silverlight)
                readerCtrl.loadDocument("http://www.pdftron.com/sample.xod", "");

This code can be added to an HTML control’s onclick event handler. For example, the code below loads a document when the HTML button control is clicked:

CopyTo load a document (in Silverlight)
                <input type="button" value="Load" onclick="readerCtrl.loadDocument('http://www.pdftron.com/sample.xod', '');" />

Please refer to the API documentation for other methods which can be used. The API reference can be found at http://www.pdftron.com/silverdox/jsdoc/

5.      Save the HTML page. Make sure to put both ReaderControl.js, and ReaderControlSample.xap on the same directory as the HTML page.

 

previous page start next page