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:
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:
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') };
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';
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.
Ti.UI.Window
window to attach all UI elements onto:var win = Ti.UI.createWindow({ exitOnClose: true, title:"Open PDF Example", backgroundColor:'#fff' });
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);
Ti.UI.Window
window:var goButton = Ti.UI.createButton({ title: 'open pdf', height: '60dp', width: '150dp', top: '140dp' }); win.add(goButton);
The first example of how to use the openPDF
module is shown in the following goButton
click-event snippet:
goButton.addEventListener('click', function(e) {
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()){
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{
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); } });
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:
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);
goButton2
click event demonstrates how to open a PDF file in a dialog window:goButton2.addEventListener('click', function(e) {
isSupported
method is called to verify whether the device can read a PDF file:if(!my.pdfOpener.isSupported()){
isSupportDetail
method is called to return the reason why PDF files cannot be displayed:alert(my.pdfOpener.isSupportedDetail().reason); return; }
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} ); }); }
To close the PDF dialog programmatically, use the closeDialog
method, as shown in the following snippet:
my.pdfOpener.closeDialog();
To learn more about the libraries and frameworks used in this recipe, please visit the following links:
openPDF
module uses the Ti.UI.iOS.DocumentViewer
object to work with PDF files on the iOS platform. For additional details, please review Titanium's online documentation at http://docs.appcelerator.com.openPDF
module uses the Ti.Android.intent
object to launch a PDF viewer on the user's device. For additional information about working with Ti.Android.intent
, visit this Appcelerator blog entry at http://developer.appcelerator.com/blog/2011/09/sharing-project-assets-with-android-intents.html.openPDF
library uses the bencoding.android.tools
module's project to check if there is an available intent to open a PDF document on user's device. To learn more about this project, please visit https://github.com/benbahrenburg/benCoding.Android.Tools.18.217.199.122