Add the SWC to Your Project

With a few simple steps, you'll be ready to get started with TreeMap in Flex Builder.

1. Open the Project menu and choose Properties.
2. Select Flex Build Path.
3. Select Library path.
4. Click Add SWC... and locate flextreemap.swc on your hard drive.

The TreeMap component is now available to your project.

Create your first TreeMap in MXML

With a trivial amount of MXML, you can create a TreeMap and populate it with XML data.

First, we need to add the proper namespace to our MXML file so that we can access the TreeMap class from the SWC. TreeMap and other open source Flex components by Josh Tynjala use the flextoolbox.com domain in the MXML namespace and ActionScript packages.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:toolbox="http://www.flextoolbox.com/2006/mxml"
	layout="absolute">

</mx:Application>

By design, TreeMap works a lot like the standard Flex Tree component. TreeMap supports the same data formats, such as XML, and both a Tree and a TreeMap can share a common data provider. Before we create our first TreeMap in the application, let's define some XML data that we can display in the component.

The official Flex Quick Starts from Adobe offer a good starting point. Let's use the following data provider similar to the one defined in the Working with Tree controls quick start:

<mx:XMLListCollection id="MailBox">
	<mx:XMLList>
		<node label="Mail">
			<node label="Inbox" data="40">
				<node label="Clients" data="31"/>
				<node label="Personal Folder">
					<node label="Open Source Projects" data="18"/>	
					<node label="Fan Mail" data="8" />
				</node>
				
				<node label="Mailing Lists">
					<node label="flexcoders" data="30"/>
					<node label="flexcomponents" data="20"/>
				</node>
				<node label="Unsorted" data="50"/>
			</node>
	
			<node label="Sent" data="35"/>
			<node label="Trash" data="23"/>
		</node>
	</mx:XMLList>
</mx:XMLListCollection>

We have an XMLListCollection that contains an XMLList with nodes nested over multiple levels. The @data attribute in each node is especially useful for a TreeMap component because it can be used as the "weight" value for the TreeMap's items. Just like Tree, we can use the @label attribute to display some text for each item.

Now we have a data provider, so let's create our first TreeMap.

<toolbox:TreeMap top="10" horizontalCenter="0" width="400" height="300"
	dataProvider="{MailBox}" labelField="@label" weightField="@data"/>

Notice that TreeMap uses the labelField property to display some text in each item renderer. Setting the weightField property allows the TreeMap to calculate the dimensions of the item renderers from the data provider, and we immediately see the power of this visualization.

For more information about the properties, methods, events, and styles offered by TreeMap, please read the TreeMap API Documentation and check out the other included examples (full source code is in the downloadable ZIP file!). If you have questions or need any additional help of any sort, please send a message to the flextreemap group.