Flex Tree Control Tutorial

Thursday, November 18, 2004 My foray into the Macromedia Flex Tree control

I live by the quote "Never memorize something that you can look up." -Albert Einstein. If there is a location where I can quickly look for information, why bother memorizing it. With the internet, our web browsers give us this wonderful took called a bookmark, to get us quickly and easily back to where we were.

I have three desktop computers at home and a laptop, then at work I use my desktop there, or sit at a co-worker's computer when helping them. I never seem to have the bookmarks I need at the right computer when I need it, so I wanted to store them all in a central location, but make it easy to add new bookmarks as well. A perfect case for a dynamic web site.

There are web sites that do it for you, but I want full control over my list and I want the learning experience of creating it myself. I'm learning Flex for work, so I took my idea and tried to create it in Flex.

Each code example has been tested as is and works. If you find an error, please let me know.

Step 1: Design

A simple list of bookmarks, ordered by category fits a tree type structure, which each branch being a category and each leaf a site link.

Step 2: Framework

Start a basic MXML file with a tree, text input fields for link entry and a button to submit it.

links.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
   <mx:Panel height="100%" title="My Links" fontSize="18">
      <mx:Tree id="treLinks" fontSize="10">
      </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 3: Sample Data

The Tree sample that comes with Flex, and the example in Developing Rich Clients with Macromedia Flex¹ use inline XML for the data provider so I started there.

links.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
   <mx:Panel height="100%" title="My Links" fontSize="18">
      <mx:Tree id="treLinks" fontSize="10">
         <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>

While it works, I didn't like how the leaf icon looked. Nothing indicated what it was or what it did, so I grabbed the Firefox (my browser of choice) favicon image and embedded it as the leaf image.

<mx:Tree id="treLinks" fontSize="10" defaultLeafIcon="@Embed('leaf.png')">

References:

1: Developing Rich Clients with Macromedia Flex by Steven Webster, Alistair McLeod