Controlling a Tree control’s item indentation in Flex

The following example shows how you can control the amount of indentation for a child node in a Flex Tree control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/27/controlling-a-tree-controls-item-indentation-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XMLListCollection id="xmlListColl">
        <mx:source>
            <mx:XMLList>
                <node label="One">
                    <node label="One.1">
                        <node label="One.1.1">
                            <node label="One.1.1.1">
                                <node label="One.1.1.1.1" />
                            </node>
                        </node>
                    </node>
                    <node label="One.2" />
                    <node label="One.3" />
                </node>
                <node label="Two">
                    <node label="Two.1" />
                    <node label="Two.2" />
                    <node label="Two.3" />
                </node>
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="indentation:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="30"
                        value="17"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1"
                        labels="[0,30]" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Tree id="tree"
            dataProvider="{xmlListColl}"
            labelField="@label"
            width="300"
            rowCount="6"
            indentation="{slider.value}" />

</mx:Application>

View source is enabled in the following example.

5 thoughts on “Controlling a Tree control’s item indentation in Flex

  1. Wow Peter, you’ve got me hooked on to Flex. Could you suggest any good book for an absolute beginner? Your blog is certainly good but it seems to be for code-savvy people. I love the way you explain almost every piece of code.

  2. Thanks a lot Peter. Could you recommend a good book about Flex? I’m a complete code newbie so that’d be really helpful as I’m looking to learn Flex.
    Is there any language that forms a base for Flex?

  3. Business Minded,

    A few of the books I own that I really like are (in no particular order):
    » Programming Flex 2 by Chafic Kazoun and Joey Lott
    » Adobe Flex 3: Training from the Source by Jeff Tapper, Michael Labriola, Matthew Boles, and James Talbot
    » Professional Adobe Flex 2 by Rich Tretola, Simon Barber, and Renaun Erickson

    A couple other good ActionScript 3.0 specific books are:
    » Essential ActionScript 3.0 by Colin Moock
    » ActionScript 3.0 Cookbook by Joey Lott, Darron Schall, and Keith Peters

    And of course, the official Adobe Flex 3 documentation is excellent (and free):
    » Adobe Flex 3 Help
    » Adobe Flex 3 Language Reference

    Peter

Comments are closed.