Loading XML Data

1. ActionScript 3.0 Loading XML Data

2. Parsing XML Documents • What is XML? • Accessing an XML document with ActionScript • XMLList class • URLLoader class

3. XML XML stands for eXtensible Markup Language. An XML document is a text file that contains data formatted in a particular way. XML has a node based structure that is divided into parent node and child nodes. These nodes are designated by tags in much the same way that HTML is, the difference is that you can make up these tags to suit the needs of your particular application.

4. Example XML file • An XML document about a series of photos that holds values for the image filename and an associated caption • Possible structure: • <?xml version="1.0" encoding="utf-8" standalone="yes"?> <images> <photo> <image>images/1.jpg</image> <caption>Saharan on Sunset</caption> </photo> <photo> <image>images/2.jpg</image> <caption>Sedona Skyline</caption> </photo> <photo> <image>images/3.jpg</image> <caption>Cape Cod Beach Fence</caption> </photo> </images>

5. XML, cont. • XML is useful to store data in a structured way to be used in another application.  • It is also a way to abstract the content of an application from the presentation of it. • You’ve probably already seen all sorts of data that is stored in XML documents without knowing it. For example, RSS feeds are just an XML document with a special format.

6. XML, cont. All XML is made up of the following parts: • XML version - tells the parser that this is an xml document, the version and character encoding • Root Node - This is the node that is the first and last tag in the document. It is the <images></image> part of the example • XML Elements - This is a unit of XML data, which must have balanced opening and closing tags. The <photo></photo> parts of the example are elements. • Attributes – Not used by example, but they are essentially values that are stored within the opening element tag: <photo id=”1″ size=”400×300″> • Text Nodes - The content between the element tags. In the first image element in the example, the text node would be “image/1.jpg”

7. XML, cont. • Note: In some cases you might want to pass HTML character data in your text node, but the presence of characters like < and > can cause problems because it looks like you are closing the element, or opening a new one. In this case you would want to wrap that content in a CDATA tag: • <caption><![CDATA[<b>Saharan on Sunset</b>]]></caption> • What this does is tell the parsing application to read this as literal character data.

8. Accessing an XML document with ActionScript • ActionScript has several built-in classes to allow you to access a properly formatted XML document. This is called “parsing” the XML, which involves reading in the data contain in the XML and turning it into a form that is useful to us within the application. • Use the URLRequest object to designate the external XML file you want to parse. vargalleryXML_URL:String = "gallery.xml"; vargalleryXML_URLRequest:URLRequest = new URLRequest(galleryXML_URL);

9. Accessing an XML document with ActionScript • Use the URLLoader class. • vargalleryLoader:URLLoader = new URLLoader(galleryXML_URLRequest); • The main difference: the URLLoader class is part of the flash.net package, while the Loader class is a Display object. However, the two loader classes are similar in that they have many of the same events contained within them.

10. Accessing an XML document with ActionScript • In order to use the data loaded into the URLLoader as XML, we need to put it into an XML object. • There is a base XML class for this purpose, but use the XMLList class in the example instead, because it provides better methods for parsing the file. • The difference between these two classes is that an XMLList can have more than one root node (not really applicable in this example). So, create a new XMLList to hold the XML data. • vargalleryXML:XMLList = new XMLList();

11. Accessing an XML document with ActionScript • You can the populate the XMLList using the data property of the URLLoader, which is where it keeps the loaded content. • galleryXML = XMLList(galleryLoader.data); • But wait! You’ll find if you do it this way, you’ll get an error. This is because the data attribute of the URLLoader is not accessible until the document is fully loaded. So before you do anything with it, you need to wait for the “complete” event. • galleryLoader.addEventListener("complete", getNodes); • The event handler should then contain the code that assigns the URLLoader data to the XMLList object.

12. Accessing an XML document with ActionScript • Once you have the data loaded into the XMLList Object, you can access all the elements within it.  • You do this in much the same way that you access the elements in an array, but you also use object dot notation. For example, if you wanted to access the file name of the first image, you would use this code: • galleryXML.photo[0].image; • There is a lot more info on this subject, including other ways to access nodes and elements, in your book.

13. In class Lab • Create your own XML and ActionScript XML parser. You can load image content, or use it for a purely text-based application. • Include a UI component i.e. datagrid and use it as the method by which someone can browse the XML loaded content. • Review Flash examples • http://onajejohnston.com/courses/actionscript/230/gallery_xml.zip

14. Parse and Display external data from an XML file in Flash AS3 http://www.developphp.com/Flash_tuts/AS3_external_XML_file.php Flash datagrid component tutorial http://edutechwiki.unige.ch/en/Flash_datagrid_component_tutorial