Using XPath in Flash
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Using XPath in Flash
Believe it or not, Flash MX 2004 includes a simple XPath implementation that enables you to "query" any XML node using XPath expressions. The XPath functionality is currently exposed by a special object called XPathAPI. This very cool object exposes two methods for performing XPath searches.
Making the XPathAPI Class Available to Your Document
The XPathAPI class is not an intrinsic class, which means that it is not one of the classes that is built into the Flash Player 7 executable. Instead, the class is found in a special Library object called DataBindingClasses. As the name implies, this object contains a number of runtime classes related to databinding (the XPathAPI class is just one of these special classes). Before you use the XPathAPI class in your code, you must add the DataBindingClasses object to your document's library. This makes the classes it contains available at compile time. The classes will be included in the SWF file for your movie when it is published, which in turn makes them available to the Flash Player.
XPathAPI Usage Basics
Suppose for the moment that you are working with the following bit of XML:
<employees> <person gender="m">Matt</person> <person gender="f">Heather</person> <person gender="m">Tucker</person> <person gender="f">Apple</person> <person gender="m">Nate</person> </employees>
Then you might use the following code snippet to get an array of all the person elements, assuming that myXML is an XML object that has just retrieved the <employees> snippet shown in the preceding code:
myXML.onLoad = function(success) {
path = "/employees/person";
arNodes = mx.xpath.XPathAPI.selectNodeList(this.firstChild, path);
}
You could also replace the path line with the following, which would return an array of the female employees:
path = "/employees/person[@gender='f']";
Flash's XPathAPI functionality currently supports just the basics and not a full implementation of the XPath standard. Here's a quick list of what you can expect to use in your XPath path expressions:
Absolute paths, as in /employees/person
Relative paths, as in person if the context node is <employees>
The * wildcard, as in /*/person to retrieve all <person> elements, regardless of the parent
Simple predicate conditions with the = conditional operator, such as /employees/person[@gender='f']
The AND and OR keywords in predicate conditions, as in /employees/person[@gender='f' AND @age='30']
A Concrete Example
There are many ways that information can be represented in XML form. For instance, what if the XML schema has less to do with the application-specific notions and had more to do with the scroller functionality provided by a hypothetical GestureMovieClip subclass?
In such a situation, the top-level element might be <movie-clips> rather than <site-nav>, and each item that is to appear within the scroller is represented by a <clip> element rather than application-specific elements.
Listing 1 is an abbreviated version of the XML content returned by the scrollerXmlSource pages. As you can see, each <clip> has an linkage-id attribute that indicates which movie clip should be attached to the scroller. Within each <clip>, there are multiple <var> elements, where each <var> represents the name and value of the variables (or parameters) that are expected or displayed by the corresponding movie clip symbol in Flash's Library panel.
Listing 1 Sample XML Returned by scrollerXmlSource Pages
<?xml version="1.0" encoding="UTF-8"?>
<movie-clips>
<clip linkage-id="NavArticleClip">
<var name="idArticle">3</var>
<var name="headline">Big Plans for the Future</var>
<var name="summary">We will be beginning renovations[...]</var>
</clip>
<clip linkage-id="NavArtistClip">
<var name="idArtist">1</var>
<var name="artistName">Girlband</var>
<var name="description">Girlband has been tuning[...]</var>
<var name="image">girlband.jpg</var>
</clip>
<clip linkage-id="NavEventClip">
<var name="idEvent">4</var>
<var name="eventName">Nervous Men</var>
<var name="price">7.00</var>
<var name="dateTime">Tue, Jan 20 10:00 PM</var>
</clip>
</movie-clips>
Listing 2 shows the fillScrollerWithClips() function as implemented in this third version of the script file. As you can see, this version doesn't have any code that is specific to the ideas of artists, events, or anything else having to do with our music venue example. The server is now in charge of populating the scroller with whatever content is appropriate. As long as there is a movie clip in the SWF's Library with the appropriate linkage name, it can be instantiated and populated with whatever data it needs (kind of by remote control).
Listing 2 gestureNavActions3.as—XML Retrieval Code (Third Version)
// This function fills the scroller with info from XML
// Reference to the scroller instance on the Stage
// This line is optional; it enables the compiler to syntax-check
// method calls against the GestureMovieClip.as class file
var mcScroller:GestureMovieClip;
// Import the XPathAPI class (it's not intrinsic)
// Alternatively, you can omit this line and refer to the class
// by its full name when you call its selectNodeList() method
import mx.xpath.XPathAPI;
// This function kicks off process of fetching/displaying XML info
function getAndDisplayNavInfo(searchWords:String) {
// Customize the scroller
mcScroller.bgColor = 0xFFFFFF;
mcScroller.areaHeight = 85;
mcScroller.refreshInterval = 30;
mcScroller.maxSpeed = 20;
// This is the source of the XML on the server
var pageURL = baseURL + "scrollerXmlSource.aspx";
// This LoadVars object will post our request for XML
// It will include a mock form field called SearchWords
var lvSender = new LoadVars;
lvSender.SearchWords = searchWords == null ? "" : searchWords;
// Create new XML instance and get it set up
var xmlLoader = new XML;
xmlLoader.ignoreWhite = true;
xmlLoader.onLoad = function(success) {
if (success) {
// Fill the scroller with info from XML
// (pass this XML object, so function can use its contents)
fillScrollerWithClips(this);
}
}
// Go ahead and begin contacting the server
lvSender.sendAndLoad(pageURL, xmlLoader, "POST");
}
// This function fills the scroller with info from XML
function fillScrollerWithClips(xml) {
// These variables are local to this function
var mcNew: MovieClip;
var oVars: Object;
var arClips:Array;
var arVars:Array;
var xnClip:XMLNode;
var linkageID: String;
// Array of child nodes within root <movie-clips> element
arClips = XPathAPI.selectNodeList(xml.firstChild, "movie-clips/clip");
// First, turn off the scroller and remove any existing content
mcScroller.disableGestures();
mcScroller.removeAllClips();
// For each of the child elements within the root
for (var i = 0; i < arClips.length; i++) {
// Convenience variable for accessing the "current" <clip>
xnClip = arClips[i];
// Use linkage-id attribute of <clip> element to attach new clip
linkageID = xnClip.attributes["linkage-id"];
// Fresh initialization object for new clip's parameters
oVars = new Object;
// Array of <var> elements within this <clip> element
arVars = XPathAPI.selectNodeList(xnClip, "clip/var");
// For each <var> element...
for (var j = 0; j < arVars.length; j++) {
oVars[arVars[j].attributes["name"]] = arVars[j].firstChild.nodeValue;
}
// Create movie clip within scroller to represent this <clip>
mcNew = mcScroller.addClip(linkageID, oVars);
}
// Now that all the content has been added, enable the scroller
mcScroller.enableGestures();
}
This code uses the mx.xpath.XPathAPI.selectNodeList() method twice. The first time is near the top of the listing, where it is used to select an array of all <clip> elements that sit within the top-level <movie-clip> element, using /movie-clip/clip as the XPath expression. This array is looped over in the outer for loop, which is similar conceptually to the for loops in the previous versions of this script.
The second use of selectNodeList() appears within the outer for loop, to select an array of <var> elements within the <clip> element that the loop is currently processing. This time, clip/var is used as the XPath expression. Note that the XPath expression is evaluated relative to the node passed as the method's first argument. (In XPath terminology, then, the first argument is the context node.)
I think this code will be mostly clear to you, with the possible exception of the following line, which is perhaps a bit terse:
oVars[arVars[j].attributes["name"]]=arVars[j].firstChild.nodeValue;
If it helps, this one line could have been written using the following three lines. In theory, using three lines rather than one means a bit more work for the Flash Player at runtime, but in practice, any difference in performance will be extremely slight:
var sName = arVars[j].attributes["name"]; var sValue = arVars[j].firstChild.nodeValue; oVars[sName] = sValue;
The result is that the name and value contained within the <var> element is added as a named string property to the oVars object. Because oVars is then passed to the addClip() method as the initialization object for the movie clip being added to the scroller, the values become available as timeline variables within each clip as soon as it is attached.