Adobe AIR article

Building an XML viewer on AIR with Flex

Producing the Flex application

You are going to build a standalone viewer for structured documents that conform to the UserManual DTD. This viewer needs to provide a user interface for navigating the content of the UserGuide.xml, and it needs to format the content appropriately on screen. Graphics, numbered lists, and tables in the document need to be rendered correctly.

Design considerations

The design of the viewer is influenced by the following:

• Produce the viewer in Flex Builder and deliver it as an AIR application.
• Use MXML and built-in Flex components as much as possible, keeping the use of ActionScript to a minimum.
• Design the code along lines similar to how XSLT applications are commonly written, using pattern matching and a declarative style of programming.

Design overview

At the highest level, you will build the XML viewer sample application from a selection of built-in Flex layout and control components. These components have default UI behaviors that enable you to create an application with just a few lines of code. You will group and nest the components to match the desired presentation of the content and its structure.

You will hold the content of the XML in a single variable. By binding various elements of the variable to the values of the components, you create a relationship between the content and the components displayed on screen.

The creationComplete event (which is dispatched when the application has finished loading) is the trigger to populate the variable with the XML content, which in turn updates all the UI components with the data from the XML document.

Repeater components enable us to iterate through multiple children inside an element. The combination of dataProvider components and Repeater components give us similar capabilities to pattern matching in XSLT.

To handle the display of elements, we will use standard MXML components, such as Text and Image. We will control layout with standard components such as VBox and HBox. This is similar to how, with XSLT, you can use standard HTML tags to control formatting and layout.

To provide a simple method of organizing and navigating the various sections of content, you'll use TabNavigator in two ways. The first organizes the model descriptions and troubleshooting section into tabs, and the second puts various sections of model descriptions into sub-tabs.

Finally, you'll organize the code into multiple components. This should make the code easier to maintain, and allow you to reuse components in other projects.

Page 3 of 5

Previous Page

Next Page