Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Opening PDF documents

The ability to open, view, and exchange PDF documents is a common requirement in Enterprise app development. This recipe discusses how to use the openPDF CommonJS module to view PDF documents in a cross-platform manner.

The following screenshots illustrate this recipe running on both an iPhone and an Android device:

Getting ready

The recipe uses both a CommonJS and an Android native module. These can be downloaded from the source code provided by the book, or individually through the links provided in the See also section at the end of this recipe. Installing these in your project is straightforward. Simply copy the openPDF.js file and the bencoding.android.tools folder into your Titanium project, as shown highlighted in the following screenshot:

After copying the module folder, you will need to click on your tiapp.xml file in Titanium Studio and add a reference to the bencoding.android.tools module, as shown in the following screenshot:

How to do it…

Once you have added openPDF.js and the native android module to your project, you need to create your application namespaces and use require to import the module into your code, as the following snippet demonstrates:

//Create our application namespace
var my = {
  pdfOpener : require('openPDF'),
  isAndroid : (Ti.Platform.osname === 'android')
};

Creating a link to the PDF file

The next step in this recipe is to create a variable with the path to our PDF file. For example purposes, we are using a PDF file called w4.pdf located in our project's resources directory. The following snippet demonstrates how to create this path variable:

my.pdfFile = Ti.Filesystem.resourcesDirectory + 'w4.pdf';

Creating our example UI

This recipe provides a basic UI to help illustrate how to use the openPDF module. This straightforward screen contains a button that opens a dialog providing different options the user can select to open a PDF file. If this recipe is running on an iOS device, the user will have a second button demonstrating how to open the PDF file inside the app.

We first create a Ti.UI.Window window to attach all UI elements onto:

var win = Ti.UI.createWindow({
    exitOnClose: true, title:"Open PDF Example", backgroundColor:'#fff' 
});

Next, we add a label instructing the user which button to press:

var infoLabel = Ti.UI.createLabel({
    text:'Press the button to open a PDF file', top:10, left:10, right:10, height:40, textAlign:'center'
});
win.add(infoLabel);

Next, the button that will launch our first example is added to the Ti.UI.Window window:

var goButton = Ti.UI.createButton({
    title: 'open pdf', height: '60dp', width: '150dp', top: '140dp'
});
win.add(goButton);

Opening a PDF file on the click of a button

The first example of how to use the openPDF module is shown in the following goButton click-event snippet:

goButton.addEventListener('click', function(e) {

First, the isSupported method is called to determine if the device supports PDF files. This method will return a true if supported, or a false if no support is available.
```
  if(my.pdfOpener.isSupported()){
```
Next, the file path to our PDF is provided to the open method. This will then present the user with an options dialog on how they wish to view the file:
```
    my.pdfOpener.open(my.pdfFile);
  }else{
```
If the isSupported method results a false, you can then call the isSupportedDetail method for more information on why. As the following snippet shows, you can use the reason property returned by the isSupportedDetail method to alert your user to the specific issue. You can also use the code property to create your own customized messages.
```
    alert(my.pdfOpener.isSupportedDetail().reason);
  }
});
```

Opening a PDF file within your iOS app

The iOS platform has built-in support for working with PDF files. The openPDF module leverages this platform to provide the ability to create a PDF dialog viewer within your app, as shown in the following screenshot:

In this section, a check is performed to ensure that the recipe is running on an iOS device. If so, the button goButton2 is added to our Ti.UI.Window window:
```
if(!my.isAndroid){
    var goButton2 = Ti.UI.createButton({
    title: 'open pdf menu', height: 60, width: 150d, bottom: 140
  });
  win.add(goButton2);
```
The goButton2 click event demonstrates how to open a PDF file in a dialog window:
```
  goButton2.addEventListener('click', function(e) {
```
Next, the isSupported method is called to verify whether the device can read a PDF file:
```
    if(!my.pdfOpener.isSupported()){
```
If the device does not support the displaying of PDF files, the isSupportDetail method is called to return the reason why PDF files cannot be displayed:
```
      alert(my.pdfOpener.isSupportedDetail().reason);
      return;
    }
```
Finally, the openDialog method is called to display the PDF file. The openDialog method requires two arguments. The first is a path to the PDF file that is to be displayed. The second is a configuration object containing a UI object that specifies the view relative to where the viewer should be displayed. In the following example, we provide the infoLabel label created earlier as our view object:
```
    my.pdfOpener.openDialog(my.pdfFile,
      {view:infoLabel, animated:true}
    );
  });
}
```
Tip
Additional elements can be added to the configuration object, such as the animated property to determine if an animation should be applied while opening and closing a PDF file.

To close the PDF dialog programmatically, use the closeDialog method, as shown in the following snippet:

my.pdfOpener.closeDialog();

File clean-up on closing a window

The openPDF module creates cache objects and temporary files to assist in the display process. It is important to call the dispose method when PDF operations are no longer needed:

win.addEventListener('close', function(e) {
  my.pdfOpener.dispose();
});

Tip

If you are using the openDialog option on iOS, calling dispose will close the PDF dialog as well.

Table of Contents for Opening PDF documents

Create new playlist

Sign In

Sign Up