GWT: widget de cuadrícula

Introducción

los Gridwidget representa una cuadrícula rectangular que puede contener texto, html o un widget secundario dentro de sus celdas. Debe redimensionarse explícitamente al número deseado de filas y columnas.

Declaración de clase

A continuación se muestra la declaración de com.google.gwt.user.client.ui.Grid clase -

public class Grid
   extends HTMLTable

Constructores de clases

No Señor.	Constructor y descripción
1	Grid() Constructor para Grid.
2	Grid(int rows, int columns) Constructor para Grid con tamaño solicitado.

Métodos de clase

No Señor.	Nombre y descripción de la función
1	boolean clearCell(int row, int column) Reemplaza el contenido de la celda especificada con un solo espacio.
2	protected Element createCell() Crea una celda nueva y vacía.
3	int getCellCount(int row) Devuelve el número de columnas.
4	int getColumnCount() Obtiene el número de columnas de esta cuadrícula.
5	int getRowCount() Devuelve el número de filas.
6	int insertRow(int beforeRow) Inserta una nueva fila en la tabla.
7	protected void prepareCell(int row, int column) Comprueba que una celda sea válida en la tabla.
8	protected void prepareColumn(int column) Comprueba que el índice de la columna sea válido.
9	protected void prepareRow(int row) Comprueba que el índice de fila sea válido.
10	void removeRow(int row) Elimina la fila especificada de la tabla.
11	void resize(int rows, int columns) Cambia el tamaño de la cuadrícula.
12	void resizeColumns(int columns) Cambia el tamaño de la cuadrícula al número especificado de columnas.
13	void resizeRows(int rows) Cambia el tamaño de la cuadrícula al número especificado de filas.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

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

Ejemplo de widget de cuadrícula

Este ejemplo lo llevará a través de pasos simples para mostrar el uso de un widget de cuadrícula en GWT. Siga los siguientes pasos para actualizar la aplicación GWT que creamos en GWT - Capítulo Crear aplicación -

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint como se explica en el capítulo GWT - Crear aplicación .
2	Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html y HelloWorld.java como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado 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>

A continuación se muestra el contenido del archivo de hoja de estilo modificado 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;
}

A continuación se muestra el contenido del archivo de host HTML modificado 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>

Tengamos el siguiente contenido del archivo Java src/com.tutorialspoint/HelloWorld.java que demostrará el 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 vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo de desarrollo como hicimos en el capítulo GWT - Crear aplicación . Si todo está bien con su aplicación, esto producirá el siguiente resultado:

↰ Previous page