[flexcoders] Re: How to create dynamically Icon for a Tree

[bodie0293]

This may not be the most efficient method, but this is how I
populate a dynamic tree and assign icons.

Preliminaries:

The Tree has 3 levels: User, Project, and Hours.  The tree
entries are represented as ActionScript classes (not shown).
These classes have a superclass of BaseTreeEntry that contains
two fields: label, and children.  Each tree level has a different
icon.  Icons are embedded.

In a real application the data model would have been obtained
from the server.  I have represented these here as 3 <mx:Model>
components for simplicity.

Here is the example.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
     layout="absolute"
     creationComplete="init()" >

     <mx:Script>
         <![CDATA[
             import tree.BaseTreeEntry;
             import tree.UserTreeEntry;
             import tree.ProjectTreeEntry;
             import tree.HoursTreeEntry;

             import mx.collections.ArrayCollection;

             [Bindable]
             public var selectedNode : BaseTreeEntry;

             [Bindable]
             [Embed(source="/images/person.jpg")]
             public var iconPerson:Class;
             [Bindable]
             [Embed(source="/images/project.jpg")]
             public var iconProject:Class;
             [Bindable]
             [Embed(source="/images/hours.jpg")]
             public var iconHours:Class;

             [Bindable]
             public var treeNodes : ArrayCollection = new
ArrayCollection();

             // Event handler for the Tree control change event.
             public function treeChanged(event:Event):void {
                 selectedNode=Tree(event.target).selectedItem as
BaseTreeEntry;
             }

             public function init() : void {
                 for (var i : int = 0; i < userDataModel.User.length;
i++) {
                     var userVO : Object = userDataModel.User[i];
                     var userTreeEntry : UserTreeEntry = new
UserTreeEntry();
                     userTreeEntry.label = userVO.LastName + ", " +
userVO.FirstName;
                     userTreeID.setItemIcon(userTreeEntry, iconPerson,
null);
                     treeNodes.addItem(userTreeEntry);
                     for (var j : int = 0; j <
projectDataModel.Project.length; j++) {
                         var projectVO : Object =
projectDataModel.Project[j];
                         var projectTreeEntry : ProjectTreeEntry = new
ProjectTreeEntry();
                         projectTreeEntry.label = projectVO.Name;
                         userTreeID.setItemIcon(projectTreeEntry,
iconProject, null);
                        
userTreeEntry.children.addItem(projectTreeEntry);
                         for (var k : int = 0; k <
hoursDataModel.Hours.length; k++) {
                             var hoursVO : Object =
hoursDataModel.Hours[k];
                             if (hoursVO.UserID == userVO.UserID &&
                                 hoursVO.ProjectID ==
projectVO.ProjectID) {
                                 var hoursTreeEntry : HoursTreeEntry =
new HoursTreeEntry();
                                 hoursTreeEntry.label = "Week: " +
hoursVO.WeekID;
                                 userTreeID.setItemIcon(hoursTreeEntry,
iconHours, null);
                                
projectTreeEntry.children.addItem(hoursTreeEntry);
                             }
                         }
                     }
                 }
             }

         ]]>
     </mx:Script>

     <mx:Model id="userDataModel" >
         <root>
           <User>
             <UserID>1</UserID>
             <UserName>caradmin</UserName>
             <LastName>Vanderlay</LastName>
             <FirstName>Art</FirstName>
             <MiddleInit>J</MiddleInit>
             <Title>CAR Administrator</Title>
             <HireDate>10/12/2004</HireDate>
             <TermDate></TermDate>
           </User>
           <User>
             <UserID>2</UserID>
             <UserName>joe</UserName>
             <LastName>Estudiente</LastName>
             <FirstName>Joe</FirstName>
             <MiddleInit>L</MiddleInit>
             <Title>CAR User</Title>
             <HireDate>01/13/1992</HireDate>
             <TermDate>04/20/2007</TermDate>
           </User>
         </root>
     </mx:Model>

     <mx:Model id="projectDataModel" >
         <root>
           <Project>
             <ProjectID>1001</ProjectID>
             <Name>Project Number 1</Name>
             <Description>Desc. for Project 1</Description>
           </Project>
           <Project>
             <ProjectID>1002</ProjectID>
             <Name>Project Number 2</Name>
             <Description>Desc. for Project 2</Description>
           </Project>
         </root>
     </mx:Model>

     <mx:Model id="hoursDataModel" >
         <root>
             <Hours>
                
<ProjectPersonWeekHoursID>5001</ProjectPersonWeekHoursID>
                 <ProjectID>1001</ProjectID>
                 <UserID>1</UserID>
                 <WeekID>87</WeekID>
                 <Description>blah blah</Description>
                 <Mon>8</Mon>
                 <Tue>8</Tue>
                 <Wed>8</Wed>
                 <Thu>8</Thu>
                 <Fri>8</Fri>
                 <Sat>0</Sat>
                 <Sun>0</Sun>
             </Hours>
             <Hours>
                
<ProjectPersonWeekHoursID>5002</ProjectPersonWeekHoursID>
                 <ProjectID>1002</ProjectID>
                 <UserID>1</UserID>
                 <WeekID>88</WeekID>
                 <Mon>8</Mon>
                 <Tue>8</Tue>
                 <Wed>8</Wed>
                 <Thu>8</Thu>
                 <Fri>8</Fri>
                 <Sat>0</Sat>
                 <Sun>0</Sun>
             </Hours>
         </root>
     </mx:Model>

     <mx:HDividedBox width="100%" height="100%">

         <mx:Tree id="userTreeID"
             dataProvider="{treeNodes}"
             width="30%" height="100%"
             change="treeChanged(event)"
             >
         </mx:Tree>

         <mx:TextArea height="100%" width="70%"
             text="Selected Item: {selectedNode.label}"/>
     </mx:HDividedBox>

</mx:Application>

Paul Ranauro
[EMAIL PROTECTED]