Creating a very simple XML-driven gallery

[BABEL_CORPORATION]

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.

[riquigley]

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>

[Ned Murphy]

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");
   }
}

[BABEL_CORPORATION]

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.

[Ned Murphy]

Yeah, I'm not going to try to help much further with all those functions nested/merged.  It is bad practice and bound to lead to trouble...  and it is also difficult to read when you do that, especially when you don't display it with proper indentation.  Eaqch function can and should be a separate entity.

I was trying to allude to something in the last code I offered which you missed picking up on.  Parse all your xml right into whatever storage you are providing in a single function...

function parseXML(imgLoad:XML):void {

   var imgNames:XMLList = imgLoad.imagenames.name;
   var imgPaths:XMLList = imgLoad.imagepaths.path;

   for(var i:uint=0; i<imgNames.length(); i++){
      LABEL.addItem( { label:imgNames.text(), data: imgPaths.text() } );
   }
}

As far as the List component goes, it is quite well documented, so another thing you'll need to get a handle on is how to work with the Flash help documentation.  It identifies all of the properties, methods, and events that are associated with every object.  Some of these are shared by a variety of components, so you need to select to have the shared elements presented as well.  You should be able to read thru the events to determine which you can assign an event listener for, and you should be able to read thru the properties to see which one will tell you which elenet of the list has been selected and how to extract the label or data for that selection.

[BABEL_CORPORATION]

NED, thank you so much for your help, I've been working on this for weeks and I wouldn't have worked it out without your guidance. It might not seemed like a lot but I now understand what I am doing. Many many thanks!!

[Ned Murphy]

You're welcome