Flex/Flash/Actionscript

New Flex Component: Convertible TreeList

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.

This movie requires Flash Player 9.

P.S. Thanks to Jeffry Houser for donating the flexlib.net domain!

Related:

  • James Ward already had a little writeup about Mint.com using Flex for some of their spending habit charting stuff, but what's even cooler to me is that they're using a few FlexLib components on the site. I got an email from Jason Putorti, a Flex dev with Mint, letting me…
    Tags: flex, flexlib, component, here's, list
  • Pretty sweet logo, whoever designed that must be pretty much the best person in the world. Get your 360|Flex stuff here. And if you haven't registered for 360Flex, do that here.
    Tags: flex
Standard

4 thoughts on “New Flex Component: Convertible TreeList

  1. Vance says:

    Doug, it doesn’t look like multiple selection of items is supported. Any plans to add that functionality?

  2. zz says:

    Doug, why is the selectedIndex read only? To set the currently selected using selectedItem is a huge pain!

  3. 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

Comments are closed.