GWT - Widget CellTree

introduction

le CellTree widget représente une vue d'un arbre.

Déclaration de classe

Voici la déclaration pour com.google.gwt.user.cellview.client.CellTree classe -

public class CellTree
   extends AbstractCellTree
      implements HasAnimation, Focusable

Constructeurs de classe

N ° Sr. Constructeur et description
1

CellTree(TreeViewModel viewModel, T rootValue)

Construisez un nouveau CellTree.

2

CellTree(TreeViewModel viewModel, T rootValue, CellTree.Resources resources)

Construisez un nouveau CellTree.

Méthodes de classe

N ° Sr. Nom de la fonction et description
1

protected char getAccessKey()

Obtenez la clé d'accès.

2

CellTree.NodeAnimation getAnimation()

Obtenez l'animation utilisée pour ouvrir et fermer les nœuds dans cette arborescence si les animations sont activées.

3

int getDefaultNodeSize()

Obtenez le nombre maximum d'enfants par défaut à afficher sous chaque nœud d'arborescence.

4

TreeNode getRootTreeNode()

Obtenez le TreeNode racine.

5

int getTabIndex()

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

6

boolean isAnimationEnabled()

Renvoie true si les animations sont activées, false sinon.

sept

protected void onBlur()

Appelé lorsque le nœud sélectionné au clavier perd le focus.

8

void onBrowserEvent(Event event)

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

9

protected void onFocus()

Appelé lorsque le nœud sélectionné au clavier obtient le focus.

dix

void setAccessKey(char key)

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

11

void setAnimation(CellTree.NodeAnimation animation)

Définissez l'animation utilisée pour ouvrir et fermer les nœuds dans cette arborescence.

12

void setAnimationEnabled(boolean enable)

Activez ou désactivez les animations.

13

void setDefaultNodeSize(int defaultNodeSize)

Définissez le nombre d'enfants par défaut à afficher sous chaque nœud enfant.

14

void setFocus(boolean focused)

Focalisez / détachez explicitement ce widget.

15

void setTabIndex(int index)

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

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

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

  • com.google.gwt.user.cellview.client.AbstractCellTree

  • java.lang.Object

Exemple de widget CellTree

Cet exemple vous guidera à travers des étapes simples pour montrer l'utilisation d'un widget CellTree 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;
}

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>CellTree 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 CellTree.

package com.tutorialspoint.client;

import java.util.ArrayList;
import java.util.List;

import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.cell.client.Cell;
import com.google.gwt.cell.client.TextCell;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.user.cellview.client.CellTree;
import com.google.gwt.user.cellview.client.
HasKeyboardSelectionPolicy.KeyboardSelectionPolicy;
import com.google.gwt.user.cellview.client.TreeNode;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.view.client.ListDataProvider;
import com.google.gwt.view.client.SingleSelectionModel;
import com.google.gwt.view.client.TreeViewModel;

public class HelloWorld implements EntryPoint {

   /**
    * A list of songs.
    */
   
   private static class Playlist {
     private final String name;
     private final List<String> songs = new ArrayList<String>();

     public Playlist(String name) {
       this.name = name;
     }

      /**
       * Add a song to the playlist.
       * 
       * @param name the name of the song
       */
      
      public void addSong(String name) {
         songs.add(name);
      }

      public String getName() {
         return name;
      }

      /**
       * Return the list of songs in the playlist.
       */
      
      public List<String> getSongs() {
         return songs;
      }
   }

   /**
    * A composer of classical music.
    */
   
   private static class Composer {
      private final String name;
      private final List<Playlist> playlists = new ArrayList<Playlist>();

      public Composer(String name) {
         this.name = name;
      }

      /**
       * Add a playlist to the composer.
       * 
       * @param playlist the playlist to add
       */
      
      public Playlist addPlaylist(Playlist playlist) {   
         playlists.add(playlist);
         return playlist;
      }

      public String getName() {
         return name;
      }

      /**
       * Return the rockin' playlist for this composer.
       */
      
      public List<Playlist> getPlaylists() {
         return playlists;
      }
   }

   /**
    * The model that defines the nodes in the tree.
    */
   private static class CustomTreeModel implements TreeViewModel {

   private final List<Composer> composers;

   /**
    * This selection model is shared across all leaf nodes. 
    * A selection model can also be shared across all nodes 
    * in the tree, or each set of child nodes can have 
    * its own instance. This gives you flexibility to 
    * determine how nodes are selected.
    */
   private final SingleSelectionModel<String> selectionModel 
   = new SingleSelectionModel<String>();

      public CustomTreeModel() {
         // Create a database of information.
         composers = new ArrayList<Composer>();

         // Add compositions by Beethoven.
         {
            Composer beethoven = new Composer("Beethoven");
            composers.add(beethoven);
   
            Playlist concertos = beethoven.addPlaylist(
            new Playlist("Concertos"));
            concertos.addSong("No. 1 - C");
            concertos.addSong("No. 2 - B-Flat Major");
            concertos.addSong("No. 3 - C Minor");
            concertos.addSong("No. 4 - G Major");
            concertos.addSong("No. 5 - E-Flat Major");

            Playlist quartets = beethoven.addPlaylist(
            new Playlist("Quartets"));
            quartets.addSong("Six String Quartets");
            quartets.addSong("Three String Quartets");
            quartets.addSong("Grosse Fugue for String Quartets");

            Playlist sonatas = beethoven.addPlaylist(
            new Playlist("Sonatas"));
            sonatas.addSong("Sonata in A Minor");
            sonatas.addSong("Sonata in F Major");

            Playlist symphonies = beethoven.addPlaylist(
            new Playlist("Symphonies"));
            symphonies.addSong("No. 2 - D Major");
            symphonies.addSong("No. 2 - D Major");
            symphonies.addSong("No. 3 - E-Flat Major");
            symphonies.addSong("No. 4 - B-Flat Major");
            symphonies.addSong("No. 5 - C Minor");
            symphonies.addSong("No. 6 - F Major");
            symphonies.addSong("No. 7 - A Major");
            symphonies.addSong("No. 8 - F Major");
            symphonies.addSong("No. 9 - D Minor");
         }

         // Add compositions by Brahms.
         {
            Composer brahms = new Composer("Brahms");
            composers.add(brahms);
            Playlist concertos = brahms.addPlaylist(
            new Playlist("Concertos"));
            concertos.addSong("Violin Concerto");
            concertos.addSong("Double Concerto - A Minor");
            concertos.addSong("Piano Concerto No. 1 - D Minor");
            concertos.addSong("Piano Concerto No. 2 - B-Flat Major");

            Playlist quartets = brahms.addPlaylist(
            new Playlist("Quartets"));
            quartets.addSong("Piano Quartet No. 1 - G Minor");
            quartets.addSong("Piano Quartet No. 2 - A Major");
            quartets.addSong("Piano Quartet No. 3 - C Minor");
            quartets.addSong("String Quartet No. 3 - B-Flat Minor");

            Playlist sonatas = brahms.addPlaylist(
            new Playlist("Sonatas"));
            sonatas.addSong("Two Sonatas for Clarinet - F Minor");
            sonatas.addSong("Two Sonatas for Clarinet - E-Flat Major");

            Playlist symphonies = brahms.addPlaylist(
            new Playlist("Symphonies"));
            symphonies.addSong("No. 1 - C Minor");
            symphonies.addSong("No. 2 - D Minor");
            symphonies.addSong("No. 3 - F Major");
            symphonies.addSong("No. 4 - E Minor");
         }

         // Add compositions by Mozart.
         {
            Composer mozart = new Composer("Mozart");
            composers.add(mozart);
            Playlist concertos = mozart.addPlaylist(
            new Playlist("Concertos"));
            concertos.addSong("Piano Concerto No. 12");
            concertos.addSong("Piano Concerto No. 17");
            concertos.addSong("Clarinet Concerto");
            concertos.addSong("Violin Concerto No. 5");
            concertos.addSong("Violin Concerto No. 4");
         }
      }

      /**
       * Get the {@link NodeInfo} that provides the children of the 
       * specified value.
       */
      
      public <T> NodeInfo<?> getNodeInfo(T value) {
         if (value == null) {
            // LEVEL 0.
            // We passed null as the root value. Return the composers.

            // Create a data provider that contains the list of composers.
            ListDataProvider<Composer> dataProvider 
            = new ListDataProvider<HelloWorld.Composer>(
            composers);

            // Create a cell to display a composer.
            Cell<HelloWorld.Composer> cell 
            = new AbstractCell<HelloWorld.Composer>() {
               @Override
               public void render(Composer value, Object key,
               SafeHtmlBuilder sb) {
                  if (value != null) {
                	 sb.appendHtmlConstant("    "); 
                     sb.appendEscaped(value.getName());
                  }				
               }
            };

            // Return a node info that pairs the data provider and the cell.
            return new DefaultNodeInfo<Composer>(dataProvider, cell);
         } else if (value instanceof Composer) {
            
            // LEVEL 1.
            // We want the children of the composer. Return the playlists.
            ListDataProvider<HelloWorld.Playlist> dataProvider
            = new ListDataProvider<HelloWorld.Playlist>(
            ((Composer) value).getPlaylists());
            Cell<HelloWorld.Playlist> cell = 
            new AbstractCell<HelloWorld.Playlist>() {
               @Override
               public void render(Playlist value, Object key, SafeHtmlBuilder sb) {
                  if (value != null) {        
                     sb.appendHtmlConstant("    "); 
                     sb.appendEscaped(value.getName());
                  }
               }
            };
            return new DefaultNodeInfo<Playlist>(dataProvider, cell);
         } else if (value instanceof Playlist) {
            // LEVEL 2 - LEAF.
            // We want the children of the playlist. Return the songs.
            ListDataProvider<String> dataProvider 
            = new ListDataProvider<String>(
            ((Playlist) value).getSongs());

            // Use the shared selection model.
            return new DefaultNodeInfo<String>(dataProvider, new TextCell(),
            selectionModel, null);
         }

         return null;
      }

      /**
       * Check if the specified value represents a leaf node. 
       * Leaf nodes cannot be opened.
       */
      public boolean isLeaf(Object value) {
      
      // The leaf nodes are the songs, which are Strings.
      if (value instanceof String) {
         return true;
      }
      
      return false;
      }
   }

   public void onModuleLoad() {
      
      // Create a model for the tree.
      TreeViewModel model = new CustomTreeModel();
      //Get CellTree style using its BasicResources	   
      //CellTree.Resources res = GWT.create(CellTree.BasicResources.class);
      
      /*
       * Create the tree using the model. We use <code>null</code> 
       * as the default value of the root node. The default value will 
       * be passed to CustomTreeModel#getNodeInfo();
       */
      CellTree tree = new CellTree(model, null);
   
      tree.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.ENABLED);

      // Open the first playlist by default.
      TreeNode rootNode = tree.getRootTreeNode();
      TreeNode firstPlaylist = rootNode.setChildOpen(0, true);
      firstPlaylist.setChildOpen(0, true);

      VerticalPanel panel = new VerticalPanel();
      panel.setBorderWidth(1);	    
      panel.setWidth("300");
      panel.add(tree);
	    

      // Add the widgets to the root panel.
      RootPanel.get().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 -