Créer un fournisseur de données complexe utilisant des objets dans Flex 4

Par
tannoy
– 13 mars 2011Publié dans : Flex 4

L’exemple suivant montre comment vous pouvez créer, en MXML, un fournisseur de données complexe pour un contrôle MX DataGrid avec des objets imbriqués en utilisant la balise <fx:Object>.

L’exemple suivant requiert Flash Player 10 et le SDK Adobe Flex 4. Vous pouvez télécharger la version d’évaluation d’Adobe Flash Builder 4 à l’adresse http://www.adobe.com/products/flex/. Pour télécharger la dernière version du SDK Flex 4, regardez http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex +4.

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

Ou vous pouvez aussi créer les objets imbriqués en utilisant ActionScript , comme vous pouvez le voir dans l’exemple suivant:

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

Vous pouvez aussi définir l’objet imbriqué en ligne dans le MXML en utilisant 2 caractères « { » au lieu d’1, comme vous pouvez le voir dans l’exemple suivant (ou le premier « { » correspond à la liaison de données et le second « { » correspond à la forme raccourcie de l’objet)

 

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

L’exemple en action

Traduction de l’article de Peter DeHaan:

Creating complex data provider objects in MXML using Flex 4

Tags : , ,