Flex - Contrôle des arbres

introduction

Le contrôle Tree affiche les données hiérarchiques organisées sous forme d'arborescence extensible.

Déclaration de classe

Voici la déclaration pour mx.controls.Tree classe -

public class Tree 
   extends List
      implements IIMESupport

Propriétés publiques

Sr.Non	Propriété et description
1	dataDescriptor : mx.controls.treeClasses:ITreeDataDescriptor Renvoie le ITreeDataDescriptor actuel.
2	dataProvider : Object [override] Un objet contenant les données à afficher.
3	dragMoveEnabled : Boolean [override] Indique que les éléments peuvent être déplacés au lieu d'être simplement copiés à partir du contrôle Tree dans le cadre d'une opération de glisser-déposer.
4	firstVisibleItem : Object L'élément actuellement affiché dans la rangée supérieure de l'arborescence.
5	hasRoot : Boolean [lecture seule] Indique que le dataProvider actuel a un élément racine; par exemple, un seul nœud supérieur dans une structure hiérarchique.
6	itemIcons : Object Un objet qui spécifie les icônes des éléments.
sept	maxHorizontalScrollPosition : Number [override] Valeur maximale de la propriété maxHorizontalScrollPosition pour le contrôle Tree.
8	openItems : Object Les éléments qui ont été ouverts ou mis ouverts.
9	showRoot : Boolean Définit la visibilité de l'élément racine.

Méthodes publiques

Sr.Non	Méthode et description
1	Tree() Constructeur.
2	expandChildrenOf(item:Object, open:Boolean):void Ouvre ou ferme tous les éléments de l'arborescence sous l'élément spécifié.
3	expandItem(item:Object, open:Boolean, animate:Boolean = false, dispatchEvent:Boolean = false, cause:Event = null):void Ouvre ou ferme un élément de branche.
4	getParentItem(item:Object):* Renvoie le parent connu d'un élément enfant.
5	isItemOpen(item:Object):Boolean Renvoie true si la branche d'élément spécifiée est ouverte (affiche ses enfants).
6	setItemIcon(item:Object, iconID:Class, iconID2:Class):void Définit l'icône associée pour l'élément.

Méthodes protégées

Sr.Non	Méthode et description
1	dragCompleteHandler(event:DragEvent):void [override] Gère les événements DragEvent.DRAG_COMPLETE.
2	dragDropHandler(event:DragEvent):void [override] Gère les événements DragEvent.DRAG_DROP.
3	initListData(item:Object, treeListData:mx.controls.treeClasses:TreeListData):void Initialise un objet TreeListData utilisé par le moteur de rendu d'élément d'arborescence.
4	makeListData(data:Object, uid:String, rowNum:int):BaseListData [override] Crée une nouvelle instance de TreeListData et remplit les champs en fonction de l'élément de fournisseur de données d'entrée.

Événements

Sr.Non	Description de l'évenement
1	itemClose Distribué lorsqu'une branche est fermée ou réduite.
2	itemOpen Distribué lorsqu'une succursale est ouverte ou développée.
3	itemOpening Envoyé lors de l'ouverture ou de la fermeture d'une succursale.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

mx.controls.List
mx.controls.listClasess.ListBase
mx.core.ScrollControlBase
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Exemple de contrôle d'arbre flexible

Suivons les étapes suivantes pour vérifier l'utilisation du contrôle d'arborescence dans une application Flex en créant une application de test -

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2	Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />	
   <fx:Script>
      <![CDATA[
         [Bindable]
         public var selectedNode:XML;

         // Event handler for the Tree control change event.
         public function treeChanged(event:Event):void {
            selectedNode = Tree(event.target).selectedItem as XML;
         }
      ]]>
   </fx:Script>
   
   <fx:Declarations>
      <fx:XMLList id = "treeData">
         <node label = "E-Mail Box">
            <node label = "Inbox">
            <node label = "Client" />
               <node label = "Product" />
               <node label = "Personal" />
            </node>
            
            <node label = "Sent Items">
               <node label = "Professional" />
               <node label = "Personal" />
            </node>
            
            <node label = "Deleted Items" />
            <node label = "Spam" />
         </node>    
      </fx:XMLList>
   </fx:Declarations>
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Complex Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
            
         <s:Panel id = "treePanel" title = "Using Tree" 
            width = "500" height = "300">
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />	
            </s:layout>
               
            <mx:Tree id = "tree" width = "95%" height = "75%" 
               labelField = "@label" showRoot = "false" 
               dataProvider = "{treeData}" change = "treeChanged(event)" />
            <s:TextArea height = "20%" width = "95%" 
               text = "Selected Item: {[email protected]}" />
         </s:Panel>		
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ ]

↰ Previous page