Creating a very simple XML-driven gallery

Thank you for your reply Ned, I understand that - thanks for explaining it to me.

I switched from using a dynamic text box and I am now putting my XML into an array, which reproduces itself in a list component as you suggested.

How do you trace the values from the list component? For instance, an eventListener that would trace the text "image1.jpg" when I clicked on the label item "image1" with its data value? I'm unsure that eventListener would be suitable but I can't find much documentation on this and there seems to be many mutiple ways to do the same thing. The values are stored within the list under label and data but I'm not sure how to trace them or how to command my UILoader to recognize them.

My label component is called "LABEL". I also have a UILoader on my stage called "UILOADER". I am now working with the following code.

import flash.events.Event;

var xmlLoader:URLLoader = new URLLoader(); var xmlData:XML = new XML();

xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

xmlLoader.load(new URLRequest("rootdir.xml"));

var array:Array = new Array();

var arraySource:Array = new Array()

function loadPage(pageLoader:String):void{

UILOADER.source = pageLoader;}

function LoadXML(e:Event):void {

xmlData = new XML(e.target.data);

ParseImg(xmlData);

ParseSource(xmlData);

function ParseImg(XMLobject:XML):void{

var imgList:XMLList   = xmlData.image.imgName;

for  (var i:int= 0;i<imgList.*.length(); i++){

array.push(imgList);}

for each (var imageTitle:XML in imgList) {

LABEL.addItem({label:imageTitle});

}

}

function ParseSource(XMLobject:XML):void{

var imgSource:XMLList = xmlData.image.imgPath;

for  (var i:int= 0;i<imgSource.*.length(); i++) {

arraySource.push(imgSource);

for each (var getLink:XML in imgSource){

LABEL.addItem({data:getLink});

}

loadPage(LABEL.data); // wrong

trace(array);

}}}//}

Sorry about grouping all my functions together - I know that will make many experienced programmers cringe, but I'm only a novice.

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.text()+"  "+imgPaths.text());
      imgText.appendText(imgNames.text()+"  "+imgPaths.text() +"\n");
   }
}

I have a image loader I just completed that works pretty much just like this.  I made it this morning at work.  Unfortunately, I left it at work.  If no one answers you before Monday morning, I'll be happy to post my soure code here.

One suggestion... I'm no XML expert, but I would structure your XML differently.  Maybe something like...

<GALLERY>

          <IMAGE name="image1">image1.jpg</IMAGE>

          <IMAGE name="image2">image2.jpg</IMAGE>

          <IMAGE name="image3">image3.jpg</IMAGE>

          <IMAGE name="image4">image4.jpg</IMAGE>

</GALLERY>