Page 1 of 1

Stepping into XML driven multilevel menu AS3 Rate Topic: -----

#1 hadi_php  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 10
  • View blog
  • Posts: 382
  • Joined: 23-August 08

Posted 30 November 2012 - 10:25 AM

Hello,

Lets step into XML driven multi level menu. To do so,

1. You need to load XML file,
2. Parse XML file,
3. Display menu hierarchy.

NOTE: This tutorial will show only trace OUTPUT.


1. Make a multilevel xml menu -

<?xml version="1.0"?>

<menus>
	<item>
		<id>1</id>
		<parentId>0</parentId>
		<title>Home</title>
		<link>http://google.com</link>
	</item>
	<item>
		<id>2</id>
		<parentId>0</parentId>
		<title>About</title>
		<link>http://google.com</link>
	</item>
	<item>
		<id>3</id>
		<parentId>0</parentId>
		<title>Profile</title>
		<link>http://google.com</link>
	</item>
	<item>
		<id>4</id>
		<parentId>0</parentId>
		<title>Contact</title>
		<link>http://google.com</link>
	</item>
	<item>
		<id>5</id>
		<parentId>2</parentId>
		<title>About Company</title>
		<link>http://google.com</link>
	</item>
	<item>
		<id>6</id>
		<parentId>2</parentId>
		<title>About us</title>
		<link>http://google.com</link>
	</item>
	<item>
		<id>7</id>
		<parentId>5</parentId>
		<title>Third level</title>
		<link>http://google.com</link>
	</item>
	<item>
		<id>8</id>
		<parentId>7</parentId>
		<title>Fourth level</title>
		<link>http://google.com</link>
	</item>
</menus>


save it as menu.xml.

XML description:

each item contain each menu details (id,parentId,title,link). parentId contain the id of parent menu by which we will detect submenu item.

2. Create a new (File>new>Action Script 3)
3. You will see a blank Layer 1. Select layer 1 and press F9 to open action window.
4. Copy and paste following code:

var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
xmlLoader.load(new URLRequest("menu.xml"));
 
function LoadXML(e:Event):void {
	var xmlData:XML = new XML(e.target.data);
	ParseMenu(xmlData);
}

function ParseMenu(menu:XML):void {
	trace("XML");
	trace("=======");
	trace(menu);
	trace("=======");
	
	for (var i:int = 0; i<menu.children().length(); i++){
		if(menu.item.parentId[i] == 0){
			trace(menu.item.title[i]);
			FindSubmenu(menu,menu.item.id[i]);
		}
	}
}

function FindSubmenu(menu:XML,id:int,incre:int=1){
	for (var i:int = 0; i<menu.children().length(); i++){
		if(menu.item.parentId[i] == id){
			trace(repeat("-",incre)+menu.item.title[i]);
			FindSubmenu(menu,menu.item.id[i],incre+1);
		}
	}
}

function repeat(str:String,times:Number=1){
	var rtnString:String;
	for(var h:int = 1; h<=times; h++){
		 (rtnString==null)?rtnString=str:rtnString+=str;
	}
	return rtnString;
}


5. Ctrl + Enter to see the Output.

You will see something similar like this -

Home
About
-About Company
--Third level
---Fourth level
-About us
Profile
Contact


Code explanation:

At stage -

var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
xmlLoader.load(new URLRequest("menu.xml"));


You can see new URLRequest("menu.xml") which is loading the XML file and when event is complete LoadXML function is initiated.

function LoadXML(e:Event):void {
	var xmlData:XML = new XML(e.target.data);
	ParseMenu(xmlData);
}


Here a variable named xmldata is being called to store XML data and passed to ParseMenu function for parsing nodes.

function ParseMenu(menu:XML):void {
	trace("XML");
	trace("=======");
	trace(menu);
	trace("=======");
	
	for (var i:int = 0; i<menu.children().length(); i++){
		if(menu.item.parentId[i] == 0){
			trace(menu.item.title[i]);
			FindSubmenu(menu,menu.item.id[i]);
		}
	}
}


here a for loop started to show menu names (Before that you must need to know how to call node in AS3). I am reading total menu item by
menu.children().length()
. First we need to show parent menus where each parent menu contains 0 into parentId node. While loop is started, we also need to find and check to know whether this menu contains submenu or not. To do show FindSubmenu function has been called and passing menu xml and current menu's id.

function FindSubmenu(menu:XML,id:int,incre:int=1){
	for (var i:int = 0; i<menu.children().length(); i++){
		if(menu.item.parentId[i] == id){
			trace(repeat("-",incre)+menu.item.title[i]);
			FindSubmenu(menu,menu.item.id[i],incre+1);
		}
	}
}


This is recursive function. No matter how many child a item have it will show. This is the magic of recursive function. I have used a repeat function acts like string repeat to see the level of menu hierarchy.

function repeat(str:String,times:Number=1){
	var rtnString:String;
	for(var h:int = 1; h<=times; h++){
		 (rtnString==null)?rtnString=str:rtnString+=str;
	}
	return rtnString;
}


You can just trace("@",5); and it will output "@@@@@" 5 times.

So, this is a step to building multilevel xml driven menu. See you in my next tut :)

Is This A Good Question/Topic? 0
  • +

Page 1 of 1