Flex Examples » dataDescriptor http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 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 Determining if a check box menu item is toggled in a Flex PopUpButton control’s pop up menu http://blog.flexexamples.com/2008/02/11/determining-if-a-check-box-menu-item-is-toggled-in-a-flex-popupbutton-controls-pop-up-menu/ http://blog.flexexamples.com/2008/02/11/determining-if-a-check-box-menu-item-is-toggled-in-a-flex-popupbutton-controls-pop-up-menu/#comments Tue, 12 Feb 2008 06:29:40 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/11/determining-if-a-check-box-menu-item-is-toggled-in-a-flex-popupbutton-controls-pop-up-menu/ The following example shows you how you can determine if a check box menu item in a Flex PopUpButton control was checked or not by using the change event on the pop up menu along with the dataDescriptor property and isToggled() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> [...]]]> The following example shows you how you can determine if a check box menu item in a Flex PopUpButton control was checked or not by using the change event on the pop up menu along with the dataDescriptor property and isToggled() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/11/determining-if-a-check-box-menu-item-is-toggled-in-a-flex-popupbutton-controls-pop-up-menu/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        PopUpButton {
            popUpStyleName: MyCustomPopUpStyleName;
        }

        .MyCustomPopUpStyleName {
            fontWeight: normal;
            textAlign: left;
        }

        .redModal {
            modalTransparencyColor: red;
            modalTransparency: 0.8;
        }

        .greenModal {
            modalTransparencyColor: haloGreen;
            modalTransparency: 0.8;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.MenuEvent;
            import mx.controls.Menu;
            import mx.controls.Alert;

            private var menu:Menu;
            private function init():void {
                menu = new Menu();
                menu.variableRowHeight = true;
                menu.dataProvider = arr;
                menu.addEventListener(MenuEvent.CHANGE, menu_change);
                popUpButton.popUp = menu;
            }

            private function menu_change(evt:MenuEvent):void {
                switch (menu.dataDescriptor.getType(evt.item)) {
                    case "check":
                        if (menu.dataDescriptor.isToggled(evt.item)) {
                            application.styleName = "greenModal";
                            Alert.show("\\"" + evt.item.label + "\\" was checked");
                        } else {
                            application.styleName = "redModal";
                            Alert.show("\\"" + evt.item.label + "\\" was not checked");
                        }
                        break;
                }
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Option 1"
                type="check"
                toggled="true" />
        <mx:Object label="Option 2"
                type="check"
                toggled="true" />
    </mx:Array>

    <mx:PopUpButton id="popUpButton"
            label="Click to open..."
            openAlways="true"
            initialize="init();" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/02/11/determining-if-a-check-box-menu-item-is-toggled-in-a-flex-popupbutton-controls-pop-up-menu/feed/ 2 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 Using the isBranch() method to determine if a Tree item is a branch or leaf http://blog.flexexamples.com/2007/11/30/using-the-isbranch-method-to-determine-if-a-tree-item-is-a-branch-or-leaf/ http://blog.flexexamples.com/2007/11/30/using-the-isbranch-method-to-determine-if-a-tree-item-is-a-branch-or-leaf/#comments Sat, 01 Dec 2007 06:51:48 +0000 Peter deHaan http://blog.flexexamples.com/2007/11/30/using-the-isbranch-method-to-determine-if-a-tree-item-is-a-branch-or-leaf/ The following example shows how you can use the isBranch() method to determine if a specific node in a Tree control is a branch (folder) or leaf (item).

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/11/30/using-the-isbranch-method-to-determine-if-a-tree-item-is-a-branch-or-leaf/ --> <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 [...]]]> The following example shows how you can use the isBranch() method to determine if a specific node in a Tree control is a branch (folder) or leaf (item).

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/30/using-the-isbranch-method-to-determine-if-a-tree-item-is-a-branch-or-leaf/ -->
<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 itemIsBranch:Boolean = tree.dataDescriptor.isBranch(tree.selectedItem);
                lbl.text = itemIsBranch.toString();
            }

            private function tree_labelFunc(item:XML):String {
                var returnStr:String = item.@label;
                var itemIsBranch:Boolean = tree.dataDescriptor.isBranch(item);
                if (itemIsBranch) {
                    returnStr += " (BRANCH)";
                }
                return returnStr;
            }
        ]]>
    </mx:Script>

    <mx:XML id="xmlDP">
        <node>
            <node label="1.a" />
            <node label="1.b" />
            <node label="1.c">
                <node label="1.c.i" />
                <node label="1.c.ii" />
                <node label="1.c.iii" />
                <node label="1.c.iv" />
                <node label="1.c.v" />
            </node>
            <node label="1.d" />
            <node label="1.e">
                <node label="1.e.i" />
                <node label="1.e.ii" />
                <node label="1.e.iii">
                    <node label="1.e.iii.A" />
                </node>
                <node label="1.e.iv" />
            </node>
            <node label="1.f" />
        </node>
    </mx:XML>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="isBranch():">
                <mx:Label id="lbl" fontWeight="bold" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Tree id="tree"
            dataProvider="{xmlDP}"
            labelFunction="tree_labelFunc"
            showRoot="false"
            width="50%"
            rowCount="6"
            itemClick="tree_itemClick(event);" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/11/30/using-the-isbranch-method-to-determine-if-a-tree-item-is-a-branch-or-leaf/feed/ 7