GWT - Widget ad albero

introduzione

Il Treewidget rappresenta un widget albero gerarchico standard. L'albero contiene una gerarchia di TreeItems che l'utente può aprire, chiudere e selezionare.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per 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

Regole di stile CSS

Le seguenti regole di stile CSS predefinite verranno applicate a tutto il widget Albero. Puoi sovrascriverlo secondo le tue esigenze.

.gwt-Tree {}

.gwt-TreeItem {}

.gwt-TreeItem-selected {}

Costruttori di classi

Sr.No. Costruttore e descrizione
1

Tree()

Costruisce un albero vuoto.
2

Tree(TreeImages images)

Costruisce un albero che utilizza il bundle di immagini specificato per le immagini.
3

Tree(TreeImages images, boolean useLeafImages)

Costruisce un albero che utilizza il bundle di immagini specificato per le immagini.

Metodi di classe

Sr.No. Nome e descrizione della funzione
1

void add(Widget widget)

Aggiunge il widget come elemento della struttura ad albero principale.
2

void addFocusListener(FocusListener listener)

Aggiunge un'interfaccia listener per ricevere gli eventi del mouse.
3

TreeItem addItem(java.lang.String itemText)

Aggiunge un semplice elemento della struttura ad albero contenente il testo specificato.
4

void addItem(TreeItem item)

Aggiunge un elemento al livello principale di questo albero.
5

TreeItem addItem(Widget widget)

Aggiunge un nuovo elemento della struttura ad albero contenente il widget specificato.
6

void addKeyboardListener(KeyboardListener listener)

Aggiunge un'interfaccia di ascolto per ricevere gli eventi della tastiera.
7

void addMouseListener(MouseListener listener)
8

void addTreeListener(TreeListener listener)

Aggiunge un'interfaccia listener per ricevere eventi ad albero.
9

void clear()

Cancella tutti gli elementi dell'albero dall'albero corrente.
10

protected void doAttachChildren()

Se un widget implementa HasWidgets, deve sovrascrivere questo metodo e chiamare onAttach () per ciascuno dei suoi widget figlio.
11

protected void doDetachChildren()

Se un widget implementa HasWidgets, deve sovrascrivere questo metodo e chiamare onDetach () per ciascuno dei suoi widget figlio.
12

void ensureSelectedItemVisible()

Assicura che l'elemento attualmente selezionato sia visibile, aprendo i suoi genitori e scorrendo l'albero secondo necessità.
13

java.lang.String getImageBase()

Deprecato. Usa Tree (TreeImages) in quanto fornisce un modo più efficiente e gestibile per fornire un set di immagini da utilizzare all'interno di un albero.
14

TreeItem getItem(int index)

Ottiene l'elemento della struttura ad albero di primo livello in corrispondenza dell'indice specificato.
15

int getItemCount()

Ottiene il numero di elementi contenuti nella radice di questo albero.
16

TreeItem getSelectedItem()

Ottiene l'elemento attualmente selezionato.
17

int getTabIndex()

Ottiene la posizione del widget nell'indice della scheda.
18

boolean isAnimationEnabled()
19

protected boolean isKeyboardNavigationEnabled(TreeItem currentItem)

Indica se la navigazione da tastiera è abilitata per la struttura ad albero e per un determinato oggetto TreeItem.
20

java.util.Iterator<Widget> iterator()

Ottiene un iteratore per i widget contenuti.
21

void onBrowserEvent(Event event)

Attivato ogni volta che viene ricevuto un evento del browser.
22

protected void onEnsureDebugId(java.lang.String baseID)

Elementi interessati: -root = La radice TreeItem.
23

protected void onLoad()

Questo metodo viene chiamato immediatamente dopo che un widget viene allegato al documento del browser.
24

boolean remove(Widget w)

Rimuove un widget figlio.
25

void removeFocusListener(FocusListener listener)

Rimuove un'interfaccia listener aggiunta in precedenza.
26

void removeItem(TreeItem item)

Rimuove un elemento dal livello principale di questo albero.
27

void removeItems()

Rimuove tutti gli elementi dal livello principale di questo albero.
28

void removeKeyboardListener(KeyboardListener listener)

Rimuove un'interfaccia listener aggiunta in precedenza.
29

void removeTreeListener(TreeListener listener)

Rimuove un'interfaccia listener aggiunta in precedenza.
30

void setAccessKey(char key)

Imposta la "chiave di accesso" del widget.
31

void setAnimationEnabled(boolean enable)

Abilita o disabilita le animazioni.
32

void setFocus(boolean focus)

Metti a fuoco / sfoca esplicitamente questo widget.
33

void setImageBase(java.lang.String baseUrl)

Deprecato. Usa Tree (TreeImages) in quanto fornisce un modo più efficiente e gestibile per fornire un set di immagini da utilizzare all'interno di un albero.
34

void setSelectedItem(TreeItem item)

Seleziona un elemento specificato.
35

void setSelectedItem(TreeItem item, boolean fireEvents)

Seleziona un elemento specificato.
36

void setTabIndex(int index)

Imposta la posizione del widget nell'indice della scheda.
37

java.util.Iterator<TreeItem> treeItemIterator()

Iteratore degli elementi dell'albero.

Metodi ereditati

Questa classe eredita i metodi dalle seguenti classi:

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

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

  • java.lang.Object

Esempio di widget albero

Questo esempio ti guiderà attraverso semplici passaggi per mostrare l'utilizzo di un widget albero in GWT. Segui i passaggi seguenti per aggiornare l'applicazione GWT che abbiamo creato in GWT - Capitolo Crea applicazione -

Passo Descrizione
1 Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint come spiegato nel capitolo GWT - Crea applicazione .
2 Modifica HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java come spiegato di seguito. Mantieni il resto dei file invariato.
3 Compilare ed eseguire l'applicazione per verificare il risultato della logica implementata.

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

Di seguito è riportato il contenuto del file del foglio di stile modificato 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;
}

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

Cerchiamo di avere il seguente contenuto del file Java src/com.tutorialspoint/HelloWorld.java che dimostrerà l'uso del widget Albero.

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 volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità sviluppo come abbiamo fatto nel capitolo GWT - Crea applicazione . Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato:

La selezione di un qualsiasi valore nell'albero aggiornerà un messaggio sotto l'albero che mostra il valore selezionato.