[RESOLVED] [F8] Tree --> ScrollPane Combination

Hi,

I can get Tree to work with XML using web url's
I can load scrollpanes through buttons

But, how do I load a ScrollPane using a tree node??

What I want to do is... is when someone clicks a node on Tree, it loads a swf into the Scrollpane.

Simple!!

Does anyone know how??

Thanks

:)

This is what I started with in my XML

Code:

---

<node>
        <node label="SWF 1" sp.contentPath="1.swf" />
        <node label="SWF 2" sp.contentPath="2.swf" />
</node>

---

of course it doesn't work.

Any help would greatly be appreciated!!

:)

Code:

---

// tree component - instance name - theTree
// scrollpane component - instance name - thePane

var myXML:XML = new XML();
myXML.ignoreWhite = true;
myXML.load("images.xml");

myXML.onLoad = function(){
theTree.dataProvider = this.firstChild;
theTree.setIsOpen(theTree.getTreeNodeAt(0), true); // set nodes open
theTree.setIsOpen(theTree.getTreeNodeAt(1), true);
};

var treeObj:Object = new Object();
treeObj.change = function(){
var itemSelected = theTree.selectedItem.attributes;
thePane.contentPath = itemSelected.data;
};

theTree.addEventListener("change", treeObj);

/*--images.xml--
<?xml version="1.0" encoding="UTF-8"?>
<node>

<child label="Pirate 1">
<child2 label="image1" data="image1.swf"/ >
</child>

<child label="Pirate 2">
<child2 label="image2" data="image2.swf" />
</child>

</node>
*/

---

hth :)

Quote:

---

Originally Posted by a_modified_dog

Code:

---

// tree component - instance name - theTree
// scrollpane component - instance name - thePane

var myXML:XML = new XML();
myXML.ignoreWhite = true;
myXML.load("images.xml");

myXML.onLoad = function(){
theTree.dataProvider = this.firstChild;
theTree.setIsOpen(theTree.getTreeNodeAt(0), true); // set nodes open
theTree.setIsOpen(theTree.getTreeNodeAt(1), true);
};

var treeObj:Object = new Object();
treeObj.change = function(){
var itemSelected = theTree.selectedItem.attributes;
thePane.contentPath = itemSelected.data;
};

theTree.addEventListener("change", treeObj);

/*--images.xml--
<?xml version="1.0" encoding="UTF-8"?>
<node>

<child label="Pirate 1">
<child2 label="image1" data="image1.swf"/ >
</child>

<child label="Pirate 2">
<child2 label="image2" data="image2.swf" />
</child>

</node>
*/

---

hth :)

---

Okay... great... that works!!

Now, what If I want to load SWF and use nodes as an URL??

I want to beable to load both using one tree.

You have been great... thanks

:)

Okay... this is my XML...

Code:

---

<?xml version="1.0" encoding="UTF-8"?>
<node>
        <node label="Flash swf 1">
                <child2 label="swf 1" data="image1.swf" />
        </node>

        <node label="Flash swf 2">
                <child2 label="swf 2" data="image2.swf" />
        </node>

        <node label="My Bookmarks">
                <child2 label="Adobe Web site" url="http://www.adobe.com" />
        </node>

</node>

---

I get a strange behavior...

I can click on "swf 1" and "swf 2" (child nodes) and get the swf to load in the scrollpane.

However, when I collaspse or just go back and click other places on the tree and then try to click the 2 swf's.... it doesn't work.

I haven't changed the code in frame 1 (you supplied above)
Also, I want to beable to launch htm pages too, besides loading swf's.

Thanks

:)

I believe this is where I have to evaluate the selected item and see if it is a data or url that is selected.

Code:

---

var treeObj:Object = new Object();
treeObj.change = function(){
    var itemSelected = theTree.selectedItem.attributes;

    I NEED AN IF STATMENT EVAULATING URL or DATA HERE

}

---

What do you think.

Well this is what I have.

Code:

---

var treeL:Object = new Object();
treeL.change = function() {
    var itemSelected = theTree.selectedItem.attributes;

    if (itemSelected == itemSelected.attributes.data) {
        thePane.contentPath = itemSelected.data;
    } else if (itemSelected.attributes == itemSelected.attributes.url) {
        getURL(itemSelected, "_self");
    } else {
        thePane.contentPath = "";
  }
}

theTree.addEventListener("change",treeL);

---

But it doesn't work.
It only works on the first if... it never is true on the else if or else.

Please help.

I did a trace on this and it returns "undefined" when I click a child node "swf 1" or any item in the tree.

var itemSelected = theTree.selectedItem.attributes;

Why?

I am going to bed.

My brain is mush trying to fix this.

Can anybody help??

:)

try this approach -var treeObj:Object = new Object();

Code:

---

treeObj.change = function(){
var itemSelected = theTree.selectedItem.attributes;
theData = itemSelected.data;    trace(theData);
theURL = itemSelected.url;      trace(theURL);
if(theURL == undefined){
thePane.contentPath = theData;
}
if(theData == undefined){
getURL(theURL, "_blank");
}
};

theTree.addEventListener("change", treeObj);

---

EDIT - additional Boolean var added, prevents error when opening nodes
change structure of if statements to suit Boolean flag

Code:

---

var treeObj:Object = new Object();
treeObj.change = function(){
var OK:Boolean = true;
var itemSelected = theTree.selectedItem.attributes;
theData = itemSelected.data;    trace(theData);
theURL = itemSelected.url;      trace(theURL);

if(theURL == undefined && theData == undefined){
OK = false;
thePane.contentPath = null;
}

if(theData != undefined && OK){
thePane.contentPath = theData;
}

if(theURL != undefined && OK){
getURL(theURL, "_blank");
}

};

theTree.addEventListener("change", treeObj);

---

Oops... I thought it worked!!!

Why does clicking on a node return "undefined" (using trace) even when there is a "data" or "url"??

In the player it works in the IDE, but in a web page it doesn't.

I am concerned about the "undefined"... it shouldn't be return that except it be a folder.

clicking to open a folder node of the tree fires the treeObj.change function
as there is no data or url, it returns (as a result of the traces)
undefined
undefined

opening a treeNode containing data, returns
image1.swf
undefined

opening a treeNode containing url, returns
undefined
http://www.adobe.com

hence the need for boolean checks within the if(conditions)

hth :)

Man... i figured why it didn't work in the browser.

I had to close the browser and reopen it. Just refreshing it doesn't clear reiniialize the tree and xml correctly.

Thanks

:)

SO IT WORKS!!
HERE IS THE CODE FOR EVERYONE ELSE

Code:

---

// tree component - instance name = theTree
// scrollpane component - instance name = thePane
// create xml file - with file name = "images.xml"
//<tree>
//        <folder label="Flash swf 1">
//                <node label="swf 1" data="image1.swf" />
//        </folder>
//        <folder label="Flash swf 2">
//                <node label="swf 2" data="image2.swf" />
//        </folder>
//        <folder label="My Bookmarks">
//            <node label="Adobe Web site" url="http://www.adobe.com" />
//        </folder>
//</tree>

var xml:XML = new XML();
xml.ignoreWhite = true;

xml.onLoad = function() {
        theTree.dataProvider = this.firstChild;
        theTree.setIsOpen(theTree.getTreeNodeAt(0), true); // set nodes open
        theTree.setIsOpen(theTree.getTreeNodeAt(1), true);
        theTree.setIsOpen(theTree.getTreeNodeAt(2), true);
}
xml.load("images.xml");

var treeObj:Object = new Object();
treeObj.change = function(){
var OK:Boolean = true;
var itemSelected = theTree.selectedItem.attributes;
theData = itemSelected.data;    trace(theData);
theURL = itemSelected.url;      trace(theURL);

if(theURL == undefined && theData == undefined){
OK = false;
thePane.contentPath = null;
}

if(theData != undefined && OK){
thePane.contentPath = theData;
}

if(theURL != undefined && OK){
getURL(theURL, "_blank");
}

}
theTree.addEventListener("change", treeObj)

---