Thursday, November 18, 2004 My foray into the Macromedia Flex Tree control (cont.)

Step 4: Basic Functionality

Now that everything looks the way I want it to, I need to make it work. A simple getURL() call on the change event for the tree node is all that is really required. To make sure it doesn't run on the branches, just the leaves, check if the nodeURL variable is undefined.

links.mxml 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
   <mx:Script>
      <![CDATA[
         function loadPage(event):Void {
            if( event.target.selectedNode.attributes.nodeURL != undefined ) {
               getURL(event.target.selectedNode.attributes.nodeURL);
            }
         }
      ]]>
   </mx:Script>
   <mx:Panel height="100%" title="My Links" fontSize="18">
      <mx:Tree id="treLinks" change="loadPage(event);" fontSize="10" defaultLeafIcon="@Embed('leaf.png')">
         <mx:dataProvider>
            <mx:XML>
               <node label="Kids">
                  <node label="Disney Kids" nodeURL="http://www.disneykids.com"/>
               </node>
               <node label="Programming">
                  <node label="Planet Source Code" nodeURL="http://www.planetsourcecode.com" />
               </node>
            </mx:XML>
         </mx:dataProvider>
      </mx:Tree>
      <mx:ControlBar>
         <mx:VBox horizontalAlign="right" fontSize="10">
            <mx:FormItem label="URL">
               <mx:TextInput width="250" id="txtURL"/>
            </mx:FormItem>
            <mx:FormItem label="Description" required="false">
               <mx:TextInput width="250" id="txtDescription"/>
            </mx:FormItem>
            <mx:FormItem label="Category">
               <mx:ComboBox width="200" id="cboCategory"/>
            </mx:FormItem>
            <mx:Button label="Add Link"/>
         </mx:VBox>
      </mx:ControlBar>
   </mx:Panel>
</mx:Application>

Step 5: Externalize

I always like to take out of a file things that don't have to be there. Modularizing or externalizing helps me isolate pieces and concentrate my focus on one thing at a time. So I created the XML data as a separate file then linked it in as an mx:Model. Externalizing the XML data changes it from mx:XML to mx:Model so I had to change my function to use getProperty() instead of attributes. (Thanks to Matt Chotin for pointing out why this happens) Instead of running the function twice I decided to store the results in a local variable as well. Then once that was working, I took the Script block out and put it in a separate ActionScript file.

linkdata.xml 
<?xml version="1.0" encoding="utf-8"?>
<links>
   <node label="Kids">
      <node label="Disney Kids" nodeURL="http://www.disneykids.com"/>
   </node>
   <node label="Programming">
      <node label="Planet Source Code" nodeURL="http://www.planetsourcecode.com" />
   </node>
</links>
linkfunc.as 
function loadPage(event):Void {
   var linkURL:String = event.target.selectedNode.getProperty("nodeURL");
   if( linkURL != undefined) {
      getURL(linkURL);
   }
}
links.mxml 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
   <mx:Script source="linkfunc.as"/>
   <mx:Model id="modLinks" source="linkdata.xml"/>
   <mx:Panel height="100%" title="My Links" fontSize="18">
      <mx:Tree id="treLinks" change="loadPage(event);" fontSize="10" defaultLeafIcon="@Embed('leaf.png')">
         <mx:dataProvider>
            {modLinks}
         </mx:dataProvider>
      </mx:Tree>
      <mx:ControlBar>
         <mx:VBox horizontalAlign="right" fontSize="10">
            <mx:FormItem label="URL">
               <mx:TextInput width="250" id="txtURL"/>
            </mx:FormItem>
            <mx:FormItem label="Description" required="false">
               <mx:TextInput width="250" id="txtDescription"/>
            </mx:FormItem>
            <mx:FormItem label="Category">
               <mx:ComboBox width="200" id="cboCategory"/>
            </mx:FormItem>
            <mx:Button label="Add Link"/>
         </mx:VBox>
      </mx:ControlBar>
   </mx:Panel>
</mx:Application>

Previous | Next