Beginning XML with DOM and Ajax From Novice to Professional phần 8 potx

Table 10-1 shows the possible values for the status property. Table 10-1. Values for the status Property of the XML Object Value Meaning 0 No error; the document parsed successfully. –2 A CDATA section is not terminated properly. –3 The XML declaration is not terminated properly. –4 The DOCTYPE declaration is not terminated properly. –5 A comment is not terminated properly. –6 An XML element is malformed. –7 The application is out of memory. –8 An attribute value is not terminated properly. –9 A start tag is not matched with an end tag. –10 An end tag exists without a matching start tag. Note that where a document contains more than one error, the status property returns the value for the first error. Even when Flash detects an error, an application may still be able to traverse all or part of the document tree. You can see an example that loads the dvd.xml document into the Flash 8 file dvd.fla. Open dvd.fla in Flash 8, and compile a SWF file by using the Ctrl+Enter shortcut. Figure 10-1 shows an Output window containing the XML content from the external document. Figure 10-1. Displaying XML content in Flash The complete ActionScript code contained within this Flash file follows: var oXML:XML = new XML(); oXML.ignoreWhite = true; oXML.onLoad = processXML; oXML.load("dvd.xml"); CHAPTER 10 ■ USING FLASH TO DISPLAY XML296 6765CH10.qxd 5/19/06 11:43 AM Page 296 function processXML(success:Boolean):Void{ if (success){ if (this.status ==0) { trace (this); } } } You can display the contents within Flash using the previous line shown in bold. ■Note The trace() action displays content in the Output window within Flash. You won’t see these messages if you test the compiled Flash movie in a web browser. If you open the dvd.xml file, you’ll notice that Flash loads the entire contents of the docu- ment, including the XML declaration. However, Flash removes all white space because of the true value assigned to the ignoreWhite property. You should note the following points about loading content into Flash: • The loading process is asynchronous, so you need to set an event handler to respond to the loaded document. • Flash doesn’t maintain a link back to the external XML document, so you need to reload it if the content changes. Once you’ve loaded the document, you’ll need to traverse the document tree so you can display and manipulate the contents. Understanding the XML Class The XML class represents the entire XML document and includes methods similar to the fac- tory methods within the XML DOM. You’ll remember from Chapter 8 that factory methods create new objects within the document tree. The XML class includes the following methods: • createElement() • createTextNode() • parseXML() The XML class includes other methods such as addRequestHeader(), getBytesLoaded(), getBytesTotal(), send(), and sendAndLoad() that I won’t cover here for the sake of brevity. createElement(name:String) The createElement()method returns a new XMLNode object with the specified name: var oElement:XMLNode = oXML.createElement("eName"); CHAPTER 10 ■ USING FLASH TO DISPLAY XML 297 6765CH10.qxd 5/19/06 11:43 AM Page 297 Like the XML DOM methods, using createElement() in ActionScript generates an element without a position in the document tree. You then need to position it using either the appendChild() or insertBefore() methods of the XMLNode class. createTextNode(value:String) The createTextNode()method returns a text node from the value argument: var oTextNode:XMLNode = oXML.createTextNode("Some text"); Again, this node has no position in the document tree and will need to be positioned using appendChild() or insertBefore(). parseXML(value:String) The parseXML()method parses text within the value parameter and populates an XML object: var XMLString:String = "<library><dvd id="4"><title>Splash</title></library>"; var oXML:XML = new XML(); oXML.parseXML(XMLString); The XML class also inherits methods and properties from the XMLNode class. Understanding the XMLNode Class The XMLNode class represents elements within the document tree. An XML object is made up of XMLNode objects. The XMLNode class includes the following members: • attributes • parentNode • childNodes • firstChild and lastChild • previousSibling and nextSibling • nodeType • nodeName • nodeValue • hasChildNodes() • appendChild() • cloneNode() • insertBefore() • removeNode() CHAPTER 10 ■ USING FLASH TO DISPLAY XML298 6765CH10.qxd 5/19/06 11:43 AM Page 298 Unlike the XML DOM, ActionScript doesn’t include the replaceChild() method. Let’s look at each of these methods and properties so you can understand them in more detail. attributes The attributes property returns an object containing all of the attributes of the specified XMLNode object: oXMLNode.attributes You can loop through all attributes within the XMLNode using this code: for (var theAtt:String in oXMLNode.attributes) { //process attributes } parentNode The parentNode property returns the XMLNode that is the parent of the current node: oXMLNode.parentNode Remember that attributes don’t have a parent node, as they are not the children of their containing element. If the node doesn’t have a parent, it returns null. childNodes The childNodes property returns an array of child XMLNode objects: oXMLNode.childNodes You can refer to a specific child node by using its position within the collection: oXMLNode.childNodes[0] The previous line refers to the first child node of the oXMLNode element. You can find out how many child nodes exist within an element by using the length property: oXMLNode.childNodes.length This allows you to loop through the collection: for (var i:Number=0; i < oXMLNode.childNodes.length; i++) { //do something } As text nodes don’t have child nodes, this property will return undefined. CHAPTER 10 ■ USING FLASH TO DISPLAY XML 299 6765CH10.qxd 5/19/06 11:43 AM Page 299 firstChild and lastChild The firstChild and lastChild properties return the first and last XMLNode objects in the XMLNode’s list of child nodes: oXMLNode.firstChild oXMLNode.lastChild If there are no children, the lastChild property returns null. Note that text nodes are always the first child of their containing element. previousSibling and nextSibling These properties return the previous and next XMLNode objects that share the same parent as the current XMLNode object: oXMLNode.previousSibling oXMLNode.nextSibling nodeType Unlike the XML DOM property of the same name, this property returns a value of either 1 (element node) or 3 (text node) for the specified XMLNode: oXMLNode.nodeType Flash doesn’t support the other numeric node type indicators from the recommendation. nodeName The nodeName property returns the name of the current XMLNode object: oXMLNode.nodeName Text nodes don’t have a nodeName property. XMLNodes with a nodeType of 3—i.e., text nodes—will return null. nodeValue The nodeValue property returns the content of the specified text node: oXMLNode.firstChild.nodeValue The preceding line finds the text within the oXMLNode element. Note that the text node is the firstChild of the XMLNode object. The property returns null for an element node (nodeType = 1). hasChildNodes() The hasChildNodes()method returns a Boolean value that indicates whether an XMLNode object has child elements: oXMLNode.hasChildNodes() CHAPTER 10 ■ USING FLASH TO DISPLAY XML300 6765CH10.qxd 5/19/06 11:43 AM Page 300 appendChild(newChild:XMLNode) The appendChild()method adds a new child after the last child node of the current XMLNode object. You can use this method to append a node that you’ve just created: oNewNode = oXML.createElement("dvd"); oXML.childNodes[0].appendChild(oNewNode); You can also use the method to move an existing node to a new location. cloneNode(deep:Boolean) The cloneNode()method clones an existing XMLNode object. It copies all attributes within the node. Set the deep parameter to true to clone all child nodes recursively: oXML.oXMLNode.cloneNode(true) The method returns the cloned node without a parent. You’ll need to use appendChild() or insertBefore() to locate it within the document tree. insertBefore(newChild:XMLNode, insertPoint:XMLNode) This method inserts a new XMLNode object before an existing XMLNode object: var oOldNode:XMLNode = oXML.firstChild.childNode[1]; var oNewNode:XMLNode = oXML.createElement("dvd"); oXML.insertBefore(oNewNode, oOldNode); If insertPoint is not a child of the XMLNode object, the insert will fail. removeNode() The removeChild()method removes the specified XMLNode. It returns nothing: var nodeToRemove:XMLNode = oXML.firstChild.childNodes[2]; nodeToRemove.removeNode(); Loading and Displaying XML Content in Flash In the previous section, I covered the methods and properties that are available to you when working with XML content in Flash. These will make much more sense if I work through an example. The example file dvd2.fla shows how to load the dvd.xml file into Flash and display the details of a selected DVD in UI components. Figure 10-2 shows this movie with a selected DVD. CHAPTER 10 ■ USING FLASH TO DISPLAY XML 301 6765CH10.qxd 5/19/06 11:43 AM Page 301 Figure 10-2. Displaying XML content in UI components I’ll walk through this example so you can see how to traverse the document tree. The example will also show you how to work with the UI components in Flash. Open the dvd2.fla file in Flash 8, and you’ll see a number of UI components on the Stage. If you’re not familiar with Flash, clicking each component displays its name in the Properties panel at the bottom of the screen. Figure 10-3 shows the Properties panel with the List com- ponent selected. I can refer to a component using this name. Figure 10-3. The Properties panel showing a component instance name You’ll also see two layers in the timeline in the top left-hand corner of the screen. Select Frame 1 of the actions layer, as shown in Figure 10-4. Figure 10-4. Selecting Frame 1 of the actions layer CHAPTER 10 ■ USING FLASH TO DISPLAY XML302 6765CH10.qxd 5/19/06 11:43 AM Page 302 You can press the F9 shortcut key to see the actions added to this frame in the Actions panel. All of the ActionScript required to run this simple application appears on Frame 1 of this layer. I’ll work through the code. The code starts by declaring timeline variables. These are similar to variables with global scope in a JavaScript code block: var rootNode:XMLNode; var selectedDVDNode:XMLNode; The rootNode variable stores a reference to the document element. In the dvd.xml file, that’s the <library> element. The selectedDVDNode variable stores a reference to the DVD chosen by the user. The next code block loads the XML document and sets the onLoad event handler: var oXML:XML = new XML(); oXML.ignoreWhite = true; oXML.onLoad = processXML; oXML.load("dvd.xml"); When the dvd.xml document loads into Flash, it calls the processXML function. The func- tion appears at the bottom of the Actions panel: function processXML(success:Boolean):Void{ if (success){ if (this.status == 0) { rootNode = this.firstChild; loadList(); } } } This function starts by testing that the XML document loaded successfully. It then checks the value of the status property to make sure that there are no errors. The remaining lines set the value of the rootNode variable to the first child of the loaded XML object, and call the loadList function: rootNode = this.firstChild; loadList(); Setting the rootNode variable is useful because it allows an application to access content from the XML document, without the XML declaration, from anywhere within the Flash movie. The loadList() function loads the content into the List component: function loadList():Void { dvd_list.removeAll(); var dvdID:Number; for (var i:Number=0; i < rootNode.childNodes.length; i++) { dvdID = rootNode.childNodes[i].attributes.id; dvd_list.addItem(dvdID); } } CHAPTER 10 ■ USING FLASH TO DISPLAY XML 303 6765CH10.qxd 5/19/06 11:43 AM Page 303 The code starts by removing any existing items from the list. Then it declares a variable that will store the DVD id attribute value. The code loops through the childNodes array using a for loop. You’ll notice that the construction is the same as within JavaScript: for (var i:Number=0; i < rootNode.childNodes.length; i++) { As in the previous chapters, the code uses the length property of the childNodes array to determine the end point for the loop. Within the loop, the code determines the id attribute value using this code: dvdID = rootNode.childNodes[i].attributes.id; This code finds the relevant childNode array element and finds the id property within the attributes collection. Finally, the addItem() method adds the id attribute to the dvd_list List component: dvd_list.addItem(dvdID); The other block of code within the Actions panel responds to the user making a selection from the List component: var dvdListener:Object = new Object(); dvdListener.change = function(evtObj:Object):Void { var nodeIndex:Number = evtObj.target.selectedIndex; selectedDVDNode = rootNode.childNodes[nodeIndex]; title_txt.text = selectedDVDNode.childNodes[0].firstChild.nodeValue; format_txt.text = selectedDVDNode.childNodes[1].firstChild.nodeValue; genre_txt.text = selectedDVDNode.childNodes[2].firstChild.nodeValue; } dvd_list.addEventListener("change", dvdListener); The code defines an event listener object called dvdListener and adds it to the dvd_list component, listening for the change event. When the object detects the event, it determines which item the user selected and stores it within the nodeIndex variable: var nodeIndex:Number = evtObj.target.selectedIndex; It then uses that value to set an XMLNode object to reference the appropriate element in the XML object: selectedDVDNode = rootNode.childNodes[nodeIndex]; Finally, the function sets the text property of each TextInput component to the value from the appropriate element in the XML object. For example, the title comes from the first child node (childNodes[0]) of the <dvd> element. You can find the text by using the firstChild property of this element and determining the nodeValue: title_txt.text = selectedDVDNode.childNodes[0].firstChild.nodeValue; Testing the Flash document shows something similar to Figure 10-2. You should be able to select each DVD from the List component and see the title, format, and genre of each. CHAPTER 10 ■ USING FLASH TO DISPLAY XML304 6765CH10.qxd 5/19/06 11:43 AM Page 304 ■Tip If you’re not familiar with Flash, you can generate a web page that displays the SWF file by choosing File ➤ Publish. Flash will create the web page in the same folder as the SWF file. In this example, you saw how to load an XML document into Flash and display it in UI components. You can also use Flash to update content and send it to a server-side file for processing. Updating XML Content in Flash As you saw earlier in this chapter, Flash can use methods such as createNode(), appendNode(), insertBefore(), and cloneNode() to manipulate an XML tree. The manipulation takes place within Flash, but if you need to update an external data source, you’ll have to send the content to a server-side file for processing. I’ll work through an example where I take user input and use it to update the dvd.xml document tree within Flash. You can find this example saved in the file dvd3.fla. Figure 10-5 shows the interface populated with the dvd.xml file. Figure 10-5. The interface of the dvd3.fla movie This interface allows you to view the details of a DVD, add a new DVD to the XML tree, and edit or remove an existing DVD. If you open Frame 1 of the actions layer with the F9 shortcut key, you’ll see that it’s a little more complicated than the previous example. To start with, there are now three timeline variables: var rootNode:XMLNode; var selectedDVDNode:XMLNode; var booNew:Boolean = true; The added third line creates a Boolean variable that determines whether to add a new node or to edit an existing node. CHAPTER 10 ■ USING FLASH TO DISPLAY XML 305 6765CH10.qxd 5/19/06 11:43 AM Page 305 [...]... CHAPTER 11 ■ INTRODUCTION TO SERVER-SIDE XML Table 11-1 XML Namespaces in NET Namespace Purpose System .Xml Provides the ability to read and write XML content and work with the DOM Implements DOM Level 1 Core and DOM Level 2 Core System .Xml. Schema Applies XML schema constraints Implements the XML schema 1 (XML Schema Part 1: Structures) recommendation and supports XML schema 2 (XML Schema Part 2: Datatypes)... it’s also based on libxml2 and therefore fits with the other XML approaches within PHP 5 PHP 5 also includes the new SimpleXML extension This extension provides a lightweight approach to working with XML documents by using standard object properties and iterators The following code shows how to load an XML document into a SimpleXML object: $sxe = simplexml_load_file("dvd .xml" ); SimpleXML also includes... oReceiveXML); You need to make sure that you set the content type appropriately using the contentType property: oSendXML.contentType = "text /xml" ; You can use code similar to the following to update external XML content: var oSendXML :XML = new XML( "Splash"); var oReceiveXML :XML = new XML( ); oReceiveXML.onLoad = showResponse; oSendXML.contentType = "text /xml" ; oSendXML.sendAndLoad("http://localhost/apress/updateXML.php",... http://localhost/apress/updateXML.php) • You must remember to set the content type appropriately for the processing page using the contentType property In addition to the XML class, Flash Professional provides an alternative way to load and display XML content using the XMLConnector data component Using the XMLConnector Component If you own Flash Professional and prefer to work visually, you can use the XMLConnector data... the XML and XMLNode classes Many of them were similar to the XML DOM methods that you worked with in Chapter 8 You worked through several examples that allowed you to load and manipulate XML content using a Flash interface The chapter briefly covered the sendAndLoad() method, which sends content to a server-side file for external updating You used the XMLConnector component to work with an XML document... DomDocument(); $inputdom->load("dvd .xml" ); $proc = new XsltProcessor(); $xsl = $proc->importStylesheet($xsl); $newdom = $proc->transformToDoc($inputdom); print $newdom->saveXML(); ?> The code starts by loading both the XSLT stylesheet and XML document into DomDocument objects: $xsl = new DomDocument(); $xsl->load("dvdDetails1.xsl"); $inputdom = new DomDocument(); $inputdom->load("dvd .xml" ); It then creates... need to consider cross-browser issues in your application Flash Lite 2.0 can also display XML content in devices such as phone handsets, making it easy to deploy your application for a range of purposes You saw two methods of working with XML documents: using the XML and XMLNode classes, and using the XMLConnector data component You worked through the properties and methods available through the XML and. .. processing, and one to receive the response after the processing completes The first XML object calls the sendAndLoad() method, while the second uses an onLoad handler to process the server reply The sendAndLoad() method uses POST to send its XML content It takes two parameters: the path to the processing page and the XML object for the response: oSendXML.sendAndLoad("processingPage.php", oReceiveXML); You... how to use NET and PHP to build XML applications Chapter 12 will focus on a NET 2.0 application, while Chapter 13 will provide a PHP case study Server-Side vs Client-Side XML Processing So far, you’ve learned how to work with XML documents using client-side XML processing The client-side examples showed you how to load XML content and display it within the web browser You used JavaScript to work with. .. available with Flash Professional The other components allow you to load content from web services or a database, store external content in a DataSet component, and track changes so that you can send changed content from Flash I’ll restrict myself to working with the XMLConnector component in this section Figure 10-6 shows how this component works Figure 10-6 Using the XMLConnector The XMLConnector component . id="4"><title>Splash</title></library>"; var oXML :XML = new XML( ); oXML.parseXML(XMLString); The XML class also inherits methods and properties from the XMLNode class. Understanding the XMLNode Class The XMLNode class represents. XML class represents the entire XML document and includes methods similar to the fac- tory methods within the XML DOM. You’ll remember from Chapter 8 that factory methods create new objects within. addition to the XML class, Flash Professional provides an alternative way to load and dis- play XML content using the XMLConnector data component. Using the XMLConnector Component If you own Flash Professional