Graphic XML Browser

Our software can read an XML file, clean it up, and examine it in terrific detail. But Flash was not created to print messages to the console. It was created to make graphic, interactive, tactile systems. So let's do so.

This exercise goes far beyond what's needed for our overall goal of building a Flash trivia game. So as a small, informative side project we will build a simple browser.

We port our code from a system of informative trace statements that avoid the difficulties of Flash to one that confronts the difficulties and is rewarded by the strengths. With graphic artistry, we make the XML structure clear to see, and with the interactive arts, we can make it pleasant to touch.

The first step is to decide what model of XML we want to represent. The model of an XML document is different than the same object in memory. In a file or streaming document, the atomic unit is the element. By contrast, the atomic unit of the in-memory DOM (Document Object Model) is the node.

We will ultimately show both representations. We begin by creating a graphic display that displays as honestly as possible the DOM memory image. More precisely, we reflect the DOM as supported by Flash. (The standard permits much richer DOMs or somewhat simpler ones. But our goal is to gain familiarity with the Flash model.) We start with a view oriented to nodes.

The first thing we need is a node viewer, a graphic element that can display any node and show all its characteristics:

  • Type. In Flash, this is either element or text.

  • Name . Only element nodes have names (typically short).

  • Value. Conversely, only text nodes have value (i.e., content).

  • Attributes. Only element nodes have attribute arrays.

  • Relationships. All nodes have a parent node. Many have siblings. Only element nodes have children.

We create a simple node viewer (Figure 9.2). It has a text field for each variable. To keep it compact, the center of the panel is overloaded: Both nodeName and nodeValue are in the same space (the former aligned left, the latter aligned right). This won't be a problem since text nodes use nodeValue not nodeName ”and element nodes do just the opposite .

Figure 9.2. Node Viewer


The attribute list is not displayed in full. Attributes are generally infrequent (although that is certainly a style question), but when they appear, they can need a big display. Our solution is to display only a simple number on the panel, the attribute count.

nodeName, nodeValue, nodeType are all dynamic text strings displaying local variables of the same names. The n string is linked to nAttributes (the length of the attribute array). Now we retrofit the trace code.

 xml.trace = function() {   if(this.nodeType==1){            trace(this.ind+" [Element]  "+ this.nodeName);            this.clip.nodeType   = "ELEMENT";            this.clip.nodeValue  = "";            this.clip.nodeName   = this.nodeName;            }   if(this.nodeType==3){            trace(this.ind+" text)   "+ this.nodeValue);            this.clip.nodeType   = "TEXT (cdata)";            this.clip.nodeValue  = this.nodeValue;            this.clip.nodeName   = "";            }   this.clip.nAttributes  = "";   for(name in this.attributes) {            trace(this.ind+" +-attr>"+ name+": . . .            this.clip.nAttributes++;            }   for(var i= y=0; i<this.childNodes.length; i++){     this.childNodes[i].isBlank = this.isBlank;     this.childNodes[i].trace   = this.trace;     this.childNodes[i].ind     = "   "+this.ind;     this.clip.attachMovie("nodeView", "clip"+i, ++_root.maxdepth+5555);     this.childNodes[i].clip=eval(this.clip+".clip"+i);     this.childNodes[i].clip._x=85;     this.childNodes[i].clip._y=i*42;     this.childNodes[i].trace();     } } 

The first couple of chunks of new code fill in the data fields that the nodeView wants to display. The last block of code gives each childNode its own nodeView instance. Each new MovieClip attaches to the parental clip (the one belonging to this ). Then this embeds a pointer in the child to her new node viewer.

The relationship between the nodes is indicated by relative screen positions . A node's mother is to her left, her sisters are above and below her, and her daughters are on her right (Figure 9.3). Keep in mind that the coordinate system of every MovieClip is relative to its parent. So setting _x to a scalar number (250, say) sets it beside its parents. Making _y a function of birth order lines up the siblings.

Figure 9.3. Simple Quiz in the Node Viewer


Our goal is to make a clear picture of the XML object by building a parallel structure in ActionScript. It is parallel, not identical. The only the linkages between the two are those we carefully maintain. They are not symmetrical, either ”in the current code, each XML node can address its corresponding node in the display list, but there is no link pointing back. We will confront this issue in later chapters; it is not important yet.

Flash and XML[c] A Developer[ap]s Guide
Flash and XML[c] A Developer[ap]s Guide
ISBN: 201729202
Year: 2005
Pages: 160 © 2008-2017.
If you may any questions please contact us: