Task: XML-Powered Display

I l @ ve RuBoard

Let's read an external HTML file and use it to populate a set of text fields. The XML data will look like this:

 <list>     <user>         <name>             <last>Doe</last>             <first>John</first>         </name>         <ssnumber>000-00-0000</ssnumber>         <address>             <street>123 Street Road.</street>             <city>Metropolis</city>             <state>New York</state>             <zip>12345</zip>         </address>         <phone>             <work>212-555-1212</work>             <home>212-555-0000</home>         </phone>         <email>[e-mail]</email>         <dateofbirth>10/29/1969</dateofbirth>         <emergencycontact relation="Wife">Jane Doe</emergencycontact>     </user> </list> 

You can find this document on the CD-ROM in the 19xmldisplay folder. It is named xmldata.txt.

Notice that its first node is <list>, suggesting that more than one user might be in the final document. In this example, however, there is just one user. Then there are nodes for the user's name, social security number, address, phone, e-mail, date of birth, and emergency contact information. Most of these nodes are divided still further. For instance, there is a node for the last name and a node for the first name.

Now let's make a movie that reads in this data and displays it.

1. Start with a new Flash movie.

2. You'll need to create a whole series of dynamic text fields. You can see them all in Figure 19.2. There is one static text field for each dynamic one that acts as a label.

   Figure 19.2. This application displays the information found in an XML file.

   

3. Each of the dynamic text fields needs to be set to link to a specific variable. All these names have two words. Here is a complete list: last name, first name, address street, address city, address state, address zip, user ssnumber, phone work, phone home, user email, user dateofbirth, user emergencycontact, and emergencycontact relation. You'll find out why these need these specific names in the next task.

4. Now we need to read in the XML data. This sequence of commands is almost identical to the example earlier in this hour . It needs to be placed in the first and only frame of the movie.

    // get XML data from file data = new XML(); data.ignoreWhite = true; data.load("xmldata.txt"); data.onLoad = function(success) {     if (success) {         if (data.status == 0) {             // get first user             thisUser = data.childNodes[0].childNodes[0];             // take data from this user             parseData(thisUser);         }  else {             // could not parse the XML data             trace("Parse Error: "+data.status);         }     } else {         // could not get the XML         trace("Load Error");     } } 

5. The main addition to this code is that the variable thisUser is defined as the user node in the XML data. Then, this node is passed into the function parseData .

6. The parseData function examines every text node in the document plus the one attribute. It assigns these values to the variables linked to the dynamic text fields.

    // get all data from user node function parseData(user) {     this["name last"] = user.childNodes[0].childNodes[0].childNodes[0].nodeValue;     this["name first"] = user.childNodes[0].childNodes[1].childNodes[0].nodeValue;     this["user ssnumber"] = user.childNodes[1].childNodes[0].nodeValue;     this["address street"] = user.childNodes[2].childNodes[0].childNodes[0].nodeValue;     this["address city"] = user.childNodes[2].childNodes[1].childNodes[0].nodeValue;     this["address state"] = user.childNodes[2].childNodes[2].childNodes[0].nodeValue;     this["address zip"] = user.childNodes[2].childNodes[3].childNodes[0].nodeValue;     this["phone work"] = user.childNodes[3].childNodes[0].childNodes[0].nodeValue;     this["phone home"] = user.childNodes[3].childNodes[1].childNodes[0].nodeValue;     this["user email"] = user.childNodes[4].childNodes[0].nodeValue;     this["user dateofbirth"] = user.childNodes[5].childNodes[0].nodeValue;     this["user emergencycontact"] = user.childNodes[6].childNodes[0].nodeValue;     this["emergencycontact relation"] = user.childNodes[6].attributes["relation"]; } 

7. Keeping track of all those node numbers can be a pain and difficult to debug. Instead, you can break up the user node further and refer to the pieces. Here is an improved parseData function:

    function parseDataAlt(user) {     userName = user.childNodes[0];     this["name last"] = userName.childNodes[0].childNodes[0].nodeValue;     this["name first"] = userName.childNodes[1].childNodes[0].nodeValue;     this["user ssnumber"] = user.childNodes[1].childNodes[0].nodeValue;     userAddress = user.childNodes[2];     this["address street"] = userAddress.childNodes[0].childNodes[0].nodeValue;     this["address city"] = userAddress.childNodes[1].childNodes[0].nodeValue;     this["address state"] = userAddress.childNodes[2].childNodes[0].nodeValue;     this["address zip"] = userAddress.childNodes[3].childNodes[0].nodeValue;     userPhone = user.childNodes[3];     this["phone work"] = userPhone.childNodes[0].childNodes[0].nodeValue;     this["phone home"] = userPhone.childNodes[1].childNodes[0].nodeValue;     this["user email"] = user.childNodes[4].childNodes[0].nodeValue;     this["user dateofbirth"] = user.childNodes[5].childNodes[0].nodeValue;     userContact = user.childNodes[6];     this["user emergencycontact"] = userContact.childNodes[0].nodeValue;     this["emergencycontact relation"] = userContact.attributes["relation"]; } 

   Although this is easier to read, it still relies on all the information being specifically numbered nodes. In the next section, we'll look at a better way to do this. Run this example movie, found on the CD-ROM as 19xmldisplay.fla in the 19xmldisplay folder. Examine both the xmldata.txt file and the code in the Flash movie. Try changing the XML data values to see the change reflected the next time you run the movie.

I l @ ve RuBoard