Recipe 19.4. Loading XML Data with Components | Flash 8 Cookbook (Cookbooks (OReilly))

Problem

You want to load XML data without having to write much ActionScript.

Solution

Use the XMLConnector component.

Discussion

XML stands for eXtensible Markup Language, which is a way of formatting data contextually for communication to and between applications. For example, an XML document may contain data you want to use within your application to populate components, URLs of images, and more. XML is formatted in a hierarchical style using tags that look similar to HTML tags. However, unlike HTML, the names of XML tags are arbitrary. Tags may be nested. In such cases you can describe the relationships between tags, or elements, as child, parent, and sibling. The following example has a parent element called book with two child nodes (that are siblings of one another) called title and authors:

 <book>   <title>ActionScript Cookbook</title>   <authors>Joey Lott</authors> </book>

ActionScript has an intrinsic XML class that enables you to work with XML. Although it would be misleading to suggest that working with ActionScript and XML is exceedingly difficult, there is a reasonably steep learning curve for the average Flash developer. If you want to work extensively with XML, it would be to your advantage to learn about using the ActionScript XML class, as it is a much more robust way of working with XML than a non-ActionScript solution. However, if your goal is to use XML in fairly simple ways (populating simple forms, for example) and you don't want to have to use ActionScript, you can use the XMLConnector component. That is the subject of this recipe.

The XMLConnector component is available in Flash Professional, and it allows you to utilize XML with little or no ActionScript. It can load XML from external sources as well as compose and send XML to a script. To use the XMLConnector component, the first step is to add an instance to the stage. You can accomplish that by dragging an instance from the Components panel (in the Data folder) to the stage. Then, as with most component instances, assign an instance name to the component on the stage by way of the Property inspector.

The component has an icon that appears on the stage during authoring time. However, when you compile, the icon does not appear in the exported SWF.

After you've added an XMLConnector instance and given it an instance name, the next step is to set the necessary parameters in the Component Inspector panel. With the instance selected, open the Component Inspector panel (if it's not already visible). You'll need to set the following parameters:

URL: The URL of the XML resource you want to load. The URL could be to an XML file or any resource that outputs XML (such as a PHP page).
direction: When loading XML, set the direction to receive.

The remainder of the parameters can be left at their default values.

Next, you need to tell Flash when to load the XML. You can accomplish that by way of one line of ActionScript. You need to call the trigger( ) method of the XMLConnector component instance. For example, if the component instance is called cxcExample, the following code tells Flash to load the XML from the URL you specified in the parameters:

 cxcExample.trigger();

Where you place the code depends on when you want to load the XML. If you want to load the XML when the application starts (assuming that you've placed the component instance on the first keyframe of the main timeline), you can place the ActionScript on the first keyframe of the main timeline. If you want to load the XML when the user clicks a button, you can place the code within an event handler method, as in the following example:

 btLoadData.onPress = function():Void {   cxcExample.trigger(); };

The XML data loads and is parsed by the XMLConnector component instance. In order to do something useful with the data, you'll likely want to use the built-in data-binding feature of Flash in order to display the data in components. You can read more about data binding in Recipe 19.7. However, before you can properly use data binding with an XMLConnector component, you have to tell it what schema to use. The schema is the structure of the XML data. The XMLConnector uses that schema to enable data binding so that you can tell Flash which elements from the XML data ought to get displayed in which components. If the idea of telling the XMLConnector what schema to use sounds daunting to you, don't worry. It's as simple as a few clicks of the mouse.

Assuming that you are loading the XML from a static document, you can simply do the following:

Select the XMLConnector component instance.
Open the Component Inspector panel.
Select the Schema tab.
Select the results:XML option from the list.
Click on the Import icon in the upper-right corner of the Schema tab.
A dialog box will appear. It prompts you to select a file. Select the XML document, and click the Open button.

When you've completed the preceding steps, the XML schema will appear in the Schema tab list nested under results:XML. If you are loading the XML from a dynamic resource such as a PHP page, open that resource in a web browser. Save a copy of the XML data as an XML document on your local disk. Then complete the preceding steps. You'll still load the data from the dynamic resource. Importing the schema merely tells Flash what the structure of the XML document looks like. It doesn't actually load the data into your Flash application at that time.

You can download a working example file from http://www.rightactionscript.com/fcb.