GWT - Widget d'arbre

introduction

le Treewidget représente un widget d'arborescence hiérarchique standard. L'arborescence contient une hiérarchie de TreeItems que l'utilisateur peut ouvrir, fermer et sélectionner.

Déclaration de classe

Voici la déclaration pour 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

Règles de style CSS

Les règles de style CSS par défaut suivantes seront appliquées à tous les widgets d'arborescence. Vous pouvez le remplacer selon vos besoins.

.gwt-Tree {}

.gwt-TreeItem {}

.gwt-TreeItem-selected {}

Constructeurs de classe

N ° Sr. Constructeur et description
1

Tree()

Construit un arbre vide.
2

Tree(TreeImages images)

Construit une arborescence qui utilise le groupe d'images spécifié pour les images.
3

Tree(TreeImages images, boolean useLeafImages)

Construit une arborescence qui utilise le groupe d'images spécifié pour les images.

Méthodes de classe

N ° Sr. Nom et description de la fonction
1

void add(Widget widget)

Ajoute le widget en tant qu'élément d'arborescence racine.
2

void addFocusListener(FocusListener listener)

Ajoute une interface d'écoute pour recevoir les événements de souris.
3

TreeItem addItem(java.lang.String itemText)

Ajoute un élément d'arborescence simple contenant le texte spécifié.
4

void addItem(TreeItem item)

Ajoute un élément au niveau racine de cette arborescence.
5

TreeItem addItem(Widget widget)

Ajoute un nouvel élément d'arborescence contenant le widget spécifié.
6

void addKeyboardListener(KeyboardListener listener)

Ajoute une interface d'écoute pour recevoir les événements du clavier.
sept

void addMouseListener(MouseListener listener)
8

void addTreeListener(TreeListener listener)

Ajoute une interface d'écoute pour recevoir les événements de l'arborescence.
9

void clear()

Efface tous les éléments de l'arborescence actuelle.
dix

protected void doAttachChildren()

Si un widget implémente HasWidgets, il doit remplacer cette méthode et appeler onAttach () pour chacun de ses widgets enfants.
11

protected void doDetachChildren()

Si un widget implémente HasWidgets, il doit remplacer cette méthode et appeler onDetach () pour chacun de ses widgets enfants.
12

void ensureSelectedItemVisible()

Garantit que l'élément actuellement sélectionné est visible, en ouvrant ses parents et en faisant défiler l'arborescence si nécessaire.
13

java.lang.String getImageBase()

Obsolète. Utilisez Tree (TreeImages) car il fournit un moyen plus efficace et gérable de fournir un ensemble d'images à utiliser dans un arbre.
14

TreeItem getItem(int index)

Obtient l'élément d'arborescence de niveau supérieur à l'index spécifié.
15

int getItemCount()

Obtient le nombre d'éléments contenus à la racine de cette arborescence.
16

TreeItem getSelectedItem()

Obtient l'élément actuellement sélectionné.
17

int getTabIndex()

Obtient la position du widget dans l'index de l'onglet.
18

boolean isAnimationEnabled()
19

protected boolean isKeyboardNavigationEnabled(TreeItem currentItem)

Indique si la navigation au clavier est activée pour l'arborescence et pour un TreeItem donné.
20

java.util.Iterator<Widget> iterator()

Obtient un itérateur pour les widgets contenus.
21

void onBrowserEvent(Event event)

Lancé chaque fois qu'un événement de navigateur est reçu.
22

protected void onEnsureDebugId(java.lang.String baseID)

Éléments affectés: -root = L'élément d'arbre racine.
23

protected void onLoad()

Cette méthode est appelée immédiatement après qu'un widget est attaché au document du navigateur.
24

boolean remove(Widget w)

Supprime un widget enfant.
25

void removeFocusListener(FocusListener listener)

Supprime une interface d'écoute précédemment ajoutée.
26

void removeItem(TreeItem item)

Supprime un élément du niveau racine de cette arborescence.
27

void removeItems()

Supprime tous les éléments du niveau racine de cette arborescence.
28

void removeKeyboardListener(KeyboardListener listener)

Supprime une interface d'écoute précédemment ajoutée.
29

void removeTreeListener(TreeListener listener)

Supprime une interface d'écoute précédemment ajoutée.
30

void setAccessKey(char key)

Définit la «clé d'accès» du widget.
31

void setAnimationEnabled(boolean enable)

Activez ou désactivez les animations.
32

void setFocus(boolean focus)

Focalisez / détachez explicitement ce widget.
33

void setImageBase(java.lang.String baseUrl)

Obsolète. Utilisez Tree (TreeImages) car il fournit un moyen plus efficace et gérable de fournir un ensemble d'images à utiliser dans un arbre.
34

void setSelectedItem(TreeItem item)

Sélectionne un élément spécifié.
35

void setSelectedItem(TreeItem item, boolean fireEvents)

Sélectionne un élément spécifié.
36

void setTabIndex(int index)

Définit la position du widget dans l'index de l'onglet.
37

java.util.Iterator<TreeItem> treeItemIterator()

Itérateur d'éléments d'arbre.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

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

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

  • java.lang.Object

Exemple de widget d'arbre

Cet exemple vous guidera à travers des étapes simples pour montrer l'utilisation d'un widget d'arbre dans GWT. Suivez les étapes suivantes pour mettre à jour l'application GWT que nous avons créée dans GWT - Chapitre Créer une application -

Étape La description
1 Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint comme expliqué dans le chapitre GWT - Créer une application .
2 Modifiez HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html et HelloWorld.java comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vérifier le résultat de la logique implémentée.

Voici le contenu du descripteur de module modifié 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>

Voici le contenu du fichier de feuille de style modifié 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;
}

Voici le contenu du fichier hôte HTML modifié 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>

Laissez-nous avoir le contenu suivant du fichier Java src/com.tutorialspoint/HelloWorld.java qui démontrera l'utilisation du 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);
   }	
}

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode développement comme nous l'avons fait dans le chapitre GWT - Créer une application . Si tout va bien avec votre application, cela produira le résultat suivant -

La sélection d'une valeur quelconque dans l'arborescence mettra à jour un message sous l'arborescence affichant la valeur sélectionnée.