Here’s a Flex component I made a few weeks ago and never got around to blogging about. It’s included in the FlexLib 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. 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.
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 property of the control to determine how it displays.
So what?
It 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 property of the control.
Take a look at the documentation on FlexLib. Here’s a direct link to the source code of this component in FLexLib. The best way to get it though, is to check out FlexLib from the SVN repository.
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.S. Thanks to Jeffry Houser for donating the flexlib.net domain!
Doug, it doesn’t look like multiple selection of items is supported. Any plans to add that functionality?
Never mind, I figured out how to do that.
Doug, why is the selectedIndex read only? To set the currently selected using selectedItem is a huge pain!
hey,
I like that component, but I miss one mode: tree without icons. In my case I just don’t need them. And I might have done something wrong, but I think the horizontal scroll policy behaves weird when set to “on” and there are elements overlapping in both directions. It showed me two vertical scrollbars and the horizontal one would not fully scroll to the right.
greetz,
tox