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

Flex AdvancedDataGrid – Appliquer un style aux lignes et aux colonnes

Pour appliquer des styles aux lignes et aux colonnes d'un composant AdvancedDataGrid, vous devez utiliser des fonctions de callback. Pour contrôler le style d'une ligne, utilisez la propriété AdvancedDataGrid.styleFunction. Pour gérer le style d'une colonne, utilisez la propriété AdvancedDataGridColumn.styleFunction en lui spécifiant une callback.

La callback spécifiée par la propriété AdvancedDataGrid.styleFunction est invoquée en premier, suivie par la fonction spécifiée par la propriété AdvancedDataGridColumn.styleFunction. C'est pourquoi le composant AdvancedDataGrid applique d'abord le style aux lignes et ensuite aux colonnes.

Ces fonctions de callback doivent avoir la signature suivante:

function_name(data:Object, column:AdvancedDataGridColumn):Object

La fonction retourne un objet (Object) qui contient une ou plusieurs paires de la forme "propriete_de_style:valeur". Le champ "propriete_de_style" contient le nom d'une propriété de style telle que "color", et le champ "valeur" contient la valeur correspondante comme "0x00FF00.

Par exemple, vous pourriez retourner deux styles avec le code suivant:

{color:0xFF0000, fontWeight:"bold"}

Le composant AdvancedDataGrid invoque cette fonction de callback lorsqu'il met à jour sa liste d'affichage, quand le composant est dessiné pour la première fois ou lorsque vous appelez la méthode invalidateList().

Tous les exemples qui vont suivre utilisent la donnée suivante située dans un fichier appelé StyleData.as:

[Bindable]
private var dpADG:ArrayCollection = new ArrayCollection([
{Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
{Artist:'Pavement', Album:'Brighten the Corners', Price:11.99},
{Artist:'Saner', Album:'A Child Once', Price:11.99},
{Artist:'Saner', Album:'Helium Wings', Price:12.99},
{Artist:'The Doors', Album:'The Doors', Price:10.99},
{Artist:'The Doors', Album:'Morrison Hotel', Price:12.99},
{Artist:'Grateful Dead', Album:'American Beauty', Price:11.99},
{Artist:'Grateful Dead', Album:'In the Dark', Price:11.99},
{Artist:'Grateful Dead', Album:'Shakedown Street', Price:11.99},
{Artist:'The Doors', Album:'Strange Days', Price:12.99},
{Artist:'The Doors', Album:'The Best of the Doors', Price:10.99}
]);

Appliquer un style aux lignes (rows)

L'exemple suivant utilise la propriété AdvancedDataGrid.styleFunction pour spécifier une fonction de callback qui va décider du style à appliquer aux lignes du composant AdvancedDataGrid. Dans cet exemple, on utilise un Button pour sélectionner un artiste dans le composant ADG. La callback met en valeur (en rouge) toutes les lignes correspondant à l'artiste sélectionné:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
		// Include the data for the AdvancedDataGrid control.
		include "StyleData.as"
		// Artist name to highlight.
		protected var artistName:String;
		// Event handler to set the selected artist's name
		// based on the selected Button control.
		public function setArtistName(event:Event):void{
			artistName=Button(event.currentTarget).label;
			// Refresh row display.
			myADG.invalidateList();
		}
		// Callback function that highlights in red
		// all rows for the selected artist.
		public function myStyleFunc(data:Object, col:AdvancedDataGridColumn):Object{
			if (data["Artist"] == artistName){
				return {color:0xFF0000};
			}
			// Return null if the Artist name does not match.
			return null;
		}
	]]>
	</mx:Script>

	<mx:AdvancedDataGrid id="myADG"
		width="100%" height="100%"
		dataProvider="{dpADG}"
		styleFunction="myStyleFunc">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Artist"/>
			<mx:AdvancedDataGridColumn dataField="Album"/>
			<mx:AdvancedDataGridColumn dataField="Price"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
	<mx:HBox>
		<mx:Button label="Pavement" click="setArtistName(event);"/>
		<mx:Button label="Saner" click="setArtistName(event);"/>
		<mx:Button label="The Doors" click="setArtistName(event);"/>
	</mx:HBox>
</mx:Application>

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

Appliquer un style aux colonnes (columns)

L'exemple suivant modifie l'exemple précédent en assignant une callback pour appliquer un style aux lignes et aux colonnes du composant ADG. Dans cet exemple, la colonne Price affiche toutes les cellules ayant un prix inférieur à 11$ en vert:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
		// Include the data for the AdvancedDataGrid control.
		include "StyleData.as"
		// Artist name to highlight.
		protected var artistName:String;
		// Event handler to set the selected artist's name
		// based on the selected Button control.
		public function setArtistName(event:Event):void{
			artistName=Button(event.currentTarget).label;
			// Refresh row display.
			myADG.invalidateList();
		}
		// Callback function that highlights in red
		// all rows for the selected artist.
		public function myStyleFunc(data:Object, col:AdvancedDataGridColumn):Object{
			if (data["Artist"] == artistName){
				return {color:0xFF0000};
			}
			// Return null if the Artist name does not match.
			return null;
		}
		// Callback function that hightlights in green
		// all entries in the Price column
		// with a value less than $11.00.
		public function myColStyleFunc(data:Object, col:AdvancedDataGridColumn):Object{
			if(data["Price"] <= 11.00){
				return {color:0x00FF00};
			}
			return null;
		}
	]]>
	</mx:Script>

	<mx:AdvancedDataGrid id="myADG"
		width="100%" height="100%"
		dataProvider="{dpADG}"
		styleFunction="myStyleFunc">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Artist"/>
			<mx:AdvancedDataGridColumn dataField="Album"/>
			<mx:AdvancedDataGridColumn dataField="Price"
				 styleFunction="myColStyleFunc"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
	<mx:HBox>
		<mx:Button label="Pavement" click="setArtistName(event);"/>
		<mx:Button label="Saner" click="setArtistName(event);"/>
		<mx:Button label="The Doors" click="setArtistName(event);"/>
	</mx:HBox>
</mx:Application>

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