Creating complex data provider objects in MXML using Flex 4

The following example shows how you can create a complex MX DataGrid data provider with nested objects in MXML using the <fx:Object> tag.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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/10/20/creating-complex-data-provider-objects-in-mxml-using-flex-4/ -->
<s:Application name="MX_DataGrid_dataProvider_Object_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">
 
    <mx:DataGrid id="dg" horizontalCenter="0" verticalCenter="0">
        <mx:columns>
            <mx:DataGridColumn dataField="firstName" />
            <mx:DataGridColumn dataField="lastName" />
            <mx:DataGridColumn dataField="address.town" />
            <mx:DataGridColumn dataField="address.state" />
            <mx:DataGridColumn dataField="address.zipCode" />
        </mx:columns>
        <mx:dataProvider>
            <mx:ArrayCollection>
                <fx:Object firstName="Carol" lastName="F.">
                    <fx:address>
                        <fx:Object town="Waltham" state="MA" zipCode="02452" />
                    </fx:address>
                </fx:Object>
                <fx:Object firstName="Darrell" lastName="L.">
                    <fx:address>
                        <fx:Object town="Waltham" state="MA" zipCode="02452" />
                    </fx:address>
                </fx:Object>
                <fx:Object firstName="Hans" lastName="M.">
                    <fx:address>
                        <fx:Object town="San Francisco" state="CA" zipCode="94103" />
                    </fx:address>
                </fx:Object>
                <fx:Object firstName="Kevin" lastName="L.">
                    <fx:address>
                        <fx:Object town="San Francisco" state="CA" zipCode="94103" />
                    </fx:address>
                </fx:Object>
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:DataGrid>
 
</s:Application>

Or you can also create the nested object’s using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/20/creating-complex-data-provider-objects-in-mxml-using-flex-4/ -->
<s:Application name="MX_DataGrid_dataProvider_Object_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"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.DataGrid;
            import mx.controls.dataGridClasses.DataGridColumn;
 
            protected var dg:DataGrid;
 
            protected function init():void {
                var cols:Array = [];
                cols.push(new DataGridColumn("firstName"));
                cols.push(new DataGridColumn("lastName"));
                cols.push(new DataGridColumn("address.town"));
                cols.push(new DataGridColumn("address.state"));
                cols.push(new DataGridColumn("address.zipCode"));
 
                var arr:Array = [];
                arr.push({firstName:"Carol", lastName:"F.", address:{town:"Waltham", state:"MA", zipCode:"02452"}});
                arr.push({firstName:"Darrell", lastName:"L.", address:{town:"Waltham", state:"MA", zipCode:"02452"}});
                arr.push({firstName:"Hans", lastName:"M.", address:{town:"San Francisco", state:"CA", zipCode:"94103"}});
                arr.push({firstName:"Kevin", lastName:"L.", address:{town:"San Francisco", state:"CA", zipCode:"94103"}});
 
                dg = new DataGrid();
                dg.columns = cols;
                dg.dataProvider = new ArrayCollection(arr);;
                dg.horizontalCenter = dg.verticalCenter = 0;
                addElement(dg);
            }
        ]]>
    </fx:Script>
 
</s:Application>

You can also define the nested object inline in your MXML by using two “{” chars instead of 1, as seen in the following example (where the first/outer “{” denotes data binding and the second/inner “{” denotes new Object() shorthand):

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/20/creating-complex-data-provider-objects-in-mxml-using-flex-4/ -->
<s:Application name="MX_DataGrid_dataProvider_Object_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">
 
    <mx:DataGrid id="dg" horizontalCenter="0" verticalCenter="0">
        <mx:columns>
            <mx:DataGridColumn dataField="firstName" />
            <mx:DataGridColumn dataField="lastName" />
            <mx:DataGridColumn dataField="address.town" />
            <mx:DataGridColumn dataField="address.state" />
            <mx:DataGridColumn dataField="address.zipCode" />
        </mx:columns>
        <mx:dataProvider>
            <mx:ArrayCollection>
                <fx:Object firstName="Carol" lastName="F." address="{{town:'Waltham', state:'MA', zipCode:'02452'}}" />
                <fx:Object firstName="Darrell" lastName="L." address="{{town:'Waltham', state:'MA', zipCode:'02452'}}" />
                <fx:Object firstName="Hans" lastName="M." address="{{town:'San Francisco', state:'CA', zipCode:'94103'}}" />
                <fx:Object firstName="Kevin" lastName="L." address="{{town:'San Francisco', state:'CA', zipCode:'94103'}}" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:DataGrid>
 
</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.

One thought on “Creating complex data provider objects in MXML using Flex 4

  1. Can you give an example of Complex XMl as a dataProvider example

    private var xmlData:XML =

    Building

    Hag
    Gr

    363
    Rs.1,247.40
    The best-selling

    ;

Comments are closed.