Archives du mot-clef XMLListCollection

Flex Tree – Utiliser une filterFunction en récursif sur des noeuds XML

Lorsque vous utiliser un dataProvider dans un composant Flex d’affichage de data (DataGrid, List, Tree, …), vous pouvez utiliser plusieurs types de dataProvider (XMLList, ArrayCollection par exemple) qui seront ensuite convertis par derrière par Flex pour qu’il puisse effectuer ses opérations et afficher la data. De base, toute votre donnée sera affichée, ou tout du moins celle qui peut être affichée dans une liste par exemple.

Quand vous aurez beaucoup de data, vous voudrez souvent la filtrer selon un critère. Par exemple, laisser l’utilisateur taper le nom qu’il cherche et n’afficher que la data contenant ce texte. Pour cela, il faut utiliser une filterFunction. Celle-ci va être appelée par Flex automatiquement pour chaque élément pour savoir si la data doit être affichée ou non.

La signature d’une filterFunction est simple, elle prend un item de type Object en argument et renvoie un Boolean (true ou false donc). Flex va donc passer tous les objets du dataProvider dans cette fonction et suivant le Boolean retourné par la fonction, il va l’afficher ou non. Voici la tête d’une filterFunction:

public function myFilterFunction(item:Object):Boolean{
	// ...vérifications sur item
	return true ou false suivant si on veux afficher ce résultat;
}

Seulement, si vous essayez avec un Tree, vous verrez que cela ne fonctionne pas. Le filtre est seulement appliqué aux nœuds de plus haut niveau de la collection, il n’est pas appliqué de manière récursive sur les nœuds enfants.
Lire la suite →

Flex PopUpMenuButton – Exemple simple de PopUpMenuButton en MXML

Le composant PopUpMenuButton simplifie l’association d’un menu avec un bouton en créant automatiquement le menu assigné au dataProvider du bouton.
Voici un exemple simple de son utilisation:

<mx:PopUpMenuButton labelField="@label">
	<mx:dataProvider>
		<mx:XMLListCollection>
			<mx:XMLList xmlns="">
				<item label="ActionScript">
					<item label="Classe"/>
					<item label="Interface"/>
				</item>
				<item label="MXML">
					<item label="Application"/>
					<item label="Component"/>
				</item>
			</mx:XMLList>
		</mx:XMLListCollection>
	</mx:dataProvider>
</mx:PopUpMenuButton>

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

This movie requires Flash Player 11

Lire la suite →

Flex Tree – Peupler un Tree avec un dataProvider XML et Array (en MXML et ActionScript)

Comme les DataGrid, les composants Tree héritent des listes standard avec un comportement particulier. Dans le cas des Tree, cette spécialité est de pouvoir présenter un dataProvider de manière hiérarchique.

Bien que la plupart des listes affichent une liste linéaire d’éléments (verticalement, horizontalement ou en grille), les Tree Flex vous permettent d’afficher des éléments ayant des enfants. Ces types de data provider sont appelés « hierarchical data providers ». Le XML suivant montre une relation hiérarchique dans laquelle les villes (city) sont des éléments enfant des états (states).

<state label="CA">
	<city label="Los Angeles"/>
	<city label="San Francisco"/>
</state>
<state label="MA">
	<city label="Boston"/>
</state>

Un arbre Tree peut représenter ce genre de données. Les Tree ont deux types d’éléments: les éléments branch (branches) et leaf (feuilles). Quand un dataProvider a des éléments enfant, ils sont automatiquement traités comme branches, ce que signifie qu’ils peuvent être étendus dans l’arbre.

Voici un exemple qui utilise un mx:Tree pour afficher la data:

<mx:Tree labelField="@label" width="200">
	<mx:XMLListCollection>
		<mx:XMLList>
			<state label="CA">
				<city label="Los Angeles"/>
				<city label="San Francisco"/>
			</state>
			<state label="MA">
				<city label="Boston"/>
			</state>
		</mx:XMLList>
	</mx:XMLListCollection>
</mx:Tree>

Lire la suite →

Flex UIComponent – Assigner un dataProvider à un Composant Flex en MXML et AS3

Vous pouvez utiliser n’importe quel type de collection (tant qu’il implémente ICollectionView) avec n’importe quel composant de type liste, ce qui permet d’avoir différentes structures de données. Tous ce que vous avez à faire, est de fixer la propriété dataProvider du composant à la collection.
Par exemple, le code suivant utilise un ArrayCollection pour peupler une liste (mx:List);

import mx.collections.ArrayCollection;
var collection:ArrayCollection = new ArrayCollection(["a", "b", "c", "d"]);
list.dataProvider = collection;

D’un autre côté, si la donnée est au format XML, vous pouvez facilement utiliser une XMLListCollection à la place:

import mx.collections.XMLListCollection;
public var xmlList:XMLList = XMLList("<item>a</item><item>b</item><item>c</item><item>d</item>");
public var collection:XMLListCollection = new XMLListCollection(xmlList);
list.dataProvider = collection;

Lire la suite →

Flex UIComponent – Création d’un objet Collection en MXML et ActionScript

Les composants Flex utilisent le modèle MVC (Model-View-Controller / Modèle-Vue-Controleur), un pattern qui différencie l’affichage de la data par rapport à la data elle-même. Cela se voit bien dans les composants de type Liste. Tous les composants de type Liste utilisent les data models. Dans le langage utilisé par ces composants, les data models sont appelés « data providers » qui sont des objets indépendants que vous pouvez associer avec le composant. Le composant utilise ensuite la donnée de cet objet pour rendre sa Vue.

Les Data Providers implémentent toujours l’interface mx.collections.ICollectionView. Bien que vous puissiez assigner un tableau ou un objet XML à la propriété dataProvider d’un composant, Flex va ensuite le convertir vers un type qui implémente ICollectionView. Cela veut dire que les Array seront convertis en un type mx.collections.ArrayCollection et les objets XML et XMLList seront convertis en mx.collections.XMLListCollection. Il est généralement mieux de pouvoir explicitement englober l’objet dans une collection avant de l’assigner à un data provider. De cette manière, vous êtes sur d’avoir une référence vers la vraie collection du data provider, plutôt que vers l’objet englobé dans cette collection.

Lire la suite →