GWT - Widget CellList

introduzione

Il CellList widget rappresenta un elenco di celle a colonna singola.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per com.google.gwt.user.cellview.client.CellList<T> classe -

public class CellList<T>
   extends AbstractHasData<T>

Costruttori di classi

Sr.No. Costruttore e descrizione
1

CellList(Cell<T> cell)

Costruisci un nuovo CellList.
2

CellList(Cell<T> cell, CellList.Resources resources)

Costruisci un nuovo CellList con il CellList.Resources specificato.
3

CellList(Cell<T> cell, CellList.Resources resources, ProvidesKey<T> keyProvider)

Costruisci un nuovo CellList con il CellList.Resources e il provider di chiavi specificati.
4

CellList(Cell<T> cell, ProvidesKey<T> keyProvider)

Costruisci un nuovo CellList con il fornitore di chiavi specificato.

Metodi di classe

Sr.No. Nome e descrizione della funzione
1

protected boolean dependsOnSelection()

Verificare se le celle nella vista dipendono dallo stato di selezione.
2

protected void doSelection(Event event, T value, int indexOnPage)

Deprecato. utilizzare invece Abstract HasData.add Cell Preview Handler (com.google.gwt.view.client.Cell Preview Event.Handler).
3

protected void fireEventToCell(Cell.Context context, Event event, Element parent, T value)

Spara un evento alla cella.
4

protected Cell<T> getCell()

Restituisce la cella utilizzata per il rendering di ogni elemento.
5

protected Element getCellParent(Element item)

Ottieni l'elemento genitore che avvolge la cella dall'elemento dell'elenco.
6

protected Element getChildContainer()

Restituisce l'elemento che contiene le celle renderizzate.
7

SafeHtml getEmptyListMessage()

Ottieni il messaggio che viene visualizzato quando non ci sono dati.
8

protected Element getKeyboardSelectedElement()

Ottieni l'elemento che ha la selezione della tastiera.
9

Element getRowElement(int indexOnPage)

Ottieni l'elemento per l'indice specificato.
10

protected boolean isKeyboardNavigationSuppressed()

Controlla se la navigazione da tastiera viene soppressa, ad esempio quando l'utente modifica una cella.
11

protected void onBlur()

Chiamato quando il widget è sfocato.
12

protected void onBrowserEvent2(Event event)

Chiamato dopo il completamento di AbstractHasData.onBrowserEvent (Event).
13

protected void onFocus()

Chiamato quando il widget è attivo.
14

protected void renderRowValues(SafeHtmlBuilder sb, java.util.List<T> values, int start, SelectionModel<? super T> selectionModel)

Renderizza tutti i valori di riga nel SafeHtmlBuilder specificato.
15

protected boolean resetFocusOnCell()

Reimposta lo stato attivo sulla cella attualmente attiva.
16

void setEmptyListMessage(SafeHtml html)

Imposta il messaggio da visualizzare quando non ci sono dati.
17

protected void setKeyboardSelected(int index, boolean selected, boolean stealFocus)

Aggiorna un elemento per riflettere il suo stato selezionato dalla tastiera.
18

protected void setSelected(Element elem, boolean selected)

Deprecato. questo metodo non viene mai chiamato da AbstractHasData, visualizza gli stili selezionati in renderRowValues ​​(SafeHtmlBuilder, List, int, SelectionModel)
19

void setValueUpdater(ValueUpdater<T> valueUpdater)

Imposta il valore di aggiornamento da utilizzare quando le celle modificano gli elementi.

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.cellview.client.AbstractHasData

  • java.lang.Object

Esempio di widget di CellList

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

package com.tutorialspoint.client;

import java.util.Arrays;
import java.util.List;

import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.cell.client.Cell;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.user.cellview.client.CellList;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.view.client.ProvidesKey;
import com.google.gwt.view.client.SelectionModel;
import com.google.gwt.view.client.SingleSelectionModel;

public class HelloWorld implements EntryPoint {
   /**
    * A simple data type that represents a contact.
    */

   private static class Contact {
      private static int nextId = 0;
      private final int id;
      private String name;

      public Contact(String name) {
         nextId++;
         this.id = nextId;
         this.name = name;
      }
   }

   /**
    * A custom {@link Cell} used to render a {@link Contact}.
    */
   
   private static class ContactCell extends AbstractCell<Contact> {
      @Override
      public void render(Contact value, Object key, SafeHtmlBuilder sb) {
         if (value != null) {
            sb.appendEscaped(value.name);
         }		
      }
   }

   /**
    * The list of data to display.
    */
   
   private static final List<Contact> CONTACTS = Arrays.asList(new Contact(
      "John"), new Contact("Joe"), new Contact("Michael"),
      new Contact("Sarah"), new Contact("George"));

   public void onModuleLoad() {
      /*
       * Define a key provider for a Contact. We use the unique ID 
       * as the key, which allows to maintain selection even if the
       * name changes.
       */
      
      ProvidesKey<Contact> keyProvider = new ProvidesKey<Contact>() {
         public Object getKey(Contact item) {
            // Always do a null check.
            return (item == null) ? null : item.id;
         }
      };

      // Create a CellList using the keyProvider.
      CellList<Contact> cellList = new CellList<Contact>(new ContactCell(),      
      keyProvider);

      // Push data into the CellList.
      cellList.setRowCount(CONTACTS.size(), true);
      cellList.setRowData(0, CONTACTS);

      // Add a selection model using the same keyProvider.
      SelectionModel<Contact> selectionModel 
      = new SingleSelectionModel<Contact>(
      keyProvider);
      cellList.setSelectionModel(selectionModel);

      /*
       * Select a contact. The selectionModel will select based on the 
       * ID because we used a keyProvider.
       */
      Contact sarah = CONTACTS.get(3);
      selectionModel.setSelected(sarah, true);

      // Modify the name of the contact.
      sarah.name = "Sara";

      /*
       * Redraw the CellList. Sarah/Sara will still be selected because we
       * identify her by ID. If we did not use a keyProvider, 
       * Sara would not be selected.
       */
      cellList.redraw();

      VerticalPanel panel = new VerticalPanel();
      panel.setBorderWidth(1);	    
      panel.setWidth("200");
      panel.add(cellList);

      // 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: