PrizmDoc Viewer v13.22 Release - Updated
Developer Guide / Viewer / Architecture & Design
In This Topic
    Architecture & Design
    In This Topic

    Introduction

    The Viewer offers the following features out of the box:

    • A responsive UI
    • A jQuery plugin for embedding the full Viewer
    • Configuration options
    • A customizable UI
    • An API
    • Reusable core component

    Responsive UI

    The Viewer’s responsive UI is designed for phone, tablet, and desktop users. A single UI implementation adapts to the viewport size of the device or element in which it is embedded.

    jQuery Plugin

    A jQuery plugin is used to embed the full-featured, responsive Viewer on the page.

    Example

    $("#myDiv").pccViewer(pluginOptions);
    
    

    Configuration

    The Viewer UI and behavior can be configured when the Viewer is embedded, using JavaScript parameters.

    Example

    var pluginOptions = {
        documentID: "1234abcd",
        encryption: false,
        viewMode: "EqualWidthPages"
    };
    
    

    Configurable options include:

    • Disabling tabs
    • DRM features
    • Localization
    • Rendering options
    • Encryption
    • Default tool settings
    • Pre-defined search

    Customizable UI

    If the Viewer needs to be customized more than the configuration options allow, all of the UI code is open-source and can be modified to suit your customization needs. The open-source Viewer code is separated into CSS files, template HTML files, and JavaScript. The code leverages custom HTML attributes and Underscore.js’ templating system in order to maintain the separation of concerns.

    API

    The Viewer API offers complete control over the Viewer. The API allows callers to augment, customize, or automate the end user’s experience with the Viewer. The API functionality covers:

    • Creating and destroying the Viewer
    • Events
    • Page navigation
    • Zooming and fitting content
    • Mark (annotation and redaction) CRUD
    • Markup saving and loading
    • Customizing mouse tools
    • Searching document text
    • Printing
    • Getting page and document attributes

    Example

    var api = $("#myDiv").pccViewer(pluginOptions).viewerControl;
    api.on("PageCountReady", function() {
        api.changeToLastPage();
    });
    
    

    Reusable Core Component

    The core component used by the Viewer for rendering the document is the ViewerControl. The ViewerControl is a component that can be used independent of the full Viewer; it can be directly embedded into a page and used for building a fully custom UI:

    • The only UI of the ViewerControl is the page list, which allows scrolling through a document.
    • The ViewerControl exposes the API for programmatic control.

    • Left example above: embedding the full Viewer using the jQuery plugin.
    • Right example above: embedding the ViewerControl alone.

    The ViewerControl does not have dependencies on third-party libraries.