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

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

Vous pouvez aussi spécifier des styles en utilisant la méthode setStyle(), et en utilisant un tag <mx:Style> comme dans ces exemple:

<mx:Style>
	AdvancedDataGrid {
		defaultLeafIcon:ClassReference(null);
		folderOpenIcon:Embed(source='assets/folderOpenIcon.jpg');
		folderClosedIcon:Embed(source='assets/folderClosedIcon.jpg');
	}
</mx:Style>
Remplis sous: AdvancedDataGrid, Exemple, Styles, Tree || Taggé comme: , , , , , , Laisser un commentaire

Articles similaires

Commentaires (10) Trackbacks (0)
  1. Nathalie
    18 mai 2011

    Bonjour,

    Ce tutoriel m'est très utile. J'ai pu adapter ce qui est expliqué à mon application. Par contre il y a un truc que je ne comprends pas ...

    (J'utilise Flash Builder 4)

    J'ai inséré des icônes à mon Tree.
    Quand le Tree se trouve dans un pannel et un formulaire, mes icônes s'affichent normalement. Par contre, quand le pannel lui est placé dans un viewStack (et sous entendu un NavigatorContent), mes icônes ne s'affichent plus du tout, et mon Tree garde son aspect par défaut...
    Est ce normal ?

    Voici mes deux codes exemples :

    Code Pannel + Form + Tree :

    COPIER-COLLER
    MXML:
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    3.                xmlns:s="library://ns.adobe.com/flex/spark"
    4.                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="400" minHeight="600" width="678" height="820" xmlns:domains="services.domains.*" initialize="init()">
    5.     <fx:Script>
    6.         <![CDATA[
    7.             [Bindable]public var selectedNode:XML;
    8.  
    9.             public function treeChanged(event:Event):void {
    10.                 selectedNode=Tree(event.target).selectedItem as XML;
    11.             }
    12.    
    13.             [Embed(source="images/plus.gif")]
    14.             public var plus:Class;
    15.            
    16.             [Embed(source="images/minus.gif")]
    17.             public var minus:Class;
    18.            
    19.             [Embed(source="images/folder.gif")]
    20.             public var folder:Class;
    21.            
    22.             private function init():void
    23.             {
    24.                 domains_Tree.setStyle("disclosureOpenIcon", minus);
    25.                 domains_Tree.setStyle("disclosureClosedIcon", plus);
    26.                 domains_Tree.setStyle("defaultLeafIcon", folder);
    27.  
    28.             }      
    29.         ]]>
    30.     </fx:Script>
    31.     <fx:Declarations>
    32.         <fx:XMLList id="treeData">     
    33.             <node label="Histoire">
    34.                 <node_a label="Histoire de France">
    35.                     <node_b label="Moyen Age"/>
    36.                     <node_b label="Renaissance"/>
    37.                     <node_b label="XVIIe-XVIIIe siècle">
    38.                         <node_c label="Louis XIII"/>
    39.                         <node_c label="Louis XIV"/>
    40.                     </node_b>
    41.                 </node_a>   
    42.                 <node_a label="Histoire de l'Europe"/>
    43.                 <node_a label="Histoire de l'Amérique"/>
    44.             </node>
    45.             <node label="Géographie">
    46.                 <node_a label="Géographie des terres"/>
    47.                 <node_a label="Géographie des fleuves et rivières"/>
    48.             </node>
    49.             <node label="Sciences">
    50.                 <node_a label="Sciences physiques"/>
    51.                 <node_a label="Sciences techniques"/>
    52.             </node>
    53.             <node label="Mathèmatiques">
    54.                 <node_a label="Arithmétique"/>
    55.                 <node_a label="Géométrie"/>
    56.             </node></fx:XMLList>
    57.        
    58.         <fx:XMLList id="viewdomains">   
    59.             <domain>
    60.                 <nom>Histoire de France</nom>
    61.                 <date_C>27/01/2011</date_C>
    62.                 <date_M>02/03/2011</date_M>
    63.             </domain>      
    64.             <domain>
    65.                 <nom>Histoire de l'Europe</nom>
    66.                 <date_C>18/04/2011</date_C>
    67.                 <date_M></date_M>
    68.             </domain>         
    69.             <domain>
    70.                 <nom>Histoire de l'Amérique</nom>
    71.                 <date_C>18/04/2011</date_C>
    72.                 <date_M></date_M>
    73.             </domain>         
    74.         </fx:XMLList>
    75.     </fx:Declarations>
    76.     <s:Panel x="7" y="10" width="661" height="800" title="Gestion des domaines" textAlign="center" fontSize="25" cornerRadius="10">
    77.         <mx:Form x="14" y="20" width="635" height="661" fontSize="19" id="domains_gestion_Form" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5">
    78.             <s:Label text="Domaines : " fontWeight="bold" verticalAlign="top" height="35" fontSize="19"/>
    79.             <s:HGroup width="620" height="20" gap="120" paddingLeft="50" verticalAlign="middle">
    80.                 <s:Button label="Nouveau" id="new_domain_Button" cornerRadius="4" height="20" fontSize="14"/>
    81.                 <s:Button label="Modifier" id="modify_domain_Button" cornerRadius="4" height="20" fontSize="14"/>
    82.                 <s:Button label="Supprimer" id="delete_domain_Button" cornerRadius="4" height="20" fontSize="14"/>
    83.             </s:HGroup>
    84.             <s:HGroup width="620" height="530" verticalAlign="middle" paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5">
    85.                 <mx:Tree width="221" height="498" id="domains_Tree" labelField="@label" showRoot="false" dataProvider="{treeData}" change="treeChanged(event)" textAlign="left" verticalAlign="top" fontSize="13" y="55"></mx:Tree>
    86.                 <mx:DataGrid height="498" width="380" verticalAlign="middle" id="questions_DataGrid" dataProvider="{viewdomains}" textAlign="left" fontSize="13" y="55">
    87.                     <mx:columns>
    88.                         <mx:DataGridColumn headerText="Nom" dataField="nom"/>
    89.                         <mx:DataGridColumn headerText="Date de création" dataField="date_C"/>
    90.                         <mx:DataGridColumn headerText="Date de modification" dataField="date_M"/>
    91.                     </mx:columns>
    92.                 </mx:DataGrid>
    93.             </s:HGroup>
    94.         </mx:Form>
    95.         <s:Button label="Valider" fontWeight="bold" height="33" cornerRadius="4" x="293" y="709" fontSize="20" id="domains_validation"/>
    96.     </s:Panel>
    97. </s:Application>

    Code viewStack + NavigatorContent + Pannel + Form + Tree :

    COPIER-COLLER
    MXML:
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    3.                xmlns:s="library://ns.adobe.com/flex/spark"
    4.                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="400" minHeight="600" width="678" height="820" xmlns:domains="services.domains.*" initialize="init()">
    5.     <fx:Script>
    6.         <![CDATA[
    7.             [Bindable]public var selectedNode:XML;
    8.            
    9.             public function treeChanged(event:Event):void {
    10.                 selectedNode=Tree(event.target).selectedItem as XML;
    11.             }
    12.            
    13.             [Embed(source="images/plus.gif")]
    14.             public var plus:Class;
    15.            
    16.             [Embed(source="images/minus.gif")]
    17.             public var minus:Class;
    18.            
    19.             [Embed(source="images/folder.gif")]
    20.             public var folder:Class;
    21.            
    22.             private function init():void
    23.             {
    24.                 domains_Tree.setStyle("disclosureOpenIcon", minus);
    25.                 domains_Tree.setStyle("disclosureClosedIcon", plus);
    26.                 domains_Tree.setStyle("defaultLeafIcon", folder);
    27.                
    28.             }      
    29.         ]]>
    30.     </fx:Script>
    31.     <fx:Declarations>
    32.         <fx:XMLList id="treeData">     
    33.             <node label="Histoire">
    34.                 <node_a label="Histoire de France">
    35.                     <node_b label="Moyen Age"/>
    36.                     <node_b label="Renaissance"/>
    37.                     <node_b label="XVIIe-XVIIIe siècle">
    38.                         <node_c label="Louis XIII"/>
    39.                         <node_c label="Louis XIV"/>
    40.                     </node_b>
    41.                 </node_a>   
    42.                 <node_a label="Histoire de l'Europe"/>
    43.                 <node_a label="Histoire de l'Amérique"/>
    44.             </node>
    45.             <node label="Géographie">
    46.                 <node_a label="Géographie des terres"/>
    47.                 <node_a label="Géographie des fleuves et rivières"/>
    48.             </node>
    49.             <node label="Sciences">
    50.                 <node_a label="Sciences physiques"/>
    51.                 <node_a label="Sciences techniques"/>
    52.             </node>
    53.             <node label="Mathèmatiques">
    54.                 <node_a label="Arithmétique"/>
    55.                 <node_a label="Géométrie"/>
    56.             </node></fx:XMLList>
    57.        
    58.         <fx:XMLList id="viewdomains">   
    59.             <domain>
    60.                 <nom>Histoire de France</nom>
    61.                 <date_C>27/01/2011</date_C>
    62.                 <date_M>02/03/2011</date_M>
    63.             </domain>      
    64.             <domain>
    65.                 <nom>Histoire de l'Europe</nom>
    66.                 <date_C>18/04/2011</date_C>
    67.                 <date_M></date_M>
    68.             </domain>         
    69.             <domain>
    70.                 <nom>Histoire de l'Amérique</nom>
    71.                 <date_C>18/04/2011</date_C>
    72.                 <date_M></date_M>
    73.             </domain>         
    74.         </fx:XMLList>
    75.     </fx:Declarations>
    76.    
    77.     <mx:ViewStack id="viewStack_Gestion_Dom" width="508" height="653">
    78.         <s:NavigatorContent id="gestionDom" label="gestionDom" width="100%" height="100%" fontSize="10">       
    79.         <s:Panel x="7" y="10" width="661" height="800" title="Gestion des domaines" textAlign="center" fontSize="25" cornerRadius="10">
    80.             <mx:Form x="14" y="20" width="635" height="661" fontSize="19" id="domains_gestion_Form" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5">
    81.                 <s:Label text="Domaines : " fontWeight="bold" verticalAlign="top" height="35" fontSize="19"/>
    82.                 <s:HGroup width="620" height="20" gap="120" paddingLeft="50" verticalAlign="middle">
    83.                     <s:Button label="Nouveau" id="new_domain_Button" cornerRadius="4" height="20" fontSize="14"/>
    84.                     <s:Button label="Modifier" id="modify_domain_Button" cornerRadius="4" height="20" fontSize="14"/>
    85.                     <s:Button label="Supprimer" id="delete_domain_Button" cornerRadius="4" height="20" fontSize="14"/>
    86.                 </s:HGroup>
    87.                 <s:HGroup width="620" height="530" verticalAlign="middle" paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5">
    88.                     <mx:Tree width="221" height="498" id="domains_Tree" labelField="@label" showRoot="false" dataProvider="{treeData}" change="treeChanged(event)" textAlign="left" verticalAlign="top" fontSize="13" y="55"></mx:Tree>
    89.                     <mx:DataGrid height="498" width="380" verticalAlign="middle" id="questions_DataGrid" dataProvider="{viewdomains}" textAlign="left" fontSize="13" y="55">
    90.                         <mx:columns>
    91.                             <mx:DataGridColumn headerText="Nom" dataField="nom"/>
    92.                             <mx:DataGridColumn headerText="Date de création" dataField="date_C"/>
    93.                             <mx:DataGridColumn headerText="Date de modification" dataField="date_M"/>
    94.                         </mx:columns>
    95.                     </mx:DataGrid>
    96.                 </s:HGroup>
    97.             </mx:Form>
    98.             <s:Button label="Valider" fontWeight="bold" height="33" cornerRadius="4" x="293" y="709" fontSize="20" id="domains_validation"/>
    99.         </s:Panel>
    100.         </s:NavigatorContent>   
    101.         </mx:ViewStack>
    102.  
    103. </s:Application>

    Si vous pouviez m'éclairer à ce sujet je vous serai reconnaissante et cela me serait utile pour comprendre où se trouve mon erreur, s'il y en a une.

    Nathalie

  2. fnicollet
    18 mai 2011

    Bonjour,
    effectivement, le comportement est assez étrange. Je pense que l'erreur vient du moment auquel vous appelez la méthode init. Vous l'appelez sur l'évènement initialize, ce qui est OK pour des modifications de style sur des éléments de l'application. Le problème est que les éléments qui sont dans un ViewStack ne sont pas créés automatiquement à la création du ViewStack. En effet, par défaut, les éléments contenus dans un ViewStack sont uniquement instanciés lorsque l'on navigue vers un de ces éléments (en utilisant la propriété selectedIndex ou selectedChild). A mon avis, le Tree que vous voulez modifier n'est pas encore accessible, il est étonnant que vous n'ayez pas une exception mais admettons ^^.

    Ce que je vous conseillerait de faire, c'est de simplement déclarer vos icones dans un style CSS (doit une classe de style, soit directement sur Tree) si vous en avez plusieurs.
    Sinon directement sur le composant:

    <mx:Tree id="domains_Tree"
    disclosureOpenIcon="@Embed(source="images/minus.gif")"
    disclosureClosedIcon="@Embed(source="images/plus.gif")"
    defaultLeafIcon="@Embed(source="images/folder.gif")"
    ... />

    Fabien

  3. Nathalie
    18 mai 2011

    Ohhhhhhhhhh !!!!! Super ça marche !!! ^^

    Y a juste un petit détail mais ce n'est pas bien grave.

    Pour le nom des sources, au lieu de mettre "images/minus.gif" il faut mettre 'images/minus.gif'. Sinon Flash Builder 4 mentionne une erreur comme celle-ci : Le type d'élément "{0}" doit être suivi des spécifications d'attribut ">" ou "/>".

    Mais comme c'était écrit avec des ' ' dans l'exemple du tutoriel, facile de s'y retrouver.

    Un grand merci à vous (toi) d'avoir pris un peu de temps pour me répondre car je me prenais la tête avec çà depuis hier. ^^

    Nathalie

  4. fnicollet
    18 mai 2011

    Salut Nathalie (on peut se tutoyer ;) ),

    effectivement, si tu utilises des doubles quotes comme attibut du XML, celui-ci ne devient plus valide. Je n'ai pas testé le code de mon côté, j'ai écrit ça dans un bloc-notes ^^. La solution est de mettre de simples quotes comme tu l'as fait.

    Bonne chance pour la suite,
    Fabien

  5. Nathalie
    24 mai 2011

    URGENT !!!!

    Gros PB avec mes icônes !!!!

    Flash Builder 4 me trouve cette erreur quand j'ouvre mon application MXML contenant le code de la dernière fois :

    Impossible de transcoder fr/studec/aceres/quizz/creator/admin_formateur/exam_generator_complet/images/plus.gif
    Impossible de transcoder fr/studec/aceres/quizz/creator/admin_formateur/exam_generator_complet/images/minus.gif
    Impossible de transcoder fr/studec/aceres/quizz/creator/admin_formateur/exam_generator_complet/images/folder.gif

    Je me prend la tête depuis hier 18h avec ce pb. J'ai beau modifié le chemin d'accès, mettre mes icones en .gif dans un package images dans le même package que mon appli,etc, rien ne fonctionne. J'ai toujours la même erreur ...
    Je dois présenter ce que j'ai fait aujourd'hui. Je suis dans la M .... Sans compter que Flash Builder 4 ne veut pas m'importer mon projet FXP car il trouve des erreurs, mais çà c'est une autre histoire ...

    Si une explication, .... merci
    Désolé de déranger mais je ne le fais pas exprès, vraiment pas.

    Nathalie

  6. fnicollet
    24 mai 2011

    Hum, normalement les icones ne disparaissent pas comme ça. S'il indique impossible de transcoder, cela signifie qu'il ne trouve pas l'icône. il faut vérifier que les fichiers {CHEMIN_SOURCES_PROJET}/src/fr/studec/aceres/quizz/creator/admin_formateur/exam_generator_complet/images/minus.gif existe bien

    Fabien

  7. Nathalie
    24 mai 2011

    Ce qui est bizarre, c'est qu'il m'affiche ces erreurs lorsque je passe en mode design pour travailler sur l'appli. Par contre quand j'exécute l'appli sur un navigateur il ne trouve aucune d'erreurs, et l'appli se lance avec les icônes. Pourtant le chemin est bon ...

    Nath

  8. Nathalie
    24 mai 2011

    Est ce que ce problème peut avoir des répercussions pour l'export du projet ? Car je ne peux pas exporter mon projet car il dit le projet contient des erreurs ...

  9. fnicollet
    24 mai 2011

    Dans tous les cas, il faut corriger le problème de chemin vers les icones. S'il n'y a rien dans la vue Problems, tu sera tranquille

    Fabien

  10. Nathalie
    24 mai 2011

    C'est bon !!!!!

    Après une journée d'énervement intense, et d'arrachage de cheveux (j'ai perdu quelques touffes dans la bataille contre Flash Builder 4, ;) )j'ai réussi à corriger les erreurs et à exporter mon projet.

    J'ai détruit mon dossier "images" et je l'ai recréé, ensuite j'ai réécrit le chemin.

    Pour l'export ce fut plus dur et plus long à résoudre, puisqu'il trouvait des erreurs dans le projet, du coup j'ai refait un projet dans lequel j'ai copié toutes mes appli. C'est peut-être pas la bonne, mais çà marche alors que demander de mieux.

    S'il y en a qui ont les mêmes pb, voici une solution possible... mais longue

    Merci pour les indices :)

    Nath


Leave a comment

(required)

Aucun trackbacks pour l'instant

» «

Mes projets (Open Source)

Data Filter Lib ToasterLib

Autres

tutorial flex tutorial flex AFCS livres AS3 Flex

Blogoliste