GWT - Widget Árvore

Introdução

o Treewidget representa um widget de árvore hierárquica padrão. A árvore contém uma hierarquia de TreeItems que o usuário pode abrir, fechar e selecionar.

Declaração de Classe

A seguir está a declaração para com.google.gwt.user.client.ui.Tree classe -

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

Regras de estilo CSS

As seguintes regras de estilo CSS padrão serão aplicadas a todos os widgets Árvore. Você pode substituí-lo de acordo com seus requisitos.

.gwt-Tree {}

.gwt-TreeItem {}

.gwt-TreeItem-selected {}

Construtores de classe

Sr. Não. Construtor e descrição
1

Tree()

Constrói uma árvore vazia.
2

Tree(TreeImages images)

Constrói uma árvore que usa o pacote de imagens especificado para imagens.
3

Tree(TreeImages images, boolean useLeafImages)

Constrói uma árvore que usa o pacote de imagens especificado para imagens.

Métodos de aula

Sr. Não. Nome e descrição da função
1

void add(Widget widget)

Adiciona o widget como um item da árvore raiz.
2

void addFocusListener(FocusListener listener)

Adiciona uma interface de ouvinte para receber eventos de mouse.
3

TreeItem addItem(java.lang.String itemText)

Adiciona um item de árvore simples contendo o texto especificado.
4

void addItem(TreeItem item)

Adiciona um item ao nível raiz desta árvore.
5

TreeItem addItem(Widget widget)

Adiciona um novo item de árvore contendo o widget especificado.
6

void addKeyboardListener(KeyboardListener listener)

Adiciona uma interface de ouvinte para receber eventos de teclado.
7

void addMouseListener(MouseListener listener)
8

void addTreeListener(TreeListener listener)

Adiciona uma interface de ouvinte para receber eventos de árvore.
9

void clear()

Limpa todos os itens da árvore da árvore atual.
10

protected void doAttachChildren()

Se um widget implementa HasWidgets, ele deve sobrescrever esse método e chamar onAttach () para cada um de seus widgets filhos.
11

protected void doDetachChildren()

Se um widget implementa HasWidgets, ele deve substituir esse método e chamar onDetach () para cada um de seus widgets filhos.
12

void ensureSelectedItemVisible()

Garante que o item atualmente selecionado esteja visível, abrindo seus pais e rolando a árvore conforme necessário.
13

java.lang.String getImageBase()

Descontinuada. Use Tree (TreeImages), pois fornece uma maneira mais eficiente e gerenciável de fornecer um conjunto de imagens a serem usadas em uma árvore.
14

TreeItem getItem(int index)

Obtém o item da árvore de nível superior no índice especificado.
15

int getItemCount()

Obtém o número de itens contidos na raiz desta árvore.
16

TreeItem getSelectedItem()

Obtém o item atualmente selecionado.
17

int getTabIndex()

Obtém a posição do widget no índice da guia.
18

boolean isAnimationEnabled()
19

protected boolean isKeyboardNavigationEnabled(TreeItem currentItem)

Indica se a navegação do teclado está habilitada para a Árvore e para um determinado TreeItem.
20

java.util.Iterator<Widget> iterator()

Obtém um iterador para os widgets contidos.
21

void onBrowserEvent(Event event)

Disparado sempre que um evento do navegador é recebido.
22

protected void onEnsureDebugId(java.lang.String baseID)

Elementos afetados: -root = O TreeItem raiz.
23

protected void onLoad()

Este método é chamado imediatamente após um widget ser anexado ao documento do navegador.
24

boolean remove(Widget w)

Remove um widget filho.
25

void removeFocusListener(FocusListener listener)

Remove uma interface de ouvinte adicionada anteriormente.
26

void removeItem(TreeItem item)

Remove um item do nível raiz desta árvore.
27

void removeItems()

Remove todos os itens do nível raiz desta árvore.
28

void removeKeyboardListener(KeyboardListener listener)

Remove uma interface de ouvinte adicionada anteriormente.
29

void removeTreeListener(TreeListener listener)

Remove uma interface de ouvinte adicionada anteriormente.
30

void setAccessKey(char key)

Define a 'chave de acesso' do widget.
31

void setAnimationEnabled(boolean enable)

Ative ou desative as animações.
32

void setFocus(boolean focus)

Focar / desfocar explicitamente este widget.
33

void setImageBase(java.lang.String baseUrl)

Descontinuada. Use Tree (TreeImages), pois fornece uma maneira mais eficiente e gerenciável de fornecer um conjunto de imagens a serem usadas em uma árvore.
34

void setSelectedItem(TreeItem item)

Seleciona um item especificado.
35

void setSelectedItem(TreeItem item, boolean fireEvents)

Seleciona um item especificado.
36

void setTabIndex(int index)

Define a posição do widget no índice da guia.
37

java.util.Iterator<TreeItem> treeItemIterator()

Iterador de itens da árvore.

Métodos herdados

Esta classe herda métodos das seguintes classes -

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

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

  • java.lang.Object

Exemplo de widget de árvore

Este exemplo o levará por etapas simples para mostrar o uso de um widget de árvore no GWT. Siga as etapas a seguir para atualizar o aplicativo GWT que criamos no GWT - capítulo Criar aplicativo -

Degrau Descrição
1 Crie um projeto com o nome HelloWorld em um pacote com.tutorialspoint conforme explicado no capítulo GWT - Criar aplicativo .
2 Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
3 Compile e execute o aplicativo para verificar o resultado da lógica implementada.

A seguir está o conteúdo do descritor do 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 seguir está o conteúdo do arquivo de folha 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 seguir está o conteúdo do arquivo 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>

Vamos ter o seguinte conteúdo do arquivo Java src/com.tutorialspoint/HelloWorld.java que demonstrará o uso do 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);
   }	
}

Quando você estiver pronto com todas as alterações feitas, vamos compilar e rodar o aplicativo em modo de desenvolvimento como fizemos no capítulo GWT - Criar Aplicativo . Se tudo estiver bem com sua aplicação, isso produzirá o seguinte resultado -

Selecionar qualquer valor na árvore atualizará uma mensagem abaixo da árvore exibindo o valor selecionado.