Creating a very simple XML-driven gallery

Question

Hi, I'm learning XML in AS3 and I am having real trouble finding a resource that can help me learn how to build a very simple XML-driven picture gallery.
I am working in an FLA file with AS3, with a dynamic text field with the instance name "textfield". I also have a UILoader Component with the instance name "UILoaderComponent" and an XML file called "rootdir.xml".
I have an XML file in the following format.
<images>
     <imagenames>
          <name>image1</name>
          <name>image2</name>
          <name>image3</name>
          <name>image4</name>
          <name>image5</name>
     </imagenames>
     <imagepaths>
          <path>image1.jpg</path>
          <path>image2.jpg</path>
          <path>image3.jpg</path>
          <path>image4.jpg</path>
          <path>image5.jpg</path>
     </imagepaths>
</images>
I am using the following as my actionscript.
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
xmlLoader.load(new URLRequest("rootdir.xml"));
function LoadXML(e:Event):void {
xmlData = new XML(e.target.data);
parseImg(xmlData);
function parseImg(imgLoad:XML):void {
var imgChild:XMLList = imgLoad.images.children();
for each (var imgTrace:XML in imgChild) {
trace(imgTrace);
No matter which way I experiment, I always have poor results with my dynamic text, and every tutorial I've followed does not reproduce anything like the same returned data in "textfield" that it does with the trace command.
My objective is: I simply want to build a menu inside a textbox called "textfield" that lists images1-5, and when clicked, calls upon the relevant image. For instance: I load the file "rootdir.xml" into the file "index.fla". I call a function to parse the XML into a dynamic text box called "textfield". When image 2 is clicked on the textbox "textfield", it would call upon a function that would load into the UIComponent Loader "image2.jpg".
Are there any tutorials for this? I'm so confused as to why dynamic text operates so differently from the trace command. I'm not interested in doing a fancy menu bar with thumbnails, scrollbars and animations, I just want to learn the basics.

Answer 1

I don't really see how you are getting a valid trace out of that code (I get nothing if I try it as is), but as far as the textfield goes, you haven't shown any attempt in your code that might help to point to why you cannot get the text into a textfield.  It might be a problem with how you are trying to write to the textfield and not how your are manipulating the data.
While you could make use of a textfield for the menu, doing so is not straightforward, as you would need to implement htmlText with special coding in order to have the text clickable.  You might consider using a List component or ComboBox instead.
What I always do when I am working with xml is to store the data into a data structure, usually an array conatining objects, and then make use of that structure rather than dippng into the xml data itself when I utilize the data.
Another thing, which rquigley demonstrated, is that your xml will serve its purpose better if the data for each image is collected under the same node.  If you have separate sections for each piece of data like you have, when it comes to editing it will be more prone to error as you have to be sure you are editing the correct entry of each separate group.
I too am no expert in the world of xml, but I have not yet worked with parameters inside the tags, so I would usually structure it as...
<images>
   <image>
       <imgName>image 1</imgName>
       <imgPath>image1.jpg</imgPath>
   </image>
   <image>
       <imgName>image 2</imgName>
       <imgPath>image2.jpg</imgPath>
   </image>
</images>
Now, back to what you have...  let's say you have a textField named imgText that you want to list the image names in.  The following should work, though I do not go my usual route of storing the data into an object array first...
function parseImg(imgLoad:XML):void {
   var imgNames:XMLList = imgLoad.imagenames.name;
   var imgPaths:XMLList = imgLoad.imagepaths.path;
   // show name
   for each (var nameTrace:XML in imgNames) {
      trace(nameTrace);
      imgText.appendText(nameTrace +"\n");
   // show path
   for each (var pathTrace:XML in imgPaths) {
      trace(pathTrace);
      imgText.appendText(pathTrace +"\n");
   // show name and path
   for(var i:uint=0; i<imgNames.length(); i++){
      trace(imgNames[i].text()+"  "+imgPaths[i].text());
      imgText.appendText(imgNames[i].text()+"  "+imgPaths[i].text() +"\n");