6 Replies Latest reply on May 12, 2009 3:56 AM by Pinnennet

    Tree Component Icons

    Archon68

      I'm using the tree component for a little Windows Parody I'm making. In my .fla, There's a tree component that loads an external XML file.  I can't figure out how to add custom icons to my component, though.

       

      I know it's possible to set the icons for just the default folder and file icons, but since it's a Windows Parody, there'll be different icons for different file types, folder types, etc.

       

      In other words,  I'd like to have a different icon for every item in my Tree component.

       

      How can I do this? 

       

      Here are the contents of my XML file:

       

       

      <node>

          <node label="Desktop">

      </node>

          <node label="Documents">

      <node label="Pictures" isBranch="true" />

      <node label="Movies" isBranch="true" />

      <node label="Games" isBranch="true" />

      <node label="Video" isBranch="true" />

      </node>

          <node label="Computer">

      <node label="Local Disk (C:)" isBranch="true" />

      <node label="Local Disk (D:)" isBranch="true" />

      <node label="DVD-RAM Drive (E:)" isBranch="true" />

      <node label="DVD/CD-RW Drive (F:)" isBranch="true" />

      </node>

      <node label="Readme.txt" isBranch="true" />

      </node>

       

       

      And the code on the first frame of my .fla file.  The Tree's name is "fileTree", and the XML file is "doors_explorerXML.xml".

       

       

      //Tree

      var fileDP:XML = new XML();

      fileDP.ignoreWhite = true;

      fileDP.load("doors_explorerXML.xml");

      fileDP.onLoad = function() {

          fileTree.dataProvider = this.firstChild;

      };

       

       

      Also, I don't need to have an XML file loaded.  If there's an easy way that does it all within Flash, please tell me.  I just need to be able to handle events from the Tree. 

        • 1. Re: Tree Component Icons
          robdillon Most Valuable Participant

          There is a Tree.setIcon() method that will allow you set a custom icon for each node of the tree. Look in the online help for more info.

          • 2. Re: Tree Component Icons
            Archon68 Level 1

            But, is there a way through XML?  For example, after the "isBranch" attribute, could there be an "icon:" one? 

             

            I would do this completely in Flash and AS2, but I can't figure out how to handle events when the user clicks on a tree item in Flash.  I can do it with the XML only.

            • 3. Re: Tree Component Icons
              Archon68 Level 1

              Ok, I got it.  I found out how to control events w/out XML... the same way as before... so now I can just do everything through Flash. 

              • 4. Re: Tree Component Icons
                Pinnennet

                Im having the same issue. I dont know how to change the tree icons separately with the xml. Is there anyone who knows how to do it?

                 

                This is what I got so far. However, i can only get my first branch to show custom icons. I tried ALOT, but i guess I´m doing something completely wrong.

                 


                Here is the code for my tree so far:

                 

                my_xml = new XML();
                my_xml.ignoreWhite = true;
                my_xml.load("tree.xml");

                 

                my_xml.onLoad = function(){
                myTree.dataProvider = this.firstChild;

                 


                var folders = my_xml.firstChild.firstChild;
                var docs = folders.childNodes;

                 

                for (var i=0; i < docs.length; i++){
                currDoc = docs[i];
                trace(docs[i]);

                 

                var docIcon = currDoc.attributes.pic;

                 

                switch(docIcon){
                case "pdf":
                myTree.setIcon(currDoc, "pdfIcon");
                break;
                case "word":
                myTree.setIcon(currDoc, "wordIcon");
                break;
                case "excel":
                myTree.setIcon(currDoc, "excelIcon");
                break;
                case "ie":
                myTree.setIcon(currDoc, "ieIcon");
                break;
                }//switch
                } //for
                };//onLoad

                 


                And here is the XML I used:

                 

                <node label="» Dokument typer">
                <node label="» links - document">
                <node label="test.url" url="http://www." pic="ie" info="test text" />
                <node label="test.doc" url="test.doc" pic="word" info="test text" />
                <node label="test.excel" url="test.xls" pic="excel" info="test text" />
                <node label="test.pdf" url="test.pdf" pic="pdf" info="test text." />
                </node>
                <node label="» Links - document">
                <node label="test URL" url="http://www." pic="ie" info="test text." />
                <node label="test URL" url="http://www." pic="ie" info="test text." />
                </node>
                </node>

                • 5. Re: Tree Component Icons
                  Archon68 Level 1

                  Ok, I'll post my code for you...  I feel stupid after finding the correct answer...

                   

                  //Tree

                  var fileDP:XML = new XML();

                  fileDP.ignoreWhite = true;

                  fileDP.load("doors_explorerXML.xml");

                  //setIcons Function

                  setIcons = function(){

                    fileTree.setIcon(fileTree.getTreeNodeAt(0),"mini_desktop");

                    fileTree.setIcon(fileTree.getTreeNodeAt(1),"mini_documents");

                    fileTree.setIcon(fileTree.getTreeNodeAt(2),"square");

                    fileTree.setIcon(fileTree.getTreeNodeAt(4),"square");

                  }

                   

                  fileDP.onLoad = function() {

                    fileTree.dataProvider = this.firstChild;

                    setIcons();

                  };


                  Hope that helps.  I used the setIcon() method, and I found out you must do it after the XML loads.

                  • 6. Re: Tree Component Icons
                    Pinnennet Level 1

                    Thank you. But im afraid that my issue is a little more complex. I want to be able to tell each and every label in the XML what icon they are supposed to use in the tree. For example: <data label="Testing" icon="square"/>

                     

                    And i guess that it would give us a bigger code inside the Flash.