How to work with PDF in Adobe AIR (Source Code)

AIR has worked with PDF since version 1.0. When Adobe AIR first launched, there was a great amount of focus on the PDF inclusion within the runtime and it was given equal billing with both Flash and HTML. For some reason, much of the focus on AIR development trends has been on working with ActionScript and MXML rather than PDF. Nevertheless, there is a steady and growing community of developers who find themselves facing the task of making AIR and PDF work together. This tutorial will help you understand the basic architecture and structure of an application.

The finished Flex 4 project can be downloaded from the location below (it is named MAXABC04-PDF.fxp). This application was compiled with Flash Builder 4, Flex SDK 4.01 and AIR SDK 2.5 http://www.22ndcenturyofficial.com/ForBlogDoNotDelete/

How it works:

Architecturally, the runtime engine for HTML within Adobe AIR is WebKit (http://www.webkit.org/), an open source implementation that supports many HTML 5 features. The exact version of the WebKit library varies based on the AIR version you are using. To display PDF content, the AIR runtime uses a PDF plug-in to the AIR WebKit library. For developers, you communicate to the PDF document object through the HTML DOM and by using a scripting bridge within the PDF document itself.

To build the overall project, you need four main components – a main.mxml application, an HTML file that contains a reference to the PDF, the AIR application descriptor file, and a PDF document.

The HTML file is only tasked with loading up the PDF as an object. The file is very simplistic.

The PDF document is basically a 4 page long document containing a bunch of random Latin words. The following script has been added to the PDF document.

You can examine this PDF yourself by taking it from the project referenced above and opening it with Acrobat X and using the JavaScript Editor (Reader and Acrobat both have JavaScript VMs that work at runtime).

This script simply listens for an incoming message. There are four handled messages: ZoomIn, ZoomOut, PageUp and PageDn. The switch-case statement shown above maps these messages to specific instructions known natively to the plug-in that match the basic semantics of the message.

In order to talk to the PDF, you first have to load an HTML page within your AIR project. The basic AIR source code is as follows:

On line 11, the function init() simply enables the four buttons as the HTML DOM is loaded. This is triggered via the initialize event of the application.
Line 23 contains the key function sendMessage(), which sends one of four messages to the HTML DOM. This function accepts one parameter, which is the String message sent to it based on which button is clicked. As you try to type line number 27, you will notice that the code complete does not work in Flash Builder. This is because these are dynamic objects. Line 27 creates a new Object variable called pdfObj by referencing the pdfhtml (a variable name given to the HTML component on line 28) htmlLoader.window.document object and calls the method getElementByID(). The parameter name “PDFObj” matches the name of the Object within the HTML page. Line 28 simply sends the message that corresponds to the button pushed, which then gets picked up by the script in the PDF document.

Below is a screenshot of the AIR application with the buttons that can navigate forwards and backwards, and zoom in or out.

That is pretty much a basic starter for controlling PDFs from AIR. To get more advanced functionality, you will need to study up on the scripting functions available within the PDF runtime environment and then add the script bridge necessary to control those functions. Good luck!.

Free Android App with source code

James Ward and I collaborated and wrote a simple demo app called "Scribbler".  It demonstrates some really simple concepts such as detecting screen capture and saving to the local file system on Android.  This application is a regular Flex applications that uses standard Flex 4 components (Not the new Hero/Slider framework) hence demonstrating that in some cases you can use MXML to build mobile apps.    The application is available now on the Google Android Marketplace.  We made this lame icon with "Sp" based on an indecisive moment of what to call the damn app.  If you end up having to explain it to someone say SP stands for "Sribbler Pad".

The full source code is downloadable from here.  Have fun with it!  Please tweet this (button is below) if you think others might like it.  More to follow if we are encouraged properly!

Flex/AIR Video Tutorial - working with Audio

This tutorial will show you how to build a simple MP3 player in Flex and manipulate an audio stream by coding play, pause and stop buttons. For the source code or project, please email me at dnickull at adobe dot com.

Tutorial on Flex 3 Charting

ADC presents has just posted another one of the videos on how to make a chart using a multi-dimensional array[] in AS3. The data provider is as follows:

[Bindable]
     private var medalsAC:ArrayCollection = new
     ArrayCollection([
         {Country: "Germany", Beer:12, Hockey: 2, Fun: 99},
         {Country: "Canada", Beer:12, Hockey: 28, Fun: 99},
         {Country: "England", Beer:49, Hockey: 12, Fun: 10}            
     ]);

In this tutorial you will learn how to get this to render into a bar chart that looks like this:



Here is the video:




The link is http://tv.adobe.com/#vi+f1472v1124

Video: How to build chromeless AIR apps in 5 minutes (update)

I had previously posted a technical article on this topic however it is out of date due to changes to the Adobe AIR application descriptor file. This video is an updated tutorial on this topic. You can download the complete project files from http://www.web2open.org/codesamples/AIR-ApplePear.zip.