GWT - Grid Widget

introduzione

Il Gridwidget rappresenta una griglia rettangolare che può contenere testo, html o un widget figlio all'interno delle sue celle. Deve essere ridimensionato esplicitamente al numero desiderato di righe e colonne.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per com.google.gwt.user.client.ui.Grid classe -

public class Grid
   extends HTMLTable

Costruttori di classi

Sr.No.	Costruttore e descrizione
1	Grid() Costruttore per Grid.
2	Grid(int rows, int columns) Constructor per Grid con le dimensioni richieste.

Metodi di classe

Sr.No.	Nome e descrizione della funzione
1	boolean clearCell(int row, int column) Sostituisce il contenuto della cella specificata con un singolo spazio.
2	protected Element createCell() Crea una nuova cella vuota.
3	int getCellCount(int row) Restituisce il numero di colonne.
4	int getColumnCount() Ottiene il numero di colonne in questa griglia.
5	int getRowCount() Restituisce il numero di righe.
6	int insertRow(int beforeRow) Inserisce una nuova riga nella tabella.
7	protected void prepareCell(int row, int column) Verifica che una cella sia una cella valida nella tabella.
8	protected void prepareColumn(int column) Verifica che l'indice della colonna sia valido.
9	protected void prepareRow(int row) Verifica che l'indice di riga sia valido.
10	void removeRow(int row) Rimuove la riga specificata dalla tabella.
11	void resize(int rows, int columns) Ridimensiona la griglia.
12	void resizeColumns(int columns) Ridimensiona la griglia al numero di colonne specificato.
13	void resizeRows(int rows) Ridimensiona la griglia al numero di righe specificato.

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.Panel
com.google.gwt.user.client.ui.HTMLTable
java.lang.Object

Esempio di widget di griglia

Questo esempio ti guiderà attraverso semplici passaggi per mostrare l'utilizzo di un Grid Widget 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 invariato il resto dei file.
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>Grid 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 Grid.

package com.tutorialspoint.client;


import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {

   public void onModuleLoad() {
      // Create a grid
      Grid grid = new Grid(2, 2);

      // Add images to the grid
      int numRows = grid.getRowCount();
      int numColumns = grid.getColumnCount();
      for (int row = 0; row < numRows; row++) {
         for (int col = 0; col < numColumns; col++) {
            grid.setWidget(row, col, 
            new Image("http://www.tutorialspoint.com/images/gwt-mini.png"));
         }
      }

      DecoratorPanel decoratorPanel = new DecoratorPanel();
      decoratorPanel.add(grid);
      // Add the widgets to the root panel.
      RootPanel.get().add(decoratorPanel);
   }
}

Una volta che sei pronto con tutte le modifiche fatte, 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:

↰ Previous page