Flex Examples » Tree http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Removing the border from the Halo Tree control in Flex 4 http://blog.flexexamples.com/2009/08/28/removing-the-border-from-the-halo-tree-control-in-flex-4/ http://blog.flexexamples.com/2009/08/28/removing-the-border-from-the-halo-tree-control-in-flex-4/#comments Fri, 28 Aug 2009 13:56:12 +0000 Peter deHaan http://blog.flexexamples.com/?p=1759 The following example shows how you can remove or modify the border on the Halo Tree control (with default Spark skin) in Flex 4 by setting the borderSkin style.

Full code after the jump.

<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2009/08/28/removing-the-border-from-the-halo-tree-control-in-flex-4/ --> <s:Application name="Halo_Tree_borderSkin_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo">   <mx:Tree id="tree1" labelField="@label" showRoot="true" borderSkin="{null}" width="160" horizontalCenter="0" verticalCenter="0"> <mx:XMLListCollection [...]]]> The following example shows how you can remove or modify the border on the Halo Tree control (with default Spark skin) in Flex 4 by setting the borderSkin style.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/08/28/removing-the-border-from-the-halo-tree-control-in-flex-4/ -->
<s:Application name="Halo_Tree_borderSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <mx:Tree id="tree1"
            labelField="@label"
            showRoot="true"
            borderSkin="{null}"
            width="160"
            horizontalCenter="0" verticalCenter="0">
        <mx:XMLListCollection id="MailBox">
            <fx:XMLList>
                <folder label="Mail">
                    <folder label="INBOX"/>
                    <folder label="Personal Folder">
                        <Pfolder label="Business" />
                        <Pfolder label="Demo" />
                        <Pfolder label="Personal" isBranch="true" />
                        <Pfolder label="Saved Mail" />
                    </folder>
                    <folder label="Sent" />
                    <folder label="Trash" />
                </folder>
            </fx:XMLList>
        </mx:XMLListCollection>
    </mx:Tree>
 
</s:Application>

View source is enabled in the following example.


Or, you can modify the Halo Tree border skin, as seen in the following example:

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/08/28/removing-the-border-from-the-halo-tree-control-in-flex-4/ -->
<s:Application name="Halo_Tree_borderSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        backgroundColor="red">
 
    <mx:Tree id="tree1"
            labelField="@label"
            showRoot="true"
            borderSkin="skins.CustomBorderSkin"
            width="160"
            horizontalCenter="0" verticalCenter="0">
        <mx:XMLListCollection id="MailBox">
            <fx:XMLList>
                <folder label="Mail">
                    <folder label="INBOX"/>
                    <folder label="Personal Folder">
                        <Pfolder label="Business" />
                        <Pfolder label="Demo" />
                        <Pfolder label="Personal" isBranch="true" />
                        <Pfolder label="Saved Mail" />
                    </folder>
                    <folder label="Sent" />
                    <folder label="Trash" />
                </folder>
            </fx:XMLList>
        </mx:XMLListCollection>
    </mx:Tree>
 
</s:Application>

And the custom border skin, skins/CustomBorderSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/28/removing-the-border-from-the-halo-tree-control-in-flex-4/ -->
<local:SparkSkinForHalo name="CustomBorderSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:local="mx.skins.spark.*"
        implements="mx.core.IRectangularBorder">
 
    <fx:Script>
        <![CDATA[
        import mx.core.EdgeMetrics;
        import mx.core.IUIComponent;
        import mx.graphics.RectangularDropShadow;
 
        /* Define the skin elements that should not be colorized. */
        static private const exclusions:Array = ["background"];
        override public function get colorizeExclusions():Array {
            return exclusions;
        }
 
        /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
        static private const contentFill:Array = ["bgFill"];
        override public function get contentItems():Array {
            return contentFill;
        }
 
        /* Define the border item. */
        static private const borderItem:Array = [];
        override protected function get borderItems():Array {
            return borderItem;
        }
        override protected function get defaultBorderItemColor():uint {
            return 0x696969;
        }
 
        static private const metrics:EdgeMetrics = new EdgeMetrics(1, 1, 1, 1);
 
        private var dropShadow:RectangularDropShadow;
 
        public function get borderMetrics():EdgeMetrics {
            return metrics;
        }
 
        public function get backgroundImageBounds():Rectangle {
            return null;
        }
 
        public function set backgroundImageBounds(value:Rectangle):void {
        }
 
        public function get hasBackgroundImage():Boolean {
            return false;
        }
 
        public function layoutBackgroundImage():void {
        }
 
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            graphics.clear();
 
            super.updateDisplayList(unscaledWidth, unscaledHeight);
 
            if (parent && parent is IUIComponent && !IUIComponent(parent).enabled)
                alpha = 0.5;
            else
                alpha = 1;
 
            // Draw drop shadow, if needed
            if (getStyle("dropShadowEnabled") == false ||
                getStyle("dropShadowEnabled") == "false" ||
                width == 0 ||
                height == 0) {
                return;
            }
 
            // Create a RectangularDropShadow object, set its properties,
            // and draw the shadow
            if (!dropShadow)
                dropShadow = new RectangularDropShadow();
 
            dropShadow.distance = 5;
            dropShadow.angle = 90;
            dropShadow.color = 0;
            dropShadow.alpha = 0.8;
            dropShadow.blurX = 20;
            dropShadow.blurY = 20;
 
            dropShadow.drawShadow(graphics, x, y, width, height);
        }
 
        private function getDropShadowAngle(distance:Number, direction:String):Number {
            if (direction == "left") {
                return distance >= 0 ? 135 : 225;
            } else if (direction == "right") {
                return distance >= 0 ? 45 : 315;
            } else { // direction == "center"
                return distance >= 0 ? 90 : 270;
            }
        }
        ]]>
    </fx:Script>
 
    <s:Group left="0" right="0" top="0" bottom="0">
        <!-- fill -->
        <s:Rect id="background" left="1" right="1" top="1" bottom="1">
            <s:fill>
                <s:SolidColor id="bgFill" color="0xFFFFFF" />
            </s:fill>
        </s:Rect>
    </s:Group>
 
</local:SparkSkinForHalo>

The default Spark skins for the MX/Halo controls/containers can be found in the Flex SDK at:
%Flex SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\*.

You can also set the borderSkin style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/08/28/removing-the-border-from-the-halo-tree-control-in-flex-4/ -->
<s:Application name="Halo_Tree_borderSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|Tree {
            /* borderSkin: ClassReference(null); */
            borderSkin: ClassReference("skins.CustomBorderSkin");
        }
    </fx:Style>
 
    <mx:Tree id="tree1"
            labelField="@label"
            showRoot="true"
            width="160"
            horizontalCenter="0" verticalCenter="0">
        <mx:XMLListCollection id="MailBox">
            <fx:XMLList>
                <folder label="Mail">
                    <folder label="INBOX"/>
                    <folder label="Personal Folder">
                        <Pfolder label="Business" />
                        <Pfolder label="Demo" />
                        <Pfolder label="Personal" isBranch="true" />
                        <Pfolder label="Saved Mail" />
                    </folder>
                    <folder label="Sent" />
                    <folder label="Trash" />
                </folder>
            </fx:XMLList>
        </mx:XMLListCollection>
    </mx:Tree>
 
</s:Application>

Or, you can set the borderSkin style using ActionScript, as seen in the following example:

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/08/28/removing-the-border-from-the-halo-tree-control-in-flex-4/ -->
<s:Application name="Halo_Tree_borderSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Script>
        <![CDATA[
            import skins.CustomBorderSkin;
 
            protected function btn_click(evt:MouseEvent):void {
                tree1.setStyle("borderSkin", CustomBorderSkin);
            }
        ]]>
    </fx:Script>
 
    <s:Button id="btn"
            label="Set Tree border skin"
            click="btn_click(event);"
            left="10" top="10" />
 
    <mx:Tree id="tree1"
            labelField="@label"
            showRoot="true"
            width="160"
            horizontalCenter="0" verticalCenter="0">
        <mx:XMLListCollection id="MailBox">
            <fx:XMLList>
                <folder label="Mail">
                    <folder label="INBOX"/>
                    <folder label="Personal Folder">
                        <Pfolder label="Business" />
                        <Pfolder label="Demo" />
                        <Pfolder label="Personal" isBranch="true" />
                        <Pfolder label="Saved Mail" />
                    </folder>
                    <folder label="Sent" />
                    <folder label="Trash" />
                </folder>
            </fx:XMLList>
        </mx:XMLListCollection>
    </mx:Tree>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/08/28/removing-the-border-from-the-halo-tree-control-in-flex-4/feed/ 3 Opening branches by clicking rows in a Tree control in Flex http://blog.flexexamples.com/2008/04/05/opening-branches-by-clicking-rows-in-a-tree-control-in-flex/ http://blog.flexexamples.com/2008/04/05/opening-branches-by-clicking-rows-in-a-tree-control-in-flex/#comments Sat, 05 Apr 2008 15:59:18 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/05/opening-branches-by-clicking-rows-in-a-tree-control-in-flex/ The following example shows how you can expand/collapse branches in a Flex Tree control by clicking on the row instead of having to click on the disclosure/arrow icon.

<?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 [...]]]> The following example shows how you can expand/collapse branches in a Flex Tree control by clicking on the row instead of having to click on the disclosure/arrow icon.

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

 
]]> http://blog.flexexamples.com/2008/04/05/opening-branches-by-clicking-rows-in-a-tree-control-in-flex/feed/ 29 Creating a simple image gallery with the Flex Tree control http://blog.flexexamples.com/2008/04/04/creating-a-simple-image-gallery-with-the-flex-tree-control/ http://blog.flexexamples.com/2008/04/04/creating-a-simple-image-gallery-with-the-flex-tree-control/#comments Sat, 05 Apr 2008 01:31:52 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/04/creating-a-simple-image-gallery-with-the-flex-tree-control/ The following example shows how you can create a simple image gallery in Flex using a Tree control and a SWFLoader control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/04/04/creating-a-simple-image-gallery-with-the-flex-tree-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.ListEvent; private function tree_itemClick(evt:ListEvent):void { var t:Tree = evt.currentTarget [...]]]> The following example shows how you can create a simple image gallery in Flex using a Tree control and a SWFLoader control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/04/creating-a-simple-image-gallery-with-the-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function tree_itemClick(evt:ListEvent):void {
                var t:Tree = evt.currentTarget as Tree;
                var dataObj:Object = evt.itemRenderer.data;
                if (dataObj.hasOwnProperty("@src")) {
                    swfLoader.source = dataObj.@src;
                } else if (t.dataDescriptor.isBranch(t.selectedItem)) {
                    swfLoader.source = null;
                    panel.status = "";
                }
            }

            private function tree_labelFunc(item:Object):String {
                var suffix:String = "";
                if (tree.dataDescriptor.isBranch(item)) {
                    suffix = " (" + item.children().length() + ")";
                }
                return item.@label + suffix;
            }

            private function swfLoader_complete(evt:Event):void {
                panel.status = (swfLoader.bytesTotal/1024).toFixed(2) + 'KB';
            }
        ]]>
    </mx:Script>

    <mx:XML id="dp" source="data/dp.xml" />

    <mx:HDividedBox width="100%" height="100%">
        <mx:Panel width="200" height="100%">
            <mx:Tree id="tree"
                    dataProvider="{dp}"
                    labelFunction="tree_labelFunc"
                    showRoot="false"
                    width="100%"
                    height="100%"
                    itemClick="tree_itemClick(event);" />
        </mx:Panel>
        <mx:Panel id="panel"
                width="100%"
                height="100%"
                backgroundColor="white">
            <mx:SWFLoader id="swfLoader"
                    scaleContent="true"
                    width="100%"
                    height="100%"
                    complete="swfLoader_complete(event);" />
            <mx:ControlBar>
                <mx:LinkButton label="{swfLoader.source.toString()}" />
            </mx:ControlBar>
        </mx:Panel>
    </mx:HDividedBox>

</mx:Application>

data/dp.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/04/creating-a-simple-image-gallery-with-the-flex-tree-control/ -->
<root>
    <gallery label="RIA">
        <file label="ColdFusion" src="assets/cf_appicon.jpg" />
        <file label="Dreamweaver" src="assets/dw_appicon.jpg" />
        <file label="Flash" src="assets/fl_appicon.jpg" />
        <file label="Flash Player" src="assets/fl_player_appicon.jpg" />
        <file label="Flex" src="assets/fx_appicon.jpg" />
    </gallery>
</root>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/04/creating-a-simple-image-gallery-with-the-flex-tree-control/feed/ 32 Displaying a Tree control as a pop up for a Flex PopUpButton control http://blog.flexexamples.com/2008/02/26/displaying-a-tree-control-as-a-pop-up-for-a-flex-popupbutton-control/ http://blog.flexexamples.com/2008/02/26/displaying-a-tree-control-as-a-pop-up-for-a-flex-popupbutton-control/#comments Tue, 26 Feb 2008 19:24:35 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/26/displaying-a-tree-control-as-a-pop-up-for-a-flex-popupbutton-control/ The following example shows how you can use a Tree control as a PopUpButton control’s pop up in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/02/26/displaying-a-tree-control-as-a-pop-up-for-a-flex-popupbutton-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> Tree { textAlign: left; fontWeight: normal; } </mx:Style> <mx:XML id="mlb" source="mlb.xml" /> <mx:ApplicationControlBar dock="true"> [...]]]> The following example shows how you can use a Tree control as a PopUpButton control’s pop up in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/26/displaying-a-tree-control-as-a-pop-up-for-a-flex-popupbutton-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Tree {
            textAlign: left;
            fontWeight: normal;
        }
    </mx:Style>

    <mx:XML id="mlb" source="mlb.xml" />

    <mx:ApplicationControlBar dock="true">
        <mx:PopUpButton label="Please select a team...">
            <mx:popUp>
                <mx:Tree id="tree"
                        dataProvider="{mlb}"
                        labelField="@label"
                        showRoot="false"
                        width="200"
                        rowCount="8" />
            </mx:popUp>
        </mx:PopUpButton>
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/02/26/displaying-a-tree-control-as-a-pop-up-for-a-flex-popupbutton-control/feed/ 11 Removing leaf icons from the Flex Tree control http://blog.flexexamples.com/2008/01/25/removing-leaf-icons-from-the-flex-tree-control/ http://blog.flexexamples.com/2008/01/25/removing-leaf-icons-from-the-flex-tree-control/#comments Sat, 26 Jan 2008 07:51:21 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/25/removing-leaf-icons-from-the-flex-tree-control/ In a previous example, “Removing folder icons from the Flex Tree control”, we saw how to remove the folder icons from a Tree control in Flex so only the disclosure (arrow) icons were visible. In the following example we look at a similar technique for removing the default leaf icons from the Tree control [...]]]> In a previous example, “Removing folder icons from the Flex Tree control”, we saw how to remove the folder icons from a Tree control in Flex so only the disclosure (arrow) icons were visible. In the following example we look at a similar technique for removing the default leaf icons from the Tree control in Flex.

The short answer, set the defaultLeafIcon style to null using CSS, as shown in the following snippet:

<mx:Style>
    Tree {
        defaultLeafIcon: ClassReference(null);
    }
</mx:Style>

The long answer? Keep reading!

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/25/removing-leaf-icons-from-the-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="dp">
        <mlb>
            <league label="American League">
                <division label="East">
                    <team label="Boston" />
                    <team label="New York" />
                    <team label="Toronto" />
                    <team label="Baltimore" />
                    <team label="Tampa Bay" />
                </division>
                <division label="Central">
                    <team label="Cleveland" />
                    <team label="Detroit" />
                    <team label="Minnesota" />
                    <team label="Chicago" />
                    <team label="Kansas City" />
                </division>
                <division label="West">
                    <team label="Los Angeles" />
                    <team label="Seattle" />
                    <team label="Oakland" />
                    <team label="Texas" />
                </division>
            </league>
        </mlb>
    </mx:XML>

    <mx:Style>
        Tree {
            defaultLeafIcon: ClassReference(null);
        }
    </mx:Style>

    <mx:Tree id="tree"
            dataProvider="{dp.league}"
            labelField="@label"
            iconField="@icon"
            showRoot="true"
            width="320"
            rowCount="9" />

</mx:Application>

View source is enabled in the following example.

If you want to set the defaultLeafIcon style to null in MXML, you could use the following snippet:

<mx:Tree id="tree"
        dataProvider="{dp.league}"
        defaultLeafIcon="{null}"
        labelField="@label"
        iconField="@icon"
        showRoot="true"
        width="320"
        rowCount="9" />

Or, if you want to set the defaultLeafIcon style in ActionScript, you could use the following snippet:

<mx:Tree id="tree"
        dataProvider="{dp.league}"
        labelField="@label"
        iconField="@icon"
        showRoot="true"
        width="320"
        rowCount="9"
        initialize="tree.setStyle('defaultLeafIcon', null);" />
 
]]> http://blog.flexexamples.com/2008/01/25/removing-leaf-icons-from-the-flex-tree-control/feed/ 8 Removing folder icons from the Flex Tree control http://blog.flexexamples.com/2008/01/25/removing-folder-icons-from-the-flex-tree-control/ http://blog.flexexamples.com/2008/01/25/removing-folder-icons-from-the-flex-tree-control/#comments Fri, 25 Jan 2008 08:19:13 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/25/removing-folder-icons-from-the-flex-tree-control/ The following example shows how you can remove the folder icons from the Tree control in Flex so that only the disclosure (arrow) icons and leaf icons are visible.

The short answer, set the folderClosedIcon and folderOpenIcon styles to null using CSS, as shown in the following snippet:

<mx:Style> Tree { folderClosedIcon: ClassReference(null); folderOpenIcon: ClassReference(null); [...]]]> The following example shows how you can remove the folder icons from the Tree control in Flex so that only the disclosure (arrow) icons and leaf icons are visible.

The short answer, set the folderClosedIcon and folderOpenIcon styles to null using CSS, as shown in the following snippet:

<mx:Style>
    Tree {
        folderClosedIcon: ClassReference(null);
        folderOpenIcon: ClassReference(null);
    }
</mx:Style>

The long answer?
Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/25/removing-folder-icons-from-the-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="dp">
        <mlb>
            <league label="American League">
                <division label="East">
                    <team label="Boston" />
                    <team label="New York" />
                    <team label="Toronto" />
                    <team label="Baltimore" />
                    <team label="Tampa Bay" />
                </division>
                <division label="Central">
                    <team label="Cleveland" />
                    <team label="Detroit" />
                    <team label="Minnesota" />
                    <team label="Chicago" />
                    <team label="Kansas City" />
                </division>
                <division label="West">
                    <team label="Los Angeles" />
                    <team label="Seattle" />
                    <team label="Oakland" />
                    <team label="Texas" />
                </division>
            </league>
        </mlb>
    </mx:XML>

    <mx:Style>
        Tree {
            folderClosedIcon: ClassReference(null);
            folderOpenIcon: ClassReference(null);
        }
    </mx:Style>

    <mx:Tree id="TreeProject"
            dataProvider="{dp.league}"
            labelField="@label"
            iconField="@icon"
            showRoot="true"
            width="320"
            rowCount="9" />

</mx:Application>

View source is enabled in the following example.

For an example of removing leaf icons from the Tree control in Flex, see “Removing leaf icons from the Flex Tree control”.

 
]]> http://blog.flexexamples.com/2008/01/25/removing-folder-icons-from-the-flex-tree-control/feed/ 12 Preventing specific items from being selected in a Flex Tree control http://blog.flexexamples.com/2008/01/16/preventing-specific-items-from-being-selected-in-a-flex-tree-control/ http://blog.flexexamples.com/2008/01/16/preventing-specific-items-from-being-selected-in-a-flex-tree-control/#comments Thu, 17 Jan 2008 07:58:43 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/16/preventing-specific-items-from-being-selected-in-a-flex-tree-control/ In a previous example, “Preventing branches from being selected in a Flex Tree control”, we saw how we could prevent users from selecting branches (folders) in a Tree container in Flex by using the itemClick event and the Tree class’s dataDescriptor.isBranch() method.

The following example shows you how you can prevent any item from [...]]]> In a previous example, “Preventing branches from being selected in a Flex Tree control”, we saw how we could prevent users from selecting branches (folders) in a Tree container in Flex by using the itemClick event and the Tree class’s dataDescriptor.isBranch() method.

The following example shows you how you can prevent any item from being selected by adding an attribute (named “clickable”, but you could name it anything you wanted) and using E4X expressions to determine if the currently clicked item should be selectable or not.

Full code after the jump.

Note that in the following example, items with the “(X)” suffix are not-selectable, only the following nodes should be selectable: “Grandchild 1″, “Grandchild 2″, and “Child 4″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/16/preventing-specific-items-from-being-selected-in-a-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

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

            private function init():void {
                tree.openItems = dp..node;
            }

            private function tree_itemClick(evt:ListEvent):void {
                var item:Object = evt.currentTarget.selectedItem;
                var nonSelectable:Boolean = ((item.hasOwnProperty("@clickable")) && (item.(@clickable == "false")));
                if (nonSelectable) {
                    tree.selectedItem = null;
                }
            }
        ]]>
    </mx:Script>

    <mx:XML id="dp">
        <root>
            <node label="Parent 1 (X)" clickable="false">
                <node label="Child 1 (X)" clickable="false" />
                <node label="Child 2 (X)" clickable="false">
                    <node label="Grandchild 1" />
                    <node label="Grandchild 2" />
                </node>
                <node label="Child 3 (X)" clickable="false" />
                <node label="Child 4" />
            </node>
        </root>
    </mx:XML>

    <mx:Tree id="tree"
            dataProvider="{dp}"
            showRoot="false"
            labelField="@label"
            width="200"
            itemClick="tree_itemClick(event);" />

</mx:Application>

View source is enabled in the following example.

For more information on disabling list selection in the List/Tree/ComboBox controls, see Alex Harui’s excellent blog entry, “Disabling List Selection”.

 
]]> http://blog.flexexamples.com/2008/01/16/preventing-specific-items-from-being-selected-in-a-flex-tree-control/feed/ 10 Preventing branches from being selected in a Flex Tree control http://blog.flexexamples.com/2008/01/16/preventing-branches-from-being-selected-in-a-flex-tree-control/ http://blog.flexexamples.com/2008/01/16/preventing-branches-from-being-selected-in-a-flex-tree-control/#comments Thu, 17 Jan 2008 04:48:02 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/16/preventing-branches-from-being-selected-in-a-flex-tree-control/ The following example shows you how you can prevent users from selecting the branch (folder) items in a Tree control in Flex by listening for the itemClick event and using the Tree class’s dataDescriptor.isBranch() method to determine whether the currently selected item is a branch, and if so, deselect the item.

Full code after the [...]]]> The following example shows you how you can prevent users from selecting the branch (folder) items in a Tree control in Flex by listening for the itemClick event and using the Tree class’s dataDescriptor.isBranch() method to determine whether the currently selected item is a branch, and if so, deselect the item.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/16/preventing-branches-from-being-selected-in-a-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function tree_itemClick(evt:ListEvent):void {
                var item:Object = evt.currentTarget.selectedItem
                if (tree.dataDescriptor.isBranch(item)) {
                    tree.selectedItem = null;
                }
            }
        ]]>
    </mx:Script>

    <mx:XML id="dp">
        <root>
            <node label="Parent 1">
                <node label="Child 1" />
                <node label="Child 2">
                    <node label="Grandchild 1" />
                    <node label="Grandchild 2" />
                </node>
                <node label="Child 3" />
                <node label="Child 4" />
            </node>
        </root>
    </mx:XML>

    <mx:Tree id="tree"
            dataProvider="{dp}"
            showRoot="false"
            labelField="@label"
            width="200"
            itemClick="tree_itemClick(event);" />

</mx:Application>

View source is enabled in the following example.

For more information on disabling list selection in the List/Tree/ComboBox controls, see Alex Harui’s excellent blog entry, “Disabling List Selection”.

For another example, see “Preventing specific items from being selected in a Flex Tree control”.

 
]]> http://blog.flexexamples.com/2008/01/16/preventing-branches-from-being-selected-in-a-flex-tree-control/feed/ 4 Expanding nodes in a Flex Tree control using the openItems property http://blog.flexexamples.com/2008/01/15/expanding-nodes-in-a-flex-tree-control-using-the-openitems-property/ http://blog.flexexamples.com/2008/01/15/expanding-nodes-in-a-flex-tree-control-using-the-openitems-property/#comments Wed, 16 Jan 2008 03:34:10 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/15/expanding-nodes-in-a-flex-tree-control-using-the-openitems-property/ The following example shows how you can open nodes in a Tree control in Flex by setting the openItems property to an XMLList or Array object.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/15/expanding-nodes-in-a-flex-tree-control-using-the-openitems-property/ --> <mx:Application name="Tree_openItems_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:Script> <![CDATA[ private function openAllNodes():void { tree.openItems = dp..node; } [...]]]> The following example shows how you can open nodes in a Tree control in Flex by setting the openItems property to an XMLList or Array object.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/15/expanding-nodes-in-a-flex-tree-control-using-the-openitems-property/ -->
<mx:Application name="Tree_openItems_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            private function openAllNodes():void {
                tree.openItems = dp..node;
            }
 
            private function closeAllNodes():void {
                tree.openItems = [];
            }
        ]]>
    </mx:Script>
 
    <mx:XML id="dp">
        <root>
            <node label="Parent 1">
                <node label="Child 1" />
                <node label="Child 2">
                    <node label="Grandchild 1" />
                    <node label="Grandchild 2" />
                </node>
                <node label="Child 3" />
                <node label="Child 4" />
            </node>
        </root>
    </mx:XML>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Open all nodes" click="openAllNodes();" />
        <mx:Button label="Close all nodes" click="closeAllNodes();" />
    </mx:ApplicationControlBar>
 
    <mx:Tree id="tree"
            dataProvider="{dp}"
            showRoot="false"
            labelField="@label"
            width="200" />
 
</mx:Application>

View source is enabled in the following example.

You can tweak the previous E4X statement by only returning nodes that have children: dp..node.(children().length() > 0);.

The following example uses a bit more of a complex E4X statement to find data provider XML nodes with a specific attribute, “isOpen”, and only opens those nodes.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/15/expanding-nodes-in-a-flex-tree-control-using-the-openitems-property/ -->
<mx:Application name="Tree_openItems_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            private function openSomeNodes():void {
                var xList:XMLList = dp..node.(hasOwnProperty("@isOpen") && @isOpen == "true");
                tree.openItems = xList;
            }
 
            private function closeAllNodes():void {
                tree.openItems = [];
            }
        ]]>
    </mx:Script>
 
    <mx:XML id="dp">
        <root>
            <node label="Parent 1" isOpen="true">
                <node label="Child 1" />
                <node label="Child 2">
                    <node label="Grandchild 1" />
                    <node label="Grandchild 2" />
                </node>
                <node label="Child 3" />
                <node label="Child 4" isOpen="true">
                    <node label="Grandchild 3">
                        <node label="Great-grandchild 1" />
                        <node label="Great-grandchild 2" />
                        <node label="Great-grandchild 3" />
                        <node label="Great-grandchild 4">
                            <node label="Great-great-grandchild 1" />
                        </node>
                        <node label="Grandchild 1" />
                    </node>
                    <node label="Grandchild 4" />
                </node>
                <node label="Child 5" />
            </node>
        </root>
    </mx:XML>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Open some nodes" click="openSomeNodes();" />
        <mx:Button label="Close all nodes" click="closeAllNodes();" />
    </mx:ApplicationControlBar>
 
    <mx:Tree id="tree"
            dataProvider="{dp}"
            showRoot="false"
            labelField="@label"
            width="300" />
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/15/expanding-nodes-in-a-flex-tree-control-using-the-openitems-property/feed/ 15 Toggling item roll over highlighting in the Flex Tree control http://blog.flexexamples.com/2008/01/11/toggling-item-roll-over-highlighting-in-the-flex-tree-control/ http://blog.flexexamples.com/2008/01/11/toggling-item-roll-over-highlighting-in-the-flex-tree-control/#comments Fri, 11 Jan 2008 09:31:53 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/11/toggling-item-roll-over-highlighting-in-the-flex-tree-control/ The following example shows how you can toggle item roll over highlighting in the Tree control in Flex by setting the useRollOver style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/11/toggling-item-roll-over-highlighting-in-the-flex-tree-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:XML id="treeDP"> <root> <node label="i) One" /> <node label="i) Two" /> [...]]]> The following example shows how you can toggle item roll over highlighting in the Tree control in Flex by setting the useRollOver style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/11/toggling-item-roll-over-highlighting-in-the-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <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="i) Five" />
            <node label="i) Six" />
        </root>
    </mx:XML>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="useRollOver:"
                labelPlacement="left"
                selected="true" />
    </mx:ApplicationControlBar>

    <mx:Tree id="tree"
            dataProvider="{treeDP}"
            labelField="@label"
            showRoot="false"
            useRollOver="{checkBox.selected}"
            width="200" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/11/toggling-item-roll-over-highlighting-in-the-flex-tree-control/feed/ 1