Traverse XML Actionscript 3

Hello Experts,

I'm working on an XML navigation for my Flash site and am having a little difficulty figuring out where I am in th XML object while traversing. I need to know if the navLink node is a subcategory of a previous node. For example, Nav 1 is not a subcategory, Nav 2 is not a subcategory, Nav 2_1 is a subcategory of Nav 2, Nav 3_1_1 is a subcategory of Nav 3_1 which is a Nav 3.

Here's my code so far:

var xmlNavBarContent02:XML = <MainNavigation>
							<navLink>
								<label>Nav 1</label>
							</navLink>
							<navLink>
								<label>Nav 2</label>
								<navLink>
									<label>Nav 2_1</label>
								</navLink>
								<navLink>
									<label>Nav 2_2</label>
								</navLink>
								<navLink>
									<label>Nav 2_3</label>
								</navLink>
								<navLink>
									<label>Nav 2_4</label>
								</navLink>
							</navLink>
							<navLink>
								<label>Nav 3</label>
								<navLink>
									<label>Nav 3_1</label>
									<navLink>
										<label>Nav 3_1_1</label>
									</navLink>
									<navLink>
										<label>Nav 3_1_2</label>
									</navLink>
									<navLink>
										<label>Nav 3_1_3</label>
									</navLink>
								</navLink>
								<navLink>
									<label>Nav 3_2</label>
									<navLink>
										<label>Nav 3_2_1</label>
									</navLink>
									<navLink>
										<label>Nav 3_2_2</label>
									</navLink>
									<navLink>
										<label>Nav 3_2_3</label>
									</navLink>
								</navLink>
								<navLink>
									<label>Nav 3_3</label>
									<navLink>
										<label>Nav 3_3_1</label>
									</navLink>
									<navLink>
										<label>Nav 3_3_2</label>
									</navLink>
									<navLink>
										<label>Nav 3_3_3</label>
									</navLink>
								</navLink>
							</navLink>
						</MainNavigation>;	
 
function getNavItems(xm:XMLList){
	for(var i:Number = 0; i < xm.length(); i++){ 
		trace(xm[i].label);
		if(xm[i].navLink != undefined){					
			getNavItems(xm[i].navLink);			
		}
	}
}
 
getNavItems(xmlNavBarContent02.navLink);

Open in new window

vdiaz761Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Robinsonx6Connect With a Mentor Commented:
Sorry for the delay

Ok since the MenuBar builds itself from XML all we need to do is load the xml from its source (dynamically)

i have reCreated the MainNavigation.as file as follows

//MainNavigation.as
package
{
      import flash.events.Event;
      import flash.events.IOErrorEvent;
      import flash.net.URLLoader;
      import flash.net.URLRequest;
      import flash.xml.XMLDocument;
      [Bindable]
      public class MainNavigation extends XMLDocument
      {
            private var loader:URLLoader = new URLLoader();
            private var request:URLRequest = new URLRequest("Navigator.xml");
            
            public var externalXML:XML = new XML();
            
            public function MainNavigation()
            {
                  ignoreWhite = true;
                  loader.addEventListener(Event.COMPLETE, onComplete);
                  loader.addEventListener(IOErrorEvent.IO_ERROR, onError);
                  loader.load(request);
            }
            
            private function onComplete(event:Event):void {
                var loader:URLLoader = URLLoader(event.target);
                externalXML = new XML(loader.data);
            }
            
            private function onError( event : IOErrorEvent):void{
                  trace("Error: " + event.toString());
            }
            
      }
}

Create an xml file called Navigator.xml in the same folder

<?xml version="1.0" encoding="ISO-8859-1"?>
<MainNavigation label="menu">
                        <navLink label="Nav 1"></navLink>
                        <navLink label="Nav 2">
                              <navLink label="Nav 2_1">
                                    <navLink label="Nav 2_1_1"></navLink>
                                    <navLink label="Nav 2_1_2"></navLink>
                              </navLink>
                              <navLink label="Nav 2_2"></navLink>
                        </navLink>
                        <navLink label="Nav 3">
                              <navLink label="Nav 3_1"></navLink>
                              <navLink label="Nav 3_2"></navLink>
                              <navLink label="Nav 3_3"></navLink>
                        </navLink>
</MainNavigation>

and here is the new mxml code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
      <![CDATA[
      import mx.controls.MenuBar;
      private var mainNav : MainNavigation = new MainNavigation();
      ]]>
</mx:Script>
      <mx:Canvas left="10" right="10" top="10" bottom="10">
            <mx:MenuBar x="10" y="10" id="mnu" dataProvider="{mainNav.externalXML}" labelField="@label"></mx:MenuBar>
      </mx:Canvas>
</mx:Application>
0
 
Robinsonx6Commented:
is this a flex or flash question before i work on this one for you
0
 
Robinsonx6Commented:
ok action script 3 XML Traverse

please see the attached Code Snippet which is an XMLDocument Class holding your XMLData

in the getXMLString i have made life simpler for you by putting the label as an attribute i find this a bit easyer if its to be searched against

first we parse the xmlString into the doc then we loop through the child nodes of the root
and then loop through there children and from here you can do whatever you like.

the output from the code below is as follows

Link:Nav 1
Link:Nav 2
Child Link:Nav 2
Child Link:Nav 2
Link:Nav 3
Child Link:Nav 3
Child Link:Nav 3
Child Link:Nav 3

I think this is your most simplest methood and i have provided all the code required, please let me know if there is anything else i can help with

package
{
	import flash.xml.XMLDocument;
	import flash.xml.XMLNode;
 
	
	
	public class MainNavigation extends XMLDocument
	{
 
		
		
		public function MainNavigation()
		{
           	ignoreWhite = true;
            parseXML(getXMLString());
			var links:Array = parseLinks(firstChild);
 
		}
		
    	private function parseLinks(node:XMLNode):Array {
		    var links:Array = new Array();
		
		    var kids:Array = node.childNodes;
		    
		    for each(var item:XMLNode in kids) {
		        parseLink(item, links);
		    }
		
		    return links;
		}
		
		private function parseLink(node:XMLNode, links:Array):void{
    		trace("Link:" + node.attributes.label.toString());
    		var kids:Array = node.childNodes;
    		for each(var item:XMLNode in kids) {
    			trace("Child Link:" + node.attributes.label);
    		}
    	}
    	
    	private function getXMLString():String {
            var list:XML = <MainNavigation>
				<navLink label="Nav 1"></navLink>
				<navLink label="Nav 2">
					<navLink label="Nav 2_1"></navLink>
					<navLink label="Nav 2_2"></navLink>
				</navLink>
				<navLink label="Nav 3">
					<navLink label="Nav 3_1"></navLink>
					<navLink label="Nav 3_2"></navLink>
					<navLink label="Nav 3_3"></navLink>
				</navLink>
			</MainNavigation>;
            return list.toXMLString();
        }
 
	}
	
 
}

Open in new window

0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
vdiaz761Author Commented:
Robinsonx6, Thanks for the reply. The code you provided generates an error:
"5000: The class 'MainNavigation' must subclass 'flash.display.MovieClip' since it is linked to a library symbol of that type."

I tried changing the class to extend MovieClip but that only gave me a bunch more errors.

My goal with this whole thing is to create a drop down flash navigation.

Thanks again for your help and I look forward to your response.
0
 
Robinsonx6Commented:
is this a flash app or a flex app you are designing i was assuming it was a flex as you posted the question into the flex forum
0
 
Robinsonx6Commented:
The code i provided was a flex as3 app which i had tested fully is flex buuilder 3.3
0
 
vdiaz761Author Commented:
OK... how do I use it in Flex?
0
 
Robinsonx6Commented:
i read that in AS3 FLASH you can create super classes then extend ontop of that

http://board.flashkit.com/board/showthread.php?t=756783
http://board.flashkit.com/board/showthread.php?t=754281
http://www.matthijskamstra.nl/blog/index.php/2007/09/22/as3-take-one-step-at-a-time-step-1/

i hope this helps i will continue to try to convert it to flash for you if you need please let me know
0
 
Robinsonx6Commented:
in flex it is very simple to use

create a new ActionScriptClass called MainNavigation.as then replace all the code with the code i have privided you


next from your main mxml file code you just call create an instance of it and it will run as above

private function xmlInit():void{
var mainNav : MainNavigation = new MainNavigation();
}

you can then do what you like with the children



p.s i know this works in Flex 3.3
0
 
vdiaz761Author Commented:
Please show me what the MXML file will look like complete with <mx:Application> tags. Please show me how to access the child nodes independently.

Also, this XML you created goes down to one subcategory. I'm looking for something that goes down at least two. Ideally, it should go any number of depth depending on the XML.

<MainNavigation>
      <navLink label="Nav 1"></navLink> //2nd level
      <navLink label="Nav 2"> //1st level
            <navLink label="Nav 2_1"></navLink> //2nd level
                  <navLink label="Nav 2_1_1"></navLink> //3rd level
                  <navLink label="Nav 2_1_2"></navLink> //3rd level
                  <navLink label="Nav 2_1_3"></navLink> //3rd level
            <navLink label="Nav 2_2"></navLink> //2nd level
      </navLink>
      <navLink label="Nav 3"> //1st level
            <navLink label="Nav 3_1"></navLink> //2nd level
            <navLink label="Nav 3_2"></navLink> //2nd level
            <navLink label="Nav 3_3"></navLink> //2nd level
      </navLink>
</MainNavigation>

Here's an example of what I'm trying to accomplish... except this is in AS 2. I need this in AS 3:
http://www.kirupa.com/developer/actionscript/xml_dropdown_menu.htm
0
 
Robinsonx6Commented:
ok this is the simplest method of menus in flex and it works multi level no matter what depth

ive posted you the whole mxml code for you to see
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:MenuBar x="10" y="10" id="mainMenu" labelField="@label">
        <mx:XMLList>
            <menuitem label="MenuItem A">
                <menuitem label="SubMenuItem A-1" enabled="false"/>
                <menuitem label="SubMenuItem A-2"/>
            </menuitem>
            <menuitem label="MenuItem B"/>
            <menuitem label="MenuItem C"/>
            <menuitem label="MenuItem D">
                <menuitem label="SubMenuItem D-1" type="radio" groupName="one">
                	 <menuitem label="SubMenuItem D-1-1" type="radio" groupName="two" />
                	 <menuitem label="SubMenuItem D-1-2" type="radio" groupName="two" />
                </menuitem>
                <menuitem label="SubMenuItem D-2" type="radio" groupName="one" selected="true"/>
                <menuitem label="SubMenuItem D-3" type="radio" groupName="one"/>
            </menuitem>
        </mx:XMLList>
	</mx:MenuBar>
</mx:Application>

Open in new window

0
 
vdiaz761Author Commented:
This works, but it's not dynamic. The nav items will come from an external XML file. This is not an implementation of the AS 3 code you provided previously.

Can you point me in the direction of getting a customize-able drop down menu that can go any number of levels?
0
 
Robinsonx6Commented:
no i was only showing you how easy basic menu systems where in flex to get you started and to shouw you how well it can handle the multi level no matter what depth.

i will endeavour to re-create the flex MainNavigation class for you so it integrates with the flex MenuBar for you its simple but its late at night here.

talk in the morning

regards
Chris
0
All Courses

From novice to tech pro — start learning today.