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

20août/095

Flex AdvancedDataGrid – Utilisation de GroupingCollection, Grouping et GroupingField

Une donnée dite "Grouped"  (groupée) est une donnée à plat que vous arrangez en hiérarchie pour pouvoir l'afficher dans un composant AdvancedDataGrid. Pour grouper la data, vous devez spécifier un ou plusieurs champ pour pouvoir créer la hiérarchie.

Pour peupler un composant AdvancedDataGrid avec de la donnée groupée, créez une instance de la classe GroupingCollection à partir de votre donnée à plat, et passez ensuite cette instance au dataProvider de votre composant AdvancedDataGrid. Quand vous créez une instance de GroupingCollection depuis votre donnée à plat, vous devez spécifiez les champs (GroupingField) qui seront utilisés pour créer la hiérarchie.

Voici notre donnée "flat" (à plat):

[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
	{Region:"Southwest", Territory:"Arizona",
	Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
	{Region:"Southwest", Territory:"Arizona",
	Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
	{Region:"Southwest", Territory:"Central California",
	Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
	{Region:"Southwest", Territory:"Nevada",
	Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
	{Region:"Southwest", Territory:"Northern California",
	Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
	{Region:"Southwest", Territory:"Northern California",
	Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
	{Region:"Southwest", Territory:"Southern California",
	Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
	{Region:"Southwest", Territory:"Southern California",
	Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
]);

L'exemple suivant utilise cette donnée. On spécifie deux champs qui seront utilisés pour grouper la donnée: Region et Territory. La première colonne du composant AdvancedDataGrid est associée avec le champ Region donc l'arbre de navigation interne utilise le champ Region pour définir les labels de chaque noeud enfant:

<?xml version="1.0"?>
<!-- dpcontrols/adg/SimpleGroupADGMXML.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		include "SimpleFlatData.as"
	]]>
	</mx:Script>
	<mx:AdvancedDataGrid id="myADG"
		width="100%" height="100%"
		initialize="gc.refresh();">
	<mx:dataProvider>
		<mx:GroupingCollection id="gc" source="{dpFlat}">
			<mx:grouping>
				<mx:Grouping>
					<mx:GroupingField name="Region"/>
					<mx:GroupingField name="Territory"/>
				</mx:Grouping>
			</mx:grouping>
		</mx:GroupingCollection>
	</mx:dataProvider>
	<mx:columns>
		<mx:AdvancedDataGridColumn dataField="Region"/>
		<mx:AdvancedDataGridColumn dataField="Territory"/>
		<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

This movie requires Flash Player 11

Remplis sous: AdvancedDataGrid, Exemple, Tree Lire la suite
20août/090

Flex AdvancedDataGrid – Utiliser un dataProvider XML (sous forme XMLList)

Dans les exemples sur les Flex AdvancedDataGrid, on utilisait un ArrayCollection car c'est assez pratique et compact pour notre donnée. Mais vous pouvez bien sur peupler votre dataProvider avec de la donnée XML, un retour XML serveur par exemple.

On va utiliser la classe HierarchicalData. En passant notre XML (XMLList en fait) dans le constructeur d'un HierarchicalData, la conversion se fera toute seule, comme si vous lui aviez donné un ArrayCollection.

Voici un exemple de code utilisant un XMLList pour peupler une AdvancedDataGrid:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
	<![CDATA[
		import mx.collections.HierarchicalData;
		import mx.collections.XMLListCollection;
	]]>
	</mx:Script>
	<mx:XMLList id="dpHierarchyXML" >
		<Region Region="Southwest">
			<Region Region="Arizona">
				<Territory_Rep Territory_Rep="Barbara Jennings"
				Actual="38865" Estimate="40000"/>
				<Territory_Rep Territory_Rep="Dana Binn"
				Actual="29885" Estimate="30000"/>
			</Region>
			<Region Region="Central California">
				<Territory_Rep Territory_Rep="Joe Smith"
				Actual="29134" Estimate="30000"/>
			</Region>
			<Region Region="Nevada">
				<Territory_Rep Territory_Rep="Bethany Pittman"
				Actual="52888" Estimate="45000"/>
			</Region>
			<Region Region="Northern California">
				<Territory_Rep Territory_Rep="Lauren Ipsum"
				Actual="38805" Estimate="40000"/>
				<Territory_Rep Territory_Rep="T.R. Smith"
				Actual="55498" Estimate="40000"/>
			</Region>
			<Region Region="Southern California">
				<Territory_Rep Territory_Rep="Alice Treu"
				Actual="44985" Estimate="45000"/>
				<Territory_Rep Territory_Rep="Jane Grove"
				Actual="44913" Estimate="45000"/>
			</Region>
		</Region>
	</mx:XMLList>
	<mx:AdvancedDataGrid width="100%" height="100%"
		dataProvider="{new HierarchicalData(dpHierarchyXML)}">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="@Region"
				headerText="Region"/>
			<mx:AdvancedDataGridColumn dataField="@Territory_Rep"
				headerText="Territory Rep"/>
			<mx:AdvancedDataGridColumn dataField="@Actual"
				headerText="Actual"/>
			<mx:AdvancedDataGridColumn dataField="@Estimate"
				headerText="Estimate"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
</mx:Application>
Remplis sous: AdvancedDataGrid, Exemple, Tree, XML Aucun commentaire
19août/090

Flex AdvancdDataGrid – Utiliser une colonne spécialement pour le Tree de navigation

Dans cet exemple Flex, on affiche de la donnée hierarchique dans un Tree dans une AdvancedDataGrid. La première colonne affiche en même temps le champ "Region" de la donnée. C'est pourquoi, si vous ouvrez les noeuds du Tree, le label de chaque noeud du Tree correspond à la valeur du champ "Region" du dataProvider pour la ligne concernée. Pour les "feuilles" (leaf), le dataProvider ne contient pas de valeur pour le champ "Region", les labels de ces lignes sont donc vides.

Vous pouvez aussi mettre cet arbre de navigation dans sa propre colonne, qui ne sera associée avec aucun champ. Cet exemple n'associe pas de champ à la colonne, donc les icônes de l'arbre apparaissent dans label. On met aussi à "null" les propriétés folderClosedIcon, folderOpenIcon et defaultLeafIcon mais pas celui des icon "disclosure" pour que l'utilisateur puisse encore ouvrir et fermer ses nœuds.

La première colonne de l'AdvancedDataGrid est automatiquement utilisée pour afficher le navigation Tree. Pour utiliser une autre colonne, suivez ce tuto flex:

Flex AdvancedDataGrid - Utiliser treeColumn pour définir la colonne qui va contenir le Tree

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		include "SimpleHierarchicalData.as";
	]]>
	</mx:Script>

	<mx:AdvancedDataGrid width="100%" height="100%"
		folderClosedIcon="{null}"
		folderOpenIcon="{null}"
		defaultLeafIcon="{null}">
		<mx:dataProvider>
			<mx:HierarchicalData source="{dpHierarchy}"/>
		</mx:dataProvider>
		<mx:columns>
			<mx:AdvancedDataGridColumn headerText="" width="50"/>
			<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

This movie requires Flash Player 11

Remplis sous: AdvancedDataGrid, Exemple, Tree Aucun commentaire
19août/094

Flex AdvancedDataGrid – Utiliser groupIconFunction pour déterminer l'icon d'un Tree

Vous pouvez utiliser la propriété groupIconFunction de la class AdvancedDataGrid pour donner un fonction de callback qui va définir l'icône affiché pour les groupes du navigation Tree. Vous pourrez ainsi modifier l'icône suivant la profondeur et le contenu du nœud.
L'exemple suivant utilise la propriété groupIconFunction pour afficher un icône personnalisé pour le noeud le plus haut du Tree. Pour les autres, on affiche l'icône par défaut:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
		import mx.collections.ArrayCollection;
		include "SimpleHierarchicalData.as";
		// Embed the icon for the groups.
		[Bindable]
		[Embed(source="assets/folder_go.png")]
		public var icn:Class;

		// Define the groupIconFunction callback function.
		public function myIconFunc(item:Object, depth:int):Class {
		if(depth == 1){
			// If this is the top-level of the tree, return the icon.
			return icn;
		}else{
			// If this is any other level, return null.
			return null;
		}
		}
	]]>
	</mx:Script>
	<mx:AdvancedDataGrid
		width="100%" height="100%"
		groupIconFunction="myIconFunc">
		<mx:dataProvider>
			<mx:HierarchicalData source="{dpHierarchy}"/>
		</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

This movie requires Flash Player 11

Remplis sous: AdvancedDataGrid, Exemple, Tree 4 Commentaires
19août/0910

Flex AdvancedDataGrid – Icônes et labels du Tree de navigation

L'arbre de navigation d'un AdvancedDataGrid vous permet de contrôler les icônes et les labels utilisés pour les nœuds des branches (branch) et des feuilles (leaf). Par exemple, vous pouvez afficher un Tree simplement avec des labels, sans icônes, juste un Tree avec des folder icons, un Tree sans labels ou un Tree isolé qui n'est associé à aucun champ de data.

Voici les propriétés de style que vous pouvez définir sur le composant AdvancedDataGrid afin de modifier l'apparence du Tree:

  • defaultLeafIcon: Spécifie l'icône des feuilles
  • disclosureClosedIcon: Spécifie l'icon qui sera affiché à côté des noeuds de branche fermés. L'icon par défaut est un triangle noir.
  • disclosureOpenIcon: Spécifie l'icon qui sera affiché à côté des noeuds de branche ouverts. L'icon par défaut est un triangle noir.
  • folderClosedIcon: Spécifie l'icône dossier fermé
  • folderOpenIcon: Spécifie l'icône dossier ouvert

L'exemple suivant fixe l'icône par défaut à null pour le cacher et utilise un icône personnalisé pour les icônes dossier ouvert / fermé:

<?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;
		include "SimpleHierarchicalData.as";
		]]>
	</mx:Script>

	<mx:AdvancedDataGrid width="100%" height="100%"
	defaultLeafIcon="{null}"
	folderOpenIcon="@Embed(source='assets/folder.png')"
	folderClosedIcon="@Embed(source='assets/folder_go.png')">
		<mx:dataProvider>
			<mx:HierarchicalData source="{dpHierarchy}"/>
		</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

This movie requires Flash Player 11

Remplis sous: AdvancedDataGrid, Exemple, Styles, Tree Lire la suite
   Anciennes »

Mes projets (Open Source)

Data Filter Lib ToasterLib

Autres

tutorial flex tutorial flex AFCS livres AS3 Flex

Blogoliste