{"id":42,"date":"2007-03-05T06:23:29","date_gmt":"2007-03-05T14:23:29","guid":{"rendered":"http:\/\/dougmccune.com\/blog\/2007\/03\/05\/new-flex-component-convertible-treelist\/"},"modified":"2007-03-05T22:26:01","modified_gmt":"2007-03-06T06:26:01","slug":"new-flex-component-convertible-treelist","status":"publish","type":"post","link":"https:\/\/dougmccune.com\/blog\/2007\/03\/05\/new-flex-component-convertible-treelist\/","title":{"rendered":"New Flex Component: Convertible TreeList"},"content":{"rendered":"

Here’s a Flex component I made a few weeks ago and never got around to blogging about. It’s included in the FlexLib<\/a> library. This is a component that combines the List and Tree controls that are included in the framework. This was inspired by the left nav menu of the new Flex Style Explorer<\/a>. That app has a navigation menu that can be displayed either as a Tree control, if there is enough space, or a list of icons if we need to conserve space. I figured that was a great way to display the same data two ways. <\/p>\n

So you can have one component, set the dataprovider once, and you can switch it between showing the data as a Tree, text-only List, icon-only List, or a text and icon List. You can set the mode<\/strong> property of the control to determine how it displays. <\/p>\n

So what?<\/strong>
\nIt came to my attention today that the reason for this component isn’t as obvious as I thought. So I’ll try to explain. This component is for the situation where you have a list of items in a Tree, but you might want that Tree to take up much less horizontal space, so you want those items to be displayed as a straight List of text or icons instead. Normally what you would do is have two controls, a List control and a Tree control, set the dataproviders separately (since a List can’t take heirarchical data) and swap one out for the other if you wanted to change them. This component makes it so you don’t have to do any of that swapping yourself, it’s done for you, and all you have to do is set the mode<\/strong> property of the control. <\/p>\n

Take a look at the documentation on FlexLib<\/a>. Here’s a direct link to the source code<\/a> of this component in FLexLib. The best way to get it though, is to check out FlexLib from the SVN repository. <\/p>\n

Here’s the example. The top component shows how you can dynamically set the mode. There are four options, Tree, text List, icon List, and full List. The bottom examples shows a more real-world example where you would want to change the mode depending on how much space you have available.<\/p>\n

This movie requires Flash Player 9.<\/div>\n