Tree Lines

In Flex I've seen how you can configure Trees by changing the disclosure (expand/collapse) icon, the folder/leaf icons, background colors, indentation, etc. But I've never seen the option for rendering tree lines like you can in Java, C# and most other languages.

I've created a custom TreeItemRenderer that does renderer tree lines. It has these properties:

<ui:TreeItemLinesRenderer
Styles
lineAlpha="1"
lineColor="#808080"
lineThickness="1"
lineStyle="dotted"/>

And here is an example of it in action (right click to view source):


If you know of any other solutions out there I'd be interested to see them.

** September 28th 2009 Updated **
I've added another example application showing how to render tree lines in an AdvancedDataGrid control.

Flex Example Application

AdvancedDataGrid API

AdvancedDataGridGroupItemRenderer API

Flex 4/Spark Version
Here is a very similar version written in Flex 4. It uses a lot of the same code, but uses a Spark item renderer instead. There is probably a much nicer way to do this using the new Spark Path or Line controls, but since the code was already written I went with this solution.

An example of tree lines in an AdvancedDataGrid with a Flex 4 itemRenderer is on my newer blog post.

AdvancED Flex 3 Book

Does anyone own this book? It covers some good material but the code samples in it are terrible! I've never seen so many typos and so much code that does not even compile.

Here's my favorite code example from the book, see if you can count how many different compile errors and warnings you get from this snippet (page 172 of the book, copyright 2008, ...):

private var myVariable:String; public get myVariable():void {     return myVariable; } [Bindable] public set myVariable(value:String) {     myVariable = value; }

It seems like after almost every page I read in it I have to type the code into Flex Builder to verify that in fact no, you can't do it that way because it doesn't even compile.

Anyways, hopefully not too many people buy this book... Or maybe by the next edition they will have fixed up the many errors.

Another Flex/ActionScript book that I bought and think quite highly of is this one:

Number and NaN

What is the output of the following code?

var n1:Number = null; var n2:Number; trace(n1); trace(n2);

I have Java background, so the whole NaN concept still confuses me sometimes. I would have expected that assigning null to a Number would be the same as not assigning anything to the Number. But no! When you assign n1 to null, it actually is the same as assigning it the value 0! Although the Flex compiler will actually give you a warning if you try this. If you leave a Number unassigned like n2, then it has the value NaN. Or if you try to cast a String or Object into a Number and it fails then the Number will also be NaN.

And one last note - don't set the horizontalGap or verticalGap (or any other style used by layouts) to NaN otherwise the BoxLayout will not work at all. Took me a while to figure out why my VBox wasn't laying out all the components properly!

Tree Icon Spinner (not using animated gif)

I've been disappointed that Flex doesn't natively support animated gifs. I especially wanted to use them inside Flex Trees when I'm loading the children dynamically. So instead of trying to get animated gifs to work (see this example if you are interested) I created a relatively simple Spinner class that draws a circular spinner using just Flex Graphics. The spinner is animated using a Timer. If you set the startImmediately property to true then the animation starts when the spinner component is added to a parent component. And it is always stopped when it gets removed from its parent.
There are also the start(), stop() and running functions to control the spinner manually.

The spinners have a few styles that you can set to customize the appearance:

<ui:Spinner
  Properties
delay="100"
startImmediately="false"
Styles
backgroundAlpha="1"
backgroundColor="NaN"
spinnerColor="#829AD1"
spinnerHighlightColor="#001A8E"
spinnerThickness="3"
spinnerLineThickness="2"
spinnerType="gradientcircle"/>

I've created an example of the four types of spinners in four Trees. Each tree node loads its children after a 2 second delay during which time the spinner is shown, so try expanding each tree (right click to view source):


Let me know if you like them!

Also, make sure you do call stop() on the spinner when you don't need it anymore... otherwise you might notice your Flex app starts to run very slowly like mine did...

** September 28th 2009 Updated **
I've added another example application showing how to show the spinner inside an AdvancedDataGrid control.

Flex Example Application

AdvancedDataGrid API

AdvancedDataGridGroupItemRenderer API

Titled Border Box and Titled Border Panel

** There is a Flex 4/Spark version of this control which can be found here.

I've written two new components called TitledBorderBox and TitledBorderWindow that both render a solid border around the component with a title textfield at the top. They are similar to TitledBorder in Java, and the <Fieldset> tag in HTML.

Skip straight to the examples - here are three TitledBorderBox components that illustrate the three layouts (vertical, horizontal, and absolute) and various title styles (right-click to View Source):


And here is an example of the TitledBorderWindow that illustrate how the border and background changes with the various properties (right-click to View Source):


Here are the properties and styles:

<ui:TitledBorderBox
  Properties
layout="vertical|horizontal|absolute"
title=""
borderDropShadow="false"
Styles
backgroundAlpha="0"
backgroundColor="0xffffff"
borderAlpha="1"
borderColor="#000000"
borderThickness="1"
cornerRadius="0"
horizontalGap="8"
paddingLeft="5"
paddingTop="5"
paddingRight="5"
paddingTop="5"
verticalGap="6"
titleStyleName="windowStyles"/>

<ui:TitledBorderWindow
  Properties
layout="vertical|horizontal|absolute"
title=""
borderDropShadow="false"
Styles
backgroundAlpha="0"
backgroundColor="0xffffff"
borderColor="#000000"
borderThickness="1"
borderAlpha="1"
cornerRadius="0"/>

Set the cornerRadius style to have rounded corners. The TitledBorderWindow also supports the roundedBottomCorners boolean style too if you only want rounded corners at the top. And both components can have an optional drop shadow filter as well.

The TitledBorderWindow extends TitleWindow (which extends Panel) so it has all the same properties and styles. The styles that have changed from the Panel/TitleWindow defaults are listed above. I've also added support for adding custom buttons to the titleBar (next to the closeButton).

Update (April 14th 2009): The TitledBorderWindow class wasn't properly laying out the ControlBar like the Panel class does, so I've added a fix for it.

Update (March 17th 2010): scrollbars weren't correctly on the TitleBorderBox class when you use either the horizontal or vertical layout (and you restrict the size of the box). I've fixed up the borderMetrics function to property return the size of the border and now the scrollbars work properly. I also noticed that the background color didn't work if you set the layout to absolute, and that is fixed too.

Update (June 1st, 2010): I've made a Flex 4/Spark version which can be found here.