XML menu tree

[Magdy]

Hi Flep!

first of all, i would like to congratulate you for this site, its a perfect resource place for flash lovers! Well done!!

Now my doubts!
Hope you can help me...

I´m developing a web site and i´m trying to make a menu tree that receive info from xml file. Well, I already built the menu (without effects, simple) the flash receives the xml info but what I really want is something like this: Flash Accordion Tree Menu V3 - Flash Component

Below it´s the code for the .fla file:

import fl.transitions.Tween;
import fl.transitions.easing.*;

var menuText:TextField;
var menuSubText:TextField = new TextField();

var myTween:Tween;

var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("xml/clientesBrasil.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void
{
    xml = XML(event.target.data);
    xmlList = xml.children();
    for (var i:int = 0; i < xmlList.length(); i++)
    {
        menuText = new TextField();
        menuText.text = xmlList[i].attribute("TIPO");
        menuText.y = i * 20;
        menuText.autoSize = TextFieldAutoSize.LEFT;
        menuText.name = xmlList[i].attribute("TIPO");
        addChild(menuText);
        menuText.addEventListener(MouseEvent.CLICK, onClick);
    }
}

function onClick(event:MouseEvent):void
{
    menuSubText.x = 200;
    menuSubText.y = j * menuText.height;
    menuSubText.autoSize = TextFieldAutoSize.LEFT;
    addChild(menuSubText);
    for (var j:int = 0; j < xmlList.length(); j++)
    {
        if (xmlList[j].attribute("TIPO") == event.target.name)
        {
            menuSubText.text = xmlList[j].children();
            myTween = new Tween(menuText, "y", Strong.easeOut, menuText.y, menuSubText.height, .25, true);
        }
    }
}

and here is the info from xml file:

<CB>
    <TC TIPO="MENU1">
        <CT>SUBMENU1</CT>
        <CT>SUBMENU2</CT>
        <CT>SUBMENU3</CT>
        <CT>SUBMENU4</CT>
        <CT>SUBMENU5</CT>
        <CT>SUBMENU6</CT>
    </TC>
    <TC TIPO="MENU2">
        <CT>SUBMENU1</CT>
        <CT>SUBMENU2</CT>
        <CT>SUBMENU3</CT>
        <CT>SUBMENU4</CT>
        <CT>SUBMENU5</CT>
    </TC>
    <TC TIPO="MENU3">
        <CT>SUBMENU1</CT>
        <CT>SUBMENU2</CT>
        <CT>SUBMENU3</CT>
        <CT>SUBMENU4</CT>
        <CT>SUBMENU5</CT>
        <CT>SUBMENU6</CT>
        <CT>SUBMENU7</CT>
    </TC>
    <TC TIPO="MENU4">
        <CT>SUBMENU1</CT>
        <CT>SUBMENU2</CT>
    </TC>
</CB>

With those codes, I could do a menu but not exactly like what I want.
One more thing, if you test this code, you will notice that the sub menu items appear like this <CT>SUBMENU1</CT> with the <CT></CT>. How can I take this out from not appearing?

Well this is my problem...
Really hope you can help me.
Thanks for all your dedication throw your site and for the attention!!

Magdy

[Flep]

Hi

I don't like to use XMLList class.
I would do:

var xml:XML=new XML();
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("test.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void
{
    var xml:XML=new XML(xmlLoader.data);
	var myXML:XMLDocument=new XMLDocument();
	myXML.ignoreWhite=true;
	myXML.parseXML(xml.toXMLString());
	var node:XMLNode=myXML.firstChild;
	
    for (var i:int = 0; i < node.childNodes.length; i++)
    {
        var j:int=(node.childNodes[i].childNodes.length);
		for(var k:int=0;k<j;k++)
		{
			trace(node.childNodes[i].childNodes[k].firstChild.nodeValue);
		}
    }
}

[Magdy]

Hi Flep!

Thank you for the help, but why you don´t like xmlList class?
and with the code you post, I would like to add a button function but I´m getting some errors.

below is the code: (if its possible, tell me what it´s wrong)

import fl.transitions.Tween;
import fl.transitions.easing.*;

var menuText:TextField;
var menuSubText:TextField = new TextField();

var myTween:Tween;

var xml:XML=new XML();
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("xml/clientesBrasil.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void
{
    var xml:XML = new XML(xmlLoader.data);
    var myXML:XMLDocument=new XMLDocument();
    myXML.ignoreWhite = true;
    myXML.parseXML(xml.toXMLString());
    var node:XMLNode = myXML.firstChild;
    for (var i:int = 0; i < node.childNodes.length; i++)
    {
        menuText = new TextField();
        menuText.y = i * 20;
        menuText.autoSize = TextFieldAutoSize.LEFT;
        menuText.text = node.childNodes[i].attributes.TIPO;
        addChild(menuText);

        var j:int = (node.childNodes[i].childNodes.length);
        for (var k:int = 0; k < j; k++)
        {
            menuText.addEventListener(MouseEvent.CLICK, onClick);
            function onClick(event:MouseEvent):void
            {
                trace(node.childNodes[i].childNodes[k].firstChild.nodeValue);
            }
        }
    }
}

Thanks for the attention!!

[Flep]

Hi,
I don't know the why but ... i feel better using this technic.

What's the errors you get ?

[Magdy]

Hi Flep!

Fist of all I will post the code I´m using:

var menuText:TextField;
var menuSubText:TextField = new TextField();


var xml:XML = new XML();
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("xml/clientesBrasil.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void
{
    var xml:XML = new XML(xmlLoader.data);
    var myXML:XMLDocument=new XMLDocument();
    myXML.ignoreWhite = true;
    myXML.parseXML(xml.toXMLString());
    var node:XMLNode=myXML.firstChild;

    for (var i:int = 0; i < node.childNodes.length; i++)
    {
        menuText = new TextField();
        menuText.y = i * 20;
        menuText.autoSize = TextFieldAutoSize.LEFT;
        menuText.selectable = false;
        menuText.text = node.childNodes[i].attributes.TIPO;
        addChild(menuText);
        menuText.addEventListener(MouseEvent.CLICK, onClick);

        var j:int = (node.childNodes[i].childNodes.length);
        function onClick(event:MouseEvent):void
        {
            for (var k:int = 0; k < j; k++)
            {
                menuSubText.x = 200;
                menuSubText.y = k * 20;
                menuSubText.autoSize = TextFieldAutoSize.LEFT;
                addChild(menuSubText);

                menuSubText.text = node.childNodes[i].childNodes[k].firstChild.nodeValue;
                //trace(node.childNodes[i].childNodes[k].firstChild.nodeValue);
            }
        }
    }
}

Well I get an error of undefined property when I add a button function inside the for loop and call the subitems using this code:

menuSubText.text = node.childNodes[i].childNodes[k].firstChild.nodeValue;

I resolve this by adding the for loop to the button function and substituting the i for j on the code above, but I still have a problem, when I click on the first item it was supposed to show the subitems of the first item and the same for the rest. what I get is only one item. I have no idea of what I´m doing wrong.

If its possible, test this code to see the error.
I really need help on this...

Thanks a lot!!

[Flep]

You can't use the onClick function in that way.

For example, when you click an item, the firt loop ( i ) is no more active, so the function does a loop only ( k ).

First of all, you should load the xml and push all the values into Arrays.
After that, you add the MouseEvent and onClick function and inside it you get the values you need from Arrays.

[Magdy]

I´m confused on how to push the values into array.
I read the tutorial about arrays form your site, and try this:

var xmlArrays:Arrays = new Array()

xmlArrays.push(node.childNodes[i].childNodes[k].firstChild.nodeValue);
trace(xmlArrays);

but where to add the push function? Inside the onClick function? I will need another for loop to show the subitens?

Hey Flep sorry if I´m disturbing you, but you are the only one from the foruns I post that tries to aswer my question.

So, I'm really very glad for your attention

[Flep]

You should push the values. ( not inside the onClick function ).
And, you can use a bidimensional Array like this sample:

Multiple Gallery XML Slideshow

[hard_overclocker]

Hey Magdy, here is one XML menu I created for a website. Take a look at the source and perhaps you can get some help out of it. The problem is that the code is bloated with all kind of junk workarounds (my type of coding i'm afraid).
Hope this helps, if not perhaps we will have a tutorial here soon about this.

I have uploaded the code.

Happy flashing. Ciao

[Magdy]

Hi hard_overclocker!!

Thank you very much for your menu tree source, I understand some things, but I´m still confused with others... :(
Hope we could have a tutorial on how to do this xml menu tree soon here. :)
It will be fantastic!!

Well first o all I´m not repeating my first post. I just want to understand somethings so I will post my original code using xmlList (sorry Flep! :P - this code works perfect with your code too!) and would like a help on how to add a tween effect when the Top level item was clicked. For example: if top level 1 is clicked, all the others top levels "y" property will change (with tween effect) according to the length of the subitems of the top level 1. And so on for the others top levels.

import fl.transitions.Tween;
import fl.transitions.easing.*;

var menuText:TextField;
var menuSubText:TextField = new TextField;
var myTween:Tween;

var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("xml/clientesBrasil.xml"));

xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void
{
    xml = XML(event.target.data);
    xmlList = xml.children();
    for (var i:int = 0; i < xmlList.length(); i++)
    {
        menuText = new TextField();
        menuText.y = i * 20;
        menuText.text = xmlList[i].attribute("TIPO");
        menuText.name = xmlList[i].attribute("TIPO");
        menuText.autoSize = TextFieldAutoSize.LEFT;
        addChild(menuText);
        menuText.addEventListener(MouseEvent.CLICK, onClick);
    }
}

function onClick(event:MouseEvent):void
{
    for (var j:int = 0; j < xmlList.length(); j++)
    {
        menuSubText.x = 200;
        menuSubText.autoSize = TextFieldAutoSize.LEFT;
        addChild(menuSubText);
        if (xmlList[j].attribute("TIPO") == event.target.name)
        {
            menuSubText.text = xmlList[j].children();
            myTween = new Tween (menuText, "y", Strong.easeOut, menuText.y, menuSubText.height, 1, true);
        }
    }
}

If you could test this code using the xml file I post in the first post, you will see that the "y" tween effect it´s woking, but only the last top level change the "y" property (MENU 4). It´s really necessary to use arrays to apply this tween effect to the others top levels items?

I´m asking this because if you remove the tween effect, and test the movie, you will see that the menu works fine, top level clicked shows the correct subitem.

I´m not an expert on AS3, but i imagine it´s kind simple to do this, but it´s not working...:(

Hope I explanated what is confusing me.
Again, I would like to thank for all your help!!

By!!