Flex - Controllo dell'albero

introduzione

Il controllo Tree visualizza i dati gerarchici disposti come un albero espandibile.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per mx.controls.Tree classe -

public class Tree 
   extends List
      implements IIMESupport

Proprietà pubbliche

Suor n	Proprietà e descrizione
1	dataDescriptor : mx.controls.treeClasses:ITreeDataDescriptor Restituisce l'oggetto ITreeDataDescriptor corrente.
2	dataProvider : Object [override] Un oggetto che contiene i dati da visualizzare.
3	dragMoveEnabled : Boolean [override] Indica che gli elementi possono essere spostati invece che semplicemente copiati dal controllo Struttura ad albero come parte di un'operazione di trascinamento.
4	firstVisibleItem : Object L'elemento attualmente visualizzato nella riga superiore dell'albero.
5	hasRoot : Boolean [sola lettura] Indica che il dataProvider corrente ha un elemento radice; ad esempio, un singolo nodo superiore in una struttura gerarchica.
6	itemIcons : Object Un oggetto che specifica le icone degli elementi.
7	maxHorizontalScrollPosition : Number [override] Il valore massimo per la proprietà maxHorizontalScrollPosition per il controllo Tree.
8	openItems : Object Gli elementi che sono stati aperti o impostati aperti.
9	showRoot : Boolean Imposta la visibilità dell'elemento radice.

Metodi pubblici

Suor n	Metodo e descrizione
1	Tree() Costruttore.
2	expandChildrenOf(item:Object, open:Boolean):void Apre o chiude tutti gli elementi della struttura sotto l'elemento specificato.
3	expandItem(item:Object, open:Boolean, animate:Boolean = false, dispatchEvent:Boolean = false, cause:Event = null):void Apre o chiude un elemento della filiale.
4	getParentItem(item:Object):* Restituisce l'elemento padre noto di un elemento figlio.
5	isItemOpen(item:Object):Boolean Restituisce vero se il ramo dell'elemento specificato è aperto (mostra i suoi figli).
6	setItemIcon(item:Object, iconID:Class, iconID2:Class):void Imposta l'icona associata per l'elemento.

Metodi protetti

Suor n	Metodo e descrizione
1	dragCompleteHandler(event:DragEvent):void [override] Gestisce gli eventi DragEvent.DRAG_COMPLETE.
2	dragDropHandler(event:DragEvent):void [override] Gestisce gli eventi DragEvent.DRAG_DROP.
3	initListData(item:Object, treeListData:mx.controls.treeClasses:TreeListData):void Inizializza un oggetto TreeListData utilizzato dal renderer degli elementi della struttura ad albero.
4	makeListData(data:Object, uid:String, rowNum:int):BaseListData [override] Crea una nuova istanza TreeListData e popola i campi in base all'elemento del fornitore di dati di input.

Eventi

Suor n	Descrizione dell'evento
1	itemClose Inviato quando un ramo viene chiuso o compresso.
2	itemOpen Inviato quando una filiale viene aperta o espansa.
3	itemOpening Inviato quando viene avviata l'apertura o la chiusura di una filiale.

Metodi ereditati

Questa classe eredita i metodi dalle seguenti classi:

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

Esempio di controllo dell'albero flessibile

Seguiamo i seguenti passaggi per verificare l'utilizzo del controllo albero in un'applicazione Flex creando un'applicazione di test:

Passo	Descrizione
1	Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione .
2	Modifica HelloWorld.mxml come spiegato di seguito. Mantieni invariato il resto dei file.
3	Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.

Di seguito è riportato il contenuto del file mxml modificato 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>

Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]

↰ Previous page