In this lesson, you will learn how to create an XML-based application.
NOTE: If you understand in advance why you are doing a given step, you can skip the "why" explanation below it.
It is important to give components instance names so they can be "talked to" programmatically. Pay attention to spelling and cases.
var loader:URLLoader = new URLLoader();
loader.load(new URLRequest("index.xml"))CAUTION: Note two ending parenthesis.
loader.addEventListener (Event.COMPLETE, onDataLoad);
function onDataLoad (eventObject:Event):void
{
var applicationData:XML = new XML(eventObject);
trace(applicationData)
}NOTE: In this event handler, you created an XML object and passed it data from the URLLoader created earlier to provide data for the XML object and added a trace statement to see the result. In is helpful to think the the eventObject parameter will "sneak in" many of the properties of the object that made the call (loader). We will use the eventObject to ascertain certain properties of that object.
Result Checkpoint: You should be able to see some METADATA about the event that was dispatched or fired ( [Event type="complete" bubbles=false cancelable=false eventPhase=2] ) displayed in the Output panel. Not exactly what we wanted. We have to "drill" down further to get what we need.
Result Checkpoint: You should be able to see the type of event that was dispatched or fired ( complete )displayed in the Output panel. Again, not exactly what we wanted. This basically tell us that the object that made the called (loader) is "listening" for an event by the name of complete.
Result Checkpoint: You should be able to see the target object that made the function called displayed ( [object URLLoader] ) in the Output panel.
Result Checkpoint: You should be able to see the complete XML file. Examine it to see the XML tree structure and take note of the repeating nodes (list_item) highlighted in bold. This is only an extract of the XML file.
<application title="ROCK CLASSIFICATION">
<intro>Rocks are classified by mineral and chemical composition....</intro>
<list_item>
<link_item_name>BASALT</link_item_name>
<thumbnail_img>Thumbnails/Basalt.jpg</thumbnail_img>
<main_body>Basalt is the most common type of solidified lava.... </main_body>
</list_item>
<list_item>
<link_item_name>BRECCIA</link_item_name>
<thumbnail_img>Thumbnails/breccia.jpg</thumbnail_img>
<main_body>Breccia is typically a sedimentary rock .... </main_body>
</list_item>
......
</application>
Since the "list_item" nodes are repeating nodes, we will need to drill down deeper just like a file structure (directory/directory/file) to retrieve each node separately and add them to a XMLList.
function onDataLoad (eventObject:Event):void
{
var applicationData:XML = new XML(eventObject.target.data);
//trace(applicationData)
var MenuList:XMLList = applicationData.list_item
trace(MenuList)
}
Result Checkpoint: Only the list_item REPEATING nodes highlighted in bold should be returned and not the complete XML file as before. The attribute (<application title="ROCK CLASSIFICATION"> .... </application> and its "non-repeating tag, best called "metadata" is not included ( <intro>Rocks are classified by mineral and chemical composition....</intro> )
<list_item>
<link_item_name>BASALT</link_item_name>
<thumbnail_img>Thumbnails/Basalt.jpg</thumbnail_img>
<main_body>Basalt is the most common type of solidified lava.... </main_body>
</list_item>
<list_item>
<link_item_name>BRECCIA</link_item_name>
<thumbnail_img>Thumbnails/breccia.jpg</thumbnail_img>
<main_body>Breccia is typically a sedimentary rock .... </main_body>
</list_item>
function onDataLoad (eventObject:Event):void
{
var applicationData:XML = new XML(eventObject.target.data);
//trace(applicationData)
var MenuList:XMLList = applicationData.list_item
//trace(MenuList);var menu_total:Number = MenuList.length()
//trace(menu_total);
for (var i:uint=0; i<menu_total; i++)
{
var MenuNames:String = MenuList.link_item_name[i];
trace(MenuNames)
}
}CAUTION: Note parenthesis on the MenuList.length(). An XMLList has length as a method – length() unlike a property – length in an Array. Also, watch out for cases, spaces, and braces.
Result CheckPoint: You should see a list (i.e., BASALT, BRECCIA, etc.) from the index.xml file in the output panel.
function onDataLoad (eventObject:Event):void
{
var applicationData:XML = new XML(eventObject.target.data);
//trace(applicationData)
var MenuList:XMLList = applicationData.list_item
//trace(MenuList)var menu_total:Number = MenuList.length()
for (var i:uint=0; i<menu_total; i++)
{
// var MenuNames:String = MenuList.link_item_name[i];
//trace(MenuNames)
//Setup Dynamic text for menu list
thumbnails_tl.addItem ({label:MenuList.link_item_name[i],
data:MenuList.main_body[i],
source:MenuList.thumbnail_img[i]});
}
}CAUTION: Note parenthesis. An XMLList has length as a method -- length() unlike a property -- length in an Array. Also, watch out for cases, spaces, and braces.
IMPORTANT NOTES:
Result CheckPoint: You should see TileList component populated with content from the "link_item_name" tags (i.e., BASALT, BRECCIA) from the index.xml file as well as the images.
function onDataLoad (eventObject:Event):void
{
var applicationData:XML = new XML(eventObject.target.data);
//trace(applicationData)
var MenuList:XMLList = applicationData.list_item
//trace(MenuList)
var menu_total:Number = MenuList.length()
for (var i:uint=0; i<menu_total; i++)
{
// var MenuNames:String = MenuList.link_item_name[i];
//trace(MenuNames)
//Setup Dynamic text for menu list
thumbnails_tl.addItem ({label:MenuList.link_item_name[i],
data:MenuList.main_body[i],
source:MenuList.thumbnail_img[i]});
//Setup initial page and STATIC text (title/intro)
mineral_ta.htmlText = MenuList.main_body[0];
thumbnails_tl.selectedIndex = 0;
mineral_ta.text = MenuList.link_item_name[0];
//Setup static content from XML file (not MenuList)
intro_ta.text = applicationData.intro
title_ta.text = applicationData.@title
}
NOTE: The last two lines of code is not using the MenuList variable because, as you may have remembered, the attribute of the <application> tag and node of the <intro> tag were "stripped out" in the MenuList variable. So we needed to use the complete XML variable (applicationData) to get to those values.
Note: The "mineral_ta.htmlText = MenuList.main_body[0]" is the same as the one in the "for" loop except it is hardwired with zero instead of "i" to retrieve the first node (which should always be the first item in the list).
Note: It is helpful to think of the list box as a set of drawers. Each of which can have similar or the same "stuff" in them based on the data in the repeating nodes in the XML file which represent each drawer.
Result CheckPoint: You should see all of the text fields populated. However, if you click on a tile list item, nothing happens. That because we have not yet told the Tile list to "talk" to the Mineral Text Area when it is clicked. We we do that next.
// Menu ====================================================
thumbnails_tl.addEventListener (Event.CHANGE, onMenuChange);
function onMenuChange (eventObject:Event):void
{
//trace("The " + eventObject.target.selectedItem.label + " list item was clicked")
mineral_ta.htmlText = eventObject.target.selectedItem.data;
mineralName_ta.text = eventObject.target.selectedItem.label;
}
Result Checkpoint: By clicking on a "item" in the menu list (or using the up/down arrows) the mineral_ta area changes to reflect the content from the index.xml file.
Save and Test.
Result Checkpoint: These three text fields are no longer editable. However, you can still select them.
You may have noticed that we specified the mineral_ta property to "htmlText" instead of the generic "text" property for the other text fields. We did this so that we can allow HTML tag in our XML file. However, we will need to "wrap" a CDATA tag around the main_body text in our index.xml file in order for Flash not to interpret any of the angle brackets as an XML tag.
Result Checkpoint: You should now be able to see the simple HTML tags rendered in Flash as HTML text instead of regular text. You can go back and repeat the previous steps for any other tag you like.
To see how you can repurpose this XML-based application to create another application. Add two dashes (--) to the index.xml file and remove the three (---) from the
---index.xml file to make it the new index.xml file that Flash will see. Rerun the swf file again and you will see you have a TOTALLY NEW APPLICATION.