Cross-scripting PDF content in an Adobe AIR application
Requirements
Prerequisite knowledge
General experience building HTML-based applications is suggested. For more details on getting started with this Quick Start, refer to Building the Quick Start sample applications with HTML.
User level
Intermediate
Required products
Sample files
The PDF Control sample application loads a PDF file. You navigate through the file using user interface provided by HTML (not by the embedded PDF renderer). The zoom and navigation buttons are at the top of the application (see Figure 1).
The PDF Control sample application demonstrates the following features of working with PDF content in Adobe AIR:
- Adding PDF content to an AIR application
- Using Acrobat 8 or later to add JavaScript to a PDF file
- Using ActionScript in an AIR application to communicate with document-level JavaScript in a PDF file
Note: This is a sample application provided, as is, for instructional purposes.
Understanding the code
This article does not describe all of the HTML and JavaScript code in the source files. It only describes how to communicate from JavaScript in the HTML page with JavaScript in a PDF page.
The message handler JavaScript function in the PDF file
In document-level JavaScript in a PDF file, you can assign functions to the onMessage, onError, and onDisclose properties the msgHandler property of the hostContainer object. These functions define how the PDF file handles messages sent to it from the host container.
The test.pdf file, included with the sample files, includes the following document-level JavaScript:
function myOnMessage(aMessage)
{
if (aMessage.length==1) {
switch(aMessage[0])
{
case "ZoomIn":
zoom *= 2;
break;
case "ZoomOut":
zoom /= 2;
break;
case "PageUp":
pageNum--;
break;
case "PageDn":
pageNum++;
break;
default:
app.alert("Unknown message: " + aMessage[0]);
}
}
else
{
app.alert("Message from hostContainer: \n" + aMessage);
}
}
function myOnDisclose(cURL,cDocumentURL)
{
return true;
}
function myOnError(error, aMessage)
{
app.alert(error);
}
var msgHandlerObject = new Object();
msgHandlerObject.onMessage = myOnMessage;
msgHandlerObject.onError = myOnError;
msgHandlerObject.onDisclose = myOnDisclose;
this.hostContainer.messageHandler = msgHandlerObject;
This code defines functions for handling incoming messages. It sets these functions as the onMessage, onError, and onDisclose properties of an object, msgHandlerObject. The code assigns the msgHandlerObject object to the msgHandler property of the hostContainer object. The myOnDisclose() function checks the first string in the incoming message array, and takes the appropriate action. For example, if the string is "ZoomIn", the code sets a PDF JavaScript property to zoom the page in: zoom *= 2.
This example application shows basic page navigation and display scale factor. Full details on other JavaScript extensions for Adobe Acrobat are provided at the Adobe Acrobat Developer Center.
Adding document-level JavaScript to a PDF file
Follow these steps:
- Create a PDF document named test.pdf and save it to the project directory for your application.
- Open the PDF in Acrobat 8 or later.
- On the Advanced menu, select Document Processing > Document JavaScripts.
- In the JavaScript Functions dialog box, type
myOnMessageas the Script Name, and then click the Add button. - In the JavaScript Editor window, edit the text to match the following, and then click the OK button.
function myOnMessage(aMessage)
{
if (aMessage.length==1) {
switch(aMessage[0])
{
case "ZoomIn":
zoom *= 2;
break;
case "ZoomOut":
zoom /= 2;
break;
case "PageUp":
pageNum--;
break;
case "PageDn":
pageNum++;
break;
default:
app.alert("Unknown message: " + aMessage[0]);
}
}
else
{
app.alert("Message from hostContainer: \n" + aMessage);
}
}
function myOnDisclose(cURL,cDocumentURL)
{
return true;
}
function myOnError(error, aMessage)
{
app.alert(error);
}
var msgHandlerObject = new Object();
msgHandlerObject.onMessage = myOnMessage;
msgHandlerObject.onError = myOnError;
msgHandlerObject.onDisclose = myOnDisclose;
this.hostContainer.messageHandler = msgHandlerObject;
Note: For a description of this code, see the previous section, "The message handler function in the JavaScript of the PDF file."
- Close the JavaScript Functions dialog box.
- Select the File > Document Properties command.
- In the Document Properties dialog box, select the following options:
- Navigation tab—Page Only
- Page layout—Single Page
- Maginfication—Default
- Open to Page—1
- Hide menu bar—selected
- Hide tool bars—selected
- Hide window controls—selected
- Save the PDF document to your project directory, and name it test.pdf.
Loading PDF content into the AIR application
The index.html page loads the PDF content using an object tag:
<object id="PDFObj"
type="application/pdf"
width="100%"
height="90%"/>
Normally you would load the PDF content using a data attribute in the object tag. However, versions 8.2.3 and 9.0 of Adobe Reader and Acrobat do not allow cross-scripting PDF content in the AIR application sandbox. To support these versions, the init() function maps the PDF content to a file: URL:
function init()
{
var pdfFile = window.runtime.flash.filesystem.File.applicationDirectory.resolvePath("test.pdf");
document.getElementById("PDFObj").data = pdfFile.url;
}
The init() function is called in the onload attribute of the body tag:
<body onload="init()"/>
This issue is corrected in Acrobat and Adobe Reader 9.1.
Communicating with the PDF file
The HTML code for the sample application defines four Button components:
<table>
<tr>
<td>
Zoom:
<input type="button" value="+" onclick="sendMessage('ZoomIn')"/>
<input type="button" value="-" onclick="sendMessage('ZoomOut')"/>
</td>
<td>
Navigate:
<input type="button" value="<" onclick="sendMessage('PageUp')"/>
<input type="button" value=">" onclick="sendMessage('PageDn')"/>
</td>
</tr>
</table>
When the user clicks any of the Button components, the click event handler calls the sendMessage() method. For example, clicking the first button causes the following code to execute:
sendMessage('ZoomIn')
The sendMessage() method calls the postMessage() method of the PDF object embedded in the page. The postMessage() method takes an array of message strings as a parameter:
function sendMessage(message)
{
try
{
document.getElementById("PDFObj").postMessage([message]);
}
catch (error)
{
alert( "Error: " + error.name + "\nError message: " + error.message);
}
}
The document-level JavaScript in the PDF file has a hostContainer.messageHandler object defined. This object determines how to processes the incoming message. (For details, see the section "The message handler JavaScript function in the PDF file" above.) In this application, the PDF content navigates or magnifies.
