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
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
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.
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>
Mes projets (Open Source)
Autres
