Flex Examples » children http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Creating three related Spark DropDownList controls in Flex 4 http://blog.flexexamples.com/2010/01/28/creating-three-related-spark-dropdownlist-controls-in-flex-4/ http://blog.flexexamples.com/2010/01/28/creating-three-related-spark-dropdownlist-controls-in-flex-4/#comments Thu, 28 Jan 2010 20:58:24 +0000 Peter deHaan http://blog.flexexamples.com/?p=2348 In a previous example, “Creating two related ComboBoxes”, we saw how you could create two or three related MX ComboBox controls in Flex 3 by binding to the previous ComboBox control’s selected item.

The following example shows how you can create three related Spark DropDownList controls in Flex 4 by using databinding and XML.

[...]]]> In a previous example, “Creating two related ComboBoxes”, we saw how you could create two or three related MX ComboBox controls in Flex 3 by binding to the previous ComboBox control’s selected item.

The following example shows how you can create three related Spark DropDownList controls in Flex 4 by using databinding and XML.

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" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/28/creating-three-related-spark-dropdownlist-controls-in-flex-4/ -->
<s:Application name="Spark_DropDownList_related_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Declarations>
        <s:XMLListCollection id="dp">
            <fx:XMLList xmlns="">
                <country label="USA">
                    <state label="Alaska" city="AK">
                        <city label="Anchorage" />
                        <city label="Fairbanks" />
                        <city label="Juneau" />
                    </state>
                    <state label="California" abbr="CA">
                        <city label="San Francisco" />
                        <city label="Oakland" />
                        <city label="Los Angeles" />
                        <city label="Palm Springs" />
                        <city label="Sacramento" />
                    </state>
                    <state label="Nevada" abbr="NV">
                        <city label="Las Vegas" />
                        <city label="Reno" />
                        <city label="Carson City" />
                    </state>
                </country>
                <country label="Canada">
                    <province label="British Columbia"  abbr="BC">
                        <city label="Vancouver" />
                        <city label="Victoria" />
                    </province>
                    <province label="Alberta" abbr="AB">
                        <city label="Calgary" />
                        <city label="Edmonton" />
                    </province>
                </country>
            </fx:XMLList>
        </s:XMLListCollection>
    </fx:Declarations>
 
    <mx:Form horizontalCenter="0" top="20">
        <mx:FormItem label="Country:">
            <s:DropDownList id="countryDDL"
                    dataProvider="{dp}"
                    labelField="@label"
                    requireSelection="true" />
        </mx:FormItem>
        <mx:FormItem label="State:" required="true">
            <s:DropDownList id="stateDDL"
                    dataProvider="{new XMLListCollection(countryDDL.selectedItem.children())}"
                    labelField="@label"
                    requireSelection="false" />
        </mx:FormItem>
        <mx:FormItem label="City:" required="true">
            <s:DropDownList id="cityDDL"
                    dataProvider="{new XMLListCollection(stateDDL.selectedItem.children())}"
                    labelField="@label"
                    requireSelection="false" />
        </mx:FormItem>
    </mx:Form>
 
</s:Application>

View source is enabled in the following example.

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/2010/01/28/creating-three-related-spark-dropdownlist-controls-in-flex-4/feed/ 8 Using an XML data provider with the Spark List control in Flex 4 http://blog.flexexamples.com/2009/11/04/using-an-xml-data-provider-with-the-spark-list-control-in-flex-4/ http://blog.flexexamples.com/2009/11/04/using-an-xml-data-provider-with-the-spark-list-control-in-flex-4/#comments Wed, 04 Nov 2009 21:57:39 +0000 Peter deHaan http://blog.flexexamples.com/?p=2163 The following example shows how you can use an XML document as a data provider for a Spark List control in Flex 4 by using an XMLListCollection.

Full code after the jump.

<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2009/11/04/using-an-xml-data-provider-with-the-spark-list-control-in-flex-4/ --> <s:Application name="Spark_List_dataProvider_XML_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">   <s:List id="lst" labelField="@label" horizontalCenter="0" verticalCenter="0"> <s:dataProvider> <s:XMLListCollection> <fx:XMLList xmlns=""> <node label="One" [...]]]> The following example shows how you can use an XML document as a data provider for a Spark List control in Flex 4 by using an XMLListCollection.

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/11/04/using-an-xml-data-provider-with-the-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_dataProvider_XML_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">
 
    <s:List id="lst"
            labelField="@label"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:XMLListCollection>
                <fx:XMLList xmlns="">
                    <node label="One" />
                    <node label="Two" />
                    <node label="Three" />
                    <node label="Four" />
                    <node label="Five" />
                    <node label="Six" />
                    <node label="Seven" />
                    <node label="Eight" />
                    <node label="Nine" />
                </fx:XMLList>
            </s:XMLListCollection>
        </s:dataProvider>
    </s:List>
 
</s:Application>

Or, if you wanted to embed the XML into your application, you could use the <fx:XML/> tag and bind to an XMLListCollection, as seen in the following example:

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/11/04/using-an-xml-data-provider-with-the-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_dataProvider_XML_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:Declarations>
        <fx:XML id="nodes" source="nodesAndStuff.xml" />
    </fx:Declarations>
 
    <s:List id="lst"
            labelField="@label"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:XMLListCollection source="{nodes.children()}" />
        </s:dataProvider>
    </s:List>
 
</s:Application>

And the external .XML file, nodesAndStuff.xml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/04/using-an-xml-data-provider-with-the-spark-list-control-in-flex-4/ -->
<root>
    <node label="One" />
    <node label="Two" />
    <node label="Three" />
    <node label="Four" />
    <node label="Five" />
    <node label="Six" />
    <node label="Seven" />
    <node label="Eight" />
    <node label="Nine" />
</root>

Or, if you didn’t want to use data binding, Corey, you could set the data provider using ActionScript, as seen in the following example:

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/11/04/using-an-xml-data-provider-with-the-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_dataProvider_XML_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"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            private function init():void {
                xmlListColl.source = nodes.children();
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:XML id="nodes" source="nodesAndStuff.xml" />
    </fx:Declarations>
 
    <s:List id="lst"
            labelField="@label"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:XMLListCollection id="xmlListColl" />
        </s:dataProvider>
    </s:List>
 
</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/11/04/using-an-xml-data-provider-with-the-spark-list-control-in-flex-4/feed/ 20 Using an Array as a data provider in a Flex Tree control http://blog.flexexamples.com/2007/12/03/using-an-array-as-a-data-provider-in-a-flex-tree-control/ http://blog.flexexamples.com/2007/12/03/using-an-array-as-a-data-provider-in-a-flex-tree-control/#comments Tue, 04 Dec 2007 07:36:41 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/03/using-an-array-as-a-data-provider-in-a-flex-tree-control/ The following code shows you how you can use an Array as a data provider for a Tree control in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/12/03/using-an-array-as-a-data-provider-in-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:Object):String { var suffix:String = ""; if (tree.dataDescriptor.hasChildren(item)) { [...]]]> The following code shows you how you can use an Array as a data provider for a Tree control in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/03/using-an-array-as-a-data-provider-in-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:Object):String {
                var suffix:String = "";
                if (tree.dataDescriptor.hasChildren(item)) {
                    suffix = " (" + item.children.length + ")";
                }
                return item.name.toUpperCase() + suffix;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object name="One">
            <mx:children>
                <mx:Array>
                    <mx:Object name="Two" />
                    <mx:Object name="Three" />
                    <mx:Object name="Four">
                        <mx:children>
                            <mx:Array>
                                <mx:Object name="Five" />
                                <mx:Object name="Six" />
                            </mx:Array>
                        </mx:children>
                    </mx:Object>
                    <mx:Object name="Seven">
                        <mx:children>
                            <mx:Array>
                                <mx:Object name="Eight" />
                            </mx:Array>
                        </mx:children>
                    </mx:Object>
                    <mx:Object name="Nine" />
                </mx:Array>
            </mx:children>
        </mx:Object>
    </mx:Array>

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

</mx:Application>

View source is enabled in the following example.

And if you happen to be using Flex 4 (download), the following example should work:

<?xml version="1.0" encoding="utf-8"?>
<s:Application 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[
            private function tree_labelFunc(item:Object):String {
                var suffix:String = "";
                if (tree.dataDescriptor.hasChildren(item)) {
                    suffix = " (" + item.children.length + ")";
                }
                return item.name.toUpperCase() + suffix;
            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <fx:Array id="arr">
            <fx:Object name="One">
                <fx:children>
                    <fx:Array>
                        <fx:Object name="Two" />
                        <fx:Object name="Three" />
                        <fx:Object name="Four">
                            <fx:children>
                                <fx:Array>
                                    <fx:Object name="Five" />
                                    <fx:Object name="Six" />
                                </fx:Array>
                            </fx:children>
                        </fx:Object>
                        <fx:Object name="Seven">
                            <fx:children>
                                <fx:Array>
                                    <fx:Object name="Eight" />
                                </fx:Array>
                            </fx:children>
                        </fx:Object>
                        <fx:Object name="Nine" />
                    </fx:Array>
                </fx:children>
            </fx:Object>
        </fx:Array>
    </fx:Declarations>

    <mx:Tree id="tree"
            dataProvider="{arr}"
            labelFunction="tree_labelFunc"
            width="200"
            horizontalCenter="0"
            verticalCenter="0" />

</s:Application>
 
]]> http://blog.flexexamples.com/2007/12/03/using-an-array-as-a-data-provider-in-a-flex-tree-control/feed/ 7