We can quickly add interactivity to this picture by putting a button on the attribute counter (Figure 9.4). By pressing this button, the user moves to the second frame of the display which shows the array of attribute assignments. Releasing the button returns to the original display. Figure 9.4. NodeView 's Layers
This code is attached as the object action: ActionScripton (press) { gotoAndStop (2);} on (release, releaseOutside) { gotoAndStop (1);} The attribute list might contain multiple assignments, but we have created space for only two lines (Figure 9.5). The space could be made larger ”or better, dynamically sized ”in a more robust application. Figure 9.5. The Alternate State of Her Node Viewer
Draggable Node HierarchiesWe add another button beneath the attribute button but the full size of the panel (Figure 9.6). Pressing this button starts a drag operation until the release event. Figure 9.6. Drag-Sensitive Area on the Node Viewer
ActionScripton( press ) { this.startDrag(); } on( release ) { this.stopDrag(); } With this button, the nesting of nodes in the XML object becomes quite clear (Figure 9.7). As we drag any node, all of its descendants move with it. Figure 9.7. Teasing Apart an XML Document
Hierarchy Open and CloseDespite the fun of dragging the trees of nodes around the screen, it is still fairly cluttered. It would be nice to be able to open and close branches of the tree the same way the Mac OS and Windows Explorer function. This is not so hard. By adding a two-position switch to the node viewer, we can jump again between two frames , one representing a closed hierarchy and the other an open one (Figure 9.8). The frame labeled Open shows the twisty in the open position and has this code: Figure 9.8. Open and Close Twisty of the Node Viewer
ActionScriptfor( i in children ) children[i]._visible=true; stop(); The Close frame has, of course, the opposite , both graphics and code. |