<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/05/opening-branches-by-clicking-rows-in-a-tree-control-in-flex/ -->
<mx:Application name="Tree_itemClick_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.collections.ICollectionView;
            import mx.events.ListEvent;
 
            private function tree_itemClick(evt:ListEvent):void {
                var item:Object = Tree(evt.currentTarget).selectedItem;
                if (tree.dataDescriptor.isBranch(item)) {
                    tree.expandItem(item, !tree.isItemOpen(item), true);
                }
            }
 
            private function tree_labelFunc(item:XML):String {
                var children:ICollectionView;
                var suffix:String = "";
                if (tree.dataDescriptor.isBranch(item)) {
                    children = tree.dataDescriptor.getChildren(item);
                    suffix = " (" + children.length + ")";
                }
                return item[tree.labelField] + suffix;
            }
        ]]>
    </mx:Script>
 
    <mx:XML id="dp">
        <root>
            <folder label="One">
                <folder label="One.A">
                    <item label="One.A.1" />
                    <item label="One.A.2" />
                    <item label="One.A.3" />
                    <item label="One.A.4" />
                    <item label="One.A.5" />
                </folder>
                <item label="One.1" />
                <item label="One.2" />
            </folder>
            <folder label="Two">
                <item label="Two.1" />
                <folder label="Two.A">
                    <item label="Two.A.1" />
                    <item label="Two.A.2" />
                </folder>
            </folder>
        </root>
    </mx:XML>
 
    <mx:Tree id="tree"
            dataProvider="{dp}"
            showRoot="false"
            labelField="@label"
            labelFunction="tree_labelFunc"
            width="300"
            rowCount="6"
            itemClick="tree_itemClick(event);" />
 
</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/11/displaying-the-number-of-children-in-each-branch-of-a-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function tree_labelFunc(item:XML):String {
                var label:String = item.@label;
                if (tree.dataDescriptor.hasChildren(item)) {
                    label += " (" + tree.dataDescriptor.getChildren(item).length + ")";
                }
                return label;
            }
        ]]>
    </mx:Script>

    <mx:XML id="treeDP">
        <root>
            <node label="i) One" />
            <node label="i) Two" />
            <node label="i) Three" />
            <node label="i) Four">
                <node label="ii) One" />
                <node label="ii) Two" />
                <node label="ii) Three">
                    <node label="iii) One" />
                    <node label="iii) Two" />
                </node>
                <node label="ii) Four" />
            </node>
            <node label="1. Five" />
            <node label="1. Six" />
        </root>
    </mx:XML>

    <mx:Tree id="tree"
            dataProvider="{treeDP}"
            labelFunction="tree_labelFunc"
            showRoot="false"
            width="200" />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/13/changing-text-alignment-in-an-flex-accordion-header/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Style>
        .MyHeaderStyle {
            color: haloBlue;
            fontWeight: bold;
            textAlign: left;
            textRollOverColor: haloOrange;
            textSelectedColor: black;
            icon: Embed(source="assets/asterisk_orange.png");
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.IndexChangedEvent;
            import mx.events.ListEvent;

            private function init():void {
                comboBox.dataProvider = accordion.getChildren()
            }

            private function comboBox_change(evt:ListEvent):void {
                accordion.selectedIndex = comboBox.selectedIndex;
            }

            private function accordion_change(evt:IndexChangedEvent):void {
                comboBox.selectedIndex = accordion.selectedIndex;
            }

            private function changeTextAlign(evt:ListEvent):void {
                var cssDecl:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".MyHeaderStyle");
                cssDecl.setStyle("textAlign", evt.currentTarget.selectedItem);
                StyleManager.setStyleDeclaration(".MyHeaderStyle", cssDecl, false);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="Selected child:" />
        <mx:ComboBox id="comboBox"
                change="comboBox_change(event);">
        </mx:ComboBox>

        <mx:Spacer width="50" />

        <mx:Label text="textAlign:" />
        <mx:ComboBox change="changeTextAlign(event)">
            <mx:dataProvider>
                <mx:String>left</mx:String>
                <mx:String>center</mx:String>
                <mx:String>right</mx:String>
            </mx:dataProvider>
        </mx:ComboBox>
    </mx:ApplicationControlBar>

    <mx:Accordion id="accordion"
            headerStyleName="MyHeaderStyle"
            themeColor="haloSilver"
            width="100%"
            height="100%"
            change="accordion_change(event);">
        <mx:VBox label="One" />
        <mx:VBox label="Two" />
        <mx:VBox label="Three" />
        <mx:VBox label="Four" />
        <mx:VBox label="Five" />
    </mx:Accordion>

</mx:Application>

View source is enabled in the following example.