GWT - Widget CellTree

introduzione

Il CellTree widget rappresenta una vista di un albero.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per com.google.gwt.user.cellview.client.CellTree classe -

public class CellTree
   extends AbstractCellTree
      implements HasAnimation, Focusable

Costruttori di classi

Sr.No. Costruttore e descrizione
1

CellTree(TreeViewModel viewModel, T rootValue)

Costruisci un nuovo CellTree.
2

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

Costruisci un nuovo CellTree.

Metodi di classe

Sr.No. Nome e descrizione della funzione
1

protected char getAccessKey()

Ottieni la chiave di accesso.
2

CellTree.NodeAnimation getAnimation()

Ottieni l'animazione utilizzata per aprire e chiudere i nodi in questo albero se le animazioni sono abilitate.
3

int getDefaultNodeSize()

Ottieni il numero massimo predefinito di elementi figlio da visualizzare sotto ogni nodo della struttura ad albero.
4

TreeNode getRootTreeNode()

Ottieni la radice TreeNode.
5

int getTabIndex()

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

boolean isAnimationEnabled()

Restituisce true se le animazioni sono abilitate, false in caso contrario.
7

protected void onBlur()

Chiamato quando il nodo selezionato dalla tastiera perde il focus.
8

void onBrowserEvent(Event event)

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

protected void onFocus()

Chiamato quando il nodo selezionato dalla tastiera ottiene il focus.
10

void setAccessKey(char key)

Imposta la "chiave di accesso" del widget.
11

void setAnimation(CellTree.NodeAnimation animation)

Imposta l'animazione utilizzata per aprire e chiudere i nodi in questo albero.
12

void setAnimationEnabled(boolean enable)

Abilita o disabilita le animazioni.
13

void setDefaultNodeSize(int defaultNodeSize)

Imposta il numero predefinito di figli da visualizzare sotto ogni nodo figlio.
14

void setFocus(boolean focused)

Metti a fuoco / sfoca esplicitamente questo widget.
15

void setTabIndex(int index)

Imposta la posizione del widget nell'indice della scheda.

Metodi ereditati

Questa classe eredita i metodi dalle seguenti classi:

  • 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

Esempio di widget CellTree

Questo esempio ti guiderà attraverso semplici passaggi per mostrare l'utilizzo di un widget CellTree 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;
}

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>CellTree 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 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);
   }
}

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: