Accessibility

Table of Contents

Building an XML viewer on AIR with Flex

Publishing and testing the AIR application

Testing the application while in Flex Builder is as simple as selecting Run > Run main from the menu bar.

Creating the Adobe AIR installer for deployment is just as easy, using the Export Release Build feature, and clicking through the wizard. By default, the name of the AIR file exported is main.air (because the wizard takes its cue from the main.mxml component); you may want to edit this to something more descriptive, such as XML-viewer.air (see Figure 4).

Using the export wizard.

Figure 4. Use the export wizard.

Click Next, and you are asked for a digital signature to be used to sign your application (see Figure 5).

Note: You must digitally sign an AIR application before you can distribute it. Digitally signing your AIR apps instill trust in your users that the application has not been tempered with by a third party. For more details, see Todd Prekaski's Digitally signing Adobe AIR applications.

Provide a digital certificate.

Figure 5. Provide a digital certificate.

If this is your first AIR project, then you will want to create a digital certificate so you can sign your application (unless you already have one, in which case, use that).

Note: For testing purposes you can use a self-signed certificate (see Figure 6).

Provide a digital certificate.

Figure 6. Provide a digital certificate.

After you have assigned a digital certificate, the final step is to specify what files to include in the AIR file. Just accept the default setting, which includes all the files (see Figure 7).

Include the dependent files of your AIR
application.

Figure 7. Include the dependent files of your AIR application.

To install the application on your computer, first locate and double-click the AIR installer file in your project folder. The installer first provides some information on the potential security risks, but since you built this application, you are pretty sure it is OK, and click Install (see Figure 8).

Note: If your AIR app is digintally signed by a certificate authority and not self-signed (as in this example), the Publisher in Figure 8 would be identified by name.

Installing the application.

Figure 8. Install the application.

The final step is to choose a location for the application (see Figure 9). You can accept the default location, or choose another one. When the Start application after installation check box is selected, you'll see the application pop up almost immediately after you click Continue (see Figure 10).

Provide a digital certificate.

Figure 9. Provide a digital certificate.

The XML Viewer sample application —at our
command.

Figure 10. The XML Viewer sample application—at our command.

Where to go from here

With less than 300 lines of code, you have a functional and fairly rich application. You also have a design that could likely be adapted for other document viewer applications.

From here, you could take this code in various directions. For example, you could improve the look and feel of the application, standardize and centralize the formatting of components, editing skins, using CSS styles, and so on. Check the documentation and samples for the MX:Style component, and explore how Flex transitions can add animated effects that make applications more engaging.

The XML is loaded locally in this application, and there are interesting ways in which it could be enhanced to gather or synchronize its content over the Internet. For example, you could provide a user interface or other control to allow users to select the location of the XML data file, rather than have it hard-coded. The server architecture could be as simple as files hosted on a web server, or you could have a more sophisticated system using PHP or Cold Fusion on the back end. AIR provides features for local file and data storage and synchronization, so you could develop a sophisticated system that operates both online and offline.

The DTD used in this example results in XML files that are self-contained. In contrast, DITA and other document models enable reuse of, and reference to XML elements split across many different files. You could extend the application to work with such a distributed document model. Logic to handle the assembly of distributed information could be handled at either the server side (via PHP, ColdFusion, or a similar technology) or at the client side using ActionScript and the functions and classes available for processing and handling XML.

As is, the content is rendered in a relatively static way, and there is little interaction between the text content and the graphic assets. You could explore ways to dynamically deliver the content (for example, present the instruction steps one-by-one, or to allow the user to dynamically personalize or filter the content). You could also explore ways in which the text and graphics could interact (for example, click a hot spot in a graphic to jump to a section of text, or click a hyperlink in the text to cause an animation in a graphic). This would require some creative UI design, to define buttons and other user interface elements for navigation and interaction. Flex and ActionScript provide a rich model for handling the events generated from such end-user interaction.

Finally, there are many ways you could improve the deployment aspects of the application. For example, Todd Prekaski's article Digitally signing Adobe AIR applications and David Tucker's tutorial Deploying Adobe AIR applications seamlessly with badge install are both highly relevant. Also check out Tom Lane's tutorial on building AIR applications with Flex Builder.