Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex AdvancedDataGrid – Créer des Summary personnalisés avec summaryFunction

Les Summary (bilans) permettent de faire plusieurs opération par défaut (SUM, MAX, MIN, AVG et COUNT) grâce à la propriété "operation" de SummaryField. Vous pouvez aussi créer vos propres opérations avec la propriété "summaryObjectFunction" de SummaryField et la propriété "summaryFunction" de SummaryField.

Vos bilans personnalisés peuvent faire tous types d'actions mais le résultat de votre calcul doit être de type Number.

La propriété summaryObjectFunction de SummaryRow

La propriété "summaryObjectFunction" de SummaryRow définit une fonction de callback qui va définir une instance de la classe SummaryObject qui va contenir les données du bilan. Le composant AdvancedDataGrid ajout l'instance de SummaryObject au dataProvider pour afficher le bilan dans le composant. C'est pourquoi vous devez définir dans ce SummaryObject, les propriétés à afficher.

Dans l'exemple suivant, cette fonction de callback ajoute une propriété nommée "Territory_Rep" qui correspond au dataField de la colonne "Terroritory Rep" du composant.

La portion de code suivante va ajouter la valeur "Sales Difference" dans la colonne Terrority Rep pour notre Summary:

private function summObjFunc():SummaryObject {
	// Define the object containing the summary data.
	var obj:SummaryObject = new SummaryObject();
	// Add a field containing a value for the Territory_Rep column.
	obj.Territory_Rep = "Alternating Reps";
	return obj;
}

La propriété summaryFunction de SummaryField

La propriété summaryFunction de SummaryField définit une fonction de callback qui va effectuer le calcul de notre bilan. Cette fonction de callback doit renvoyer un Number, correspondant à la valeur affichée. Ce Number sera affiché dans la ligne de Summary, dans la colonne qui correspond au champ sur lequel on fait le Summary.

Exemple de Summary personnalisé

Dans cet exemple, je vais créer un Summary personnalisé avec les propriétés summaryFunction et summaryObjectFunction. Ce bilan va faire la somme des ventes réelles (colonne Actual) et la comparer à la somme des vente estimées (colonne Estimate) du groupe:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script>
	<![CDATA[
	import mx.collections.ArrayCollection;
	import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
	import mx.collections.IViewCursor;
	import mx.collections.SummaryObject;

	include "SimpleFlatData.as"

	// Callback function to create
	// the SummaryObject used to hold the summary data.
	private function summObjFunc():SummaryObject {
		// Define the object containing the summary data.
		var obj:SummaryObject = new SummaryObject();
		// Add a field containing a value for the Territory_Rep column.
		obj.Territory_Rep = "Sales Difference";
		return obj;
	}
	// Callback function to summarizes
	// every other row of the Actual sales revenue for the territory.
	private function summFunc(cursor:IViewCursor, dataField:String,
		operation:String):Number {
		var actualTotal:Number = 0;
		var estimateTotal:Number = 0;
		while (!cursor.afterLast){
			actualTotal += cursor.current["Actual"];
			estimateTotal += cursor.current["Estimate"];
			cursor.moveNext();
		}
		return estimateTotal - actualTotal;
	}
	]]>
	</mx:Script>
	<mx:AdvancedDataGrid id="myADG"
		width="100%" height="100%"
		initialize="gc.refresh();">
		<mx:dataProvider>
			<mx:GroupingCollection id="gc" source="{dpFlat}">
				<mx:Grouping>
					<mx:GroupingField name="Region"/>
					<mx:GroupingField name="Territory">
						<mx:summaries>
							<mx:SummaryRow summaryObjectFunction="summObjFunc"
							summaryPlacement="first">
								<mx:SummaryField dataField="Actual" summaryFunction="summFunc"/>
							</mx:SummaryRow>
						</mx:summaries>
					</mx:GroupingField>
				</mx:Grouping>
			</mx:GroupingCollection>
		</mx:dataProvider>
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Region"/>
			<mx:AdvancedDataGridColumn dataField="Territory_Rep"
			headerText="Territory Rep"/>
			<mx:AdvancedDataGridColumn dataField="Actual"/>
			<mx:AdvancedDataGridColumn dataField="Estimate"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application