Creating complex data provider objects in MXML using Flex 4

By On October 20, 2010 · 1 Comment

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

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

One Response to Creating complex data provider objects in MXML using Flex 4

  1. Trushant says:
    February 3, 2012 at 1:53 am

    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

    ;