GWT: widget de árbol

Introducción

los Treewidget representa un widget de árbol jerárquico estándar. El árbol contiene una jerarquía de TreeItems que el usuario puede abrir, cerrar y seleccionar.

Declaración de clase

A continuación se muestra la declaración de com.google.gwt.user.client.ui.Tree clase -

public class Tree
   extends Widget
      implements HasWidgets, SourcesTreeEvents, HasFocus,
         HasAnimation, HasAllKeyHandlers, HasAllFocusHandlers, 
            HasSelectionHandlers<TreeItem>, HasOpenHandlers<TreeItem>, 
               HasCloseHandlers<TreeItem>, SourcesMouseEvents, HasAllMouseHandlers

Reglas de estilo CSS

Las siguientes reglas de estilo CSS predeterminadas se aplicarán a todo el widget de árbol. Puede anularlo según sus requisitos.

.gwt-Tree {}

.gwt-TreeItem {}

.gwt-TreeItem-selected {}

Constructores de clases

No Señor. Constructor y descripción
1

Tree()

Construye un árbol vacío.
2

Tree(TreeImages images)

Construye un árbol que usa el paquete de imágenes especificado para las imágenes.
3

Tree(TreeImages images, boolean useLeafImages)

Construye un árbol que usa el paquete de imágenes especificado para las imágenes.

Métodos de clase

No Señor. Nombre y descripción de la función
1

void add(Widget widget)

Agrega el widget como elemento de árbol raíz.
2

void addFocusListener(FocusListener listener)

Agrega una interfaz de escucha para recibir eventos del mouse.
3

TreeItem addItem(java.lang.String itemText)

Agrega un elemento de árbol simple que contiene el texto especificado.
4

void addItem(TreeItem item)

Agrega un elemento al nivel de raíz de este árbol.
5

TreeItem addItem(Widget widget)

Agrega un nuevo elemento de árbol que contiene el widget especificado.
6

void addKeyboardListener(KeyboardListener listener)

Agrega una interfaz de escucha para recibir eventos de teclado.
7

void addMouseListener(MouseListener listener)
8

void addTreeListener(TreeListener listener)

Agrega una interfaz de escucha para recibir eventos de árbol.
9

void clear()

Borra todos los elementos del árbol del árbol actual.
10

protected void doAttachChildren()

Si un widget implementa HasWidgets, debe anular este método y llamar a onAttach () para cada uno de sus widgets secundarios.
11

protected void doDetachChildren()

Si un widget implementa HasWidgets, debe anular este método y llamar a onDetach () para cada uno de sus widgets secundarios.
12

void ensureSelectedItemVisible()

Asegura que el elemento seleccionado actualmente sea visible, abriendo sus padres y desplazándose por el árbol según sea necesario.
13

java.lang.String getImageBase()

Obsoleto. Use Tree (TreeImages), ya que proporciona una forma más eficiente y manejable de suministrar un conjunto de imágenes que se utilizarán dentro de un árbol.
14

TreeItem getItem(int index)

Obtiene el elemento de árbol de nivel superior en el índice especificado.
15

int getItemCount()

Obtiene el número de elementos contenidos en la raíz de este árbol.
dieciséis

TreeItem getSelectedItem()

Obtiene el elemento seleccionado actualmente.
17

int getTabIndex()

Obtiene la posición del widget en el índice de la pestaña.
18

boolean isAnimationEnabled()
19

protected boolean isKeyboardNavigationEnabled(TreeItem currentItem)

Indica si la navegación por teclado está habilitada para el árbol y para un elemento de árbol determinado.
20

java.util.Iterator<Widget> iterator()

Obtiene un iterador para los widgets contenidos.
21

void onBrowserEvent(Event event)

Se activa cada vez que se recibe un evento del navegador.
22

protected void onEnsureDebugId(java.lang.String baseID)

Elementos afectados: -root = La raíz TreeItem.
23

protected void onLoad()

Este método se llama inmediatamente después de que un widget se adjunta al documento del navegador.
24

boolean remove(Widget w)

Elimina un widget secundario.
25

void removeFocusListener(FocusListener listener)

Elimina una interfaz de escucha agregada anteriormente.
26

void removeItem(TreeItem item)

Elimina un elemento del nivel raíz de este árbol.
27

void removeItems()

Elimina todos los elementos del nivel raíz de este árbol.
28

void removeKeyboardListener(KeyboardListener listener)

Elimina una interfaz de escucha agregada anteriormente.
29

void removeTreeListener(TreeListener listener)

Elimina una interfaz de escucha agregada anteriormente.
30

void setAccessKey(char key)

Establece la 'clave de acceso' del widget.
31

void setAnimationEnabled(boolean enable)

Habilita o deshabilita las animaciones.
32

void setFocus(boolean focus)

Enfoque / desenfoque explícitamente este widget.
33

void setImageBase(java.lang.String baseUrl)

Obsoleto. Use Tree (TreeImages), ya que proporciona una forma más eficiente y manejable de suministrar un conjunto de imágenes que se utilizarán dentro de un árbol.
34

void setSelectedItem(TreeItem item)

Selecciona un elemento específico.
35

void setSelectedItem(TreeItem item, boolean fireEvents)

Selecciona un elemento específico.
36

void setTabIndex(int index)

Establece la posición del widget en el índice de la pestaña.
37

java.util.Iterator<TreeItem> treeItemIterator()

Iterador de elementos de árbol.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

  • com.google.gwt.user.client.ui.UIObject

  • com.google.gwt.user.client.ui.Widget

  • java.lang.Object

Ejemplo de widget de árbol

Este ejemplo lo llevará a través de sencillos pasos para mostrar el uso de un widget de árbol en GWT. Siga los siguientes pasos para actualizar la aplicación GWT que creamos en GWT - Capítulo Crear aplicación -

Paso Descripción
1 Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint como se explica en el capítulo GWT - Crear aplicación .
2 Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html y HelloWorld.java como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3 Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

A continuación se muestra el contenido del archivo de hoja de estilo modificado war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

.gwt-Label {
   font-weight: bold;
   color: maroon;
}

.gwt-Tree .gwt-TreeItem {
   padding: 1px 0px;
   margin: 0px;
   white-space: nowrap;
   cursor: hand;
   cursor: pointer;
}

.gwt-Tree .gwt-TreeItem-selected {
  background: #ebeff9;
}

A continuación se muestra el contenido del archivo de host HTML modificado war/HelloWorld.html.

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>Tree Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Tengamos el siguiente contenido del archivo Java src/com.tutorialspoint/HelloWorld.java que demostrará el uso del widget Tree.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.logical.shared.SelectionEvent;
import com.google.gwt.event.logical.shared.SelectionHandler;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Tree;
import com.google.gwt.user.client.ui.TreeItem;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      //create a label
      final Label labelMessage = new Label();
      labelMessage.setWidth("300");

      // Create a root tree item as department
      TreeItem department = new TreeItem("Department");

      //create other tree items as department names
      TreeItem salesDepartment = new TreeItem("Sales");
      TreeItem marketingDepartment = new TreeItem("Marketing");
      TreeItem manufacturingDepartment = new TreeItem("Manufacturing");

      //create other tree items as employees
      TreeItem employee1 = new TreeItem("Robert");
      TreeItem employee2 = new TreeItem("Joe");
      TreeItem employee3 = new TreeItem("Chris");

      //add employees to sales department
      salesDepartment.addItem(employee1);
      salesDepartment.addItem(employee2);
      salesDepartment.addItem(employee3);

      //create other tree items as employees
      TreeItem employee4 = new TreeItem("Mona");
      TreeItem employee5 = new TreeItem("Tena");	   

      //add employees to marketing department
      marketingDepartment.addItem(employee4);
      marketingDepartment.addItem(employee5);	    

      //create other tree items as employees
      TreeItem employee6 = new TreeItem("Rener");
      TreeItem employee7 = new TreeItem("Linda");

      //add employees to sales department
      manufacturingDepartment.addItem(employee6);
      manufacturingDepartment.addItem(employee7);

      //add departments to department item
      department.addItem(salesDepartment);
      department.addItem(marketingDepartment);
      department.addItem(manufacturingDepartment);

      //create the tree
      Tree tree = new Tree();

      //add root item to the tree
      tree.addItem(department);	   

      tree.addSelectionHandler(new SelectionHandlerL<TreeItem>() {
         @Override
         public void onSelection(SelectionEvent<TreeItem> event) {
            labelMessage.setText("Selected Value: "
            + event.getSelectedItem().getText());
         }
      });

      // Add text boxes to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.setSpacing(10);
      panel.add(tree);
      panel.add(labelMessage);

      //add the tree to the root panel
      RootPanel.get("gwtContainer").add(panel);
   }	
}

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo de desarrollo como hicimos en el capítulo GWT - Crear aplicación . Si todo está bien con su aplicación, esto producirá el siguiente resultado:

Al seleccionar cualquier valor en el árbol, se actualizará un mensaje debajo del árbol que muestra el valor seleccionado.