Flex - Control de árboles

Introducción

El control de árbol muestra datos jerárquicos organizados como un árbol expandible.

Declaración de clase

A continuación se muestra la declaración de mx.controls.Tree clase -

public class Tree 
   extends List
      implements IIMESupport

Propiedades publicas

No Señor	Descripción de propiedad
1	dataDescriptor : mx.controls.treeClasses:ITreeDataDescriptor Devuelve el ITreeDataDescriptor actual.
2	dataProvider : Object [anular] Un objeto que contiene los datos que se mostrarán.
3	dragMoveEnabled : Boolean [anular] Indica que los elementos se pueden mover en lugar de simplemente copiar desde el control Árbol como parte de una operación de arrastrar y soltar.
4	firstVisibleItem : Object El elemento que se muestra actualmente en la fila superior del árbol.
5	hasRoot : Boolean [solo lectura] Indica que el dataProvider actual tiene un elemento raíz; por ejemplo, un único nodo superior en una estructura jerárquica.
6	itemIcons : Object Un objeto que especifica los iconos de los elementos.
7	maxHorizontalScrollPosition : Number [anular] El valor máximo de la propiedad maxHorizontalScrollPosition para el control Tree.
8	openItems : Object Los elementos que se han abierto o configurado abiertos.
9	showRoot : Boolean Establece la visibilidad del elemento raíz.

Métodos públicos

No Señor	Método y descripción
1	Tree() Constructor.
2	expandChildrenOf(item:Object, open:Boolean):void Abre o cierra todos los elementos del árbol debajo del elemento especificado.
3	expandItem(item:Object, open:Boolean, animate:Boolean = false, dispatchEvent:Boolean = false, cause:Event = null):void Abre o cierra un artículo de sucursal.
4	getParentItem(item:Object):* Devuelve el padre conocido de un elemento secundario.
5	isItemOpen(item:Object):Boolean Devuelve verdadero si la rama del elemento especificado está abierta (muestra sus hijos).
6	setItemIcon(item:Object, iconID:Class, iconID2:Class):void Establece el icono asociado al artículo.

Métodos protegidos

No Señor	Método y descripción
1	dragCompleteHandler(event:DragEvent):void [override] Maneja eventos DragEvent.DRAG_COMPLETE.
2	dragDropHandler(event:DragEvent):void [anular] Controla los eventos DragEvent.DRAG_DROP.
3	initListData(item:Object, treeListData:mx.controls.treeClasses:TreeListData):void Inicializa un objeto TreeListData que utiliza el renderizador de elementos de árbol.
4	makeListData(data:Object, uid:String, rowNum:int):BaseListData [override] Crea una nueva instancia de TreeListData y completa los campos según el elemento del proveedor de datos de entrada.

Eventos

No Señor	Descripción del evento
1	itemClose Se envía cuando una sucursal está cerrada o colapsada.
2	itemOpen Se envía cuando se abre o expande una sucursal.
3	itemOpening Se envía cuando se inicia la apertura o el cierre de una sucursal.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

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

Ejemplo de control de árbol flexible

Sigamos los siguientes pasos para verificar el uso del control de árbol en una aplicación Flex creando una aplicación de prueba:

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación .
2	Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

A continuación se muestra el contenido del archivo mxml modificado 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 vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ ]

↰ Previous page