Using Components to Design a PDF Viewer Application

Several web components are provided with the PDF Viewer. A web application developed with PDF Viewer would typically contain at least the following components:

• one <pdf-application> component, which is responsible for creating a secure session between the browser (front end) and the PDF Viewer API (back end). (This element is invisible.)
• one <pdf-document> component per PDF document that the web application manages. This element is also invisible. It is responsible for loading a PDF, storing temporary changes, and saving an updated PDF.
• one or more viewer components, such as a pages viewer, thumbnail viewer, or bookmark viewer, to display a PDF and allow navigation as needed.
• one <pdf-uploader> component to allow a user to browse a folder, choose a file and load it into a <pdf-document> component.

A simple application using these components might look like this:

<pdf-application private-key="private" public-key="public" />
<pdf-document name="document1" />
<pdf-pages name="viewer1" document="document1" />
<pdf-uploader document="document1" />

View Components

A view component provides its own specialized view of a document. Each view has a document property that references a document element. Examples of views are:

• pdf-pages: displays one or more pages of the associated document in a detailed manner, including layers, links, widgets, etc.
• pdf-thumbnail: displays one or more pages of the associated document as thumbnails
• pdf-bookmarks: displays the bookmarks tree of the associated document

Many PDF Viewer components have a unique name property, which allows other components to find it and interact with it.

The PDF Viewer components are designed to interact directly with each other, but also offer methods and events which allow customized interaction with user components. For example, it is easy to create a button to open a new file or save an existing document. Such a button simply calls the corresponding method on the <pdf-document> component. (Provide example to save a document.)

This flexible design allows for rapid development of common web applications (such as a PDF viewer), but also permits extensive customization and control for more sophisticated applications.