GWT - Widget de grade

Introdução

o Gridwidget representa uma grade retangular que pode conter texto, html ou um widget filho em suas células. Deve ser redimensionado explicitamente para o número desejado de linhas e colunas.

Declaração de Classe

A seguir está a declaração para com.google.gwt.user.client.ui.Grid classe -

public class Grid
   extends HTMLTable

Construtores de classe

Sr. Não.	Construtor e descrição
1	Grid() Construtor para Grid.
2	Grid(int rows, int columns) Construtor para grade com tamanho solicitado.

Métodos de aula

Sr. Não.	Nome e descrição da função
1	boolean clearCell(int row, int column) Substitui o conteúdo da célula especificada por um único espaço.
2	protected Element createCell() Cria uma nova célula vazia.
3	int getCellCount(int row) Retorna o número de colunas.
4	int getColumnCount() Obtém o número de colunas nesta grade.
5	int getRowCount() Retorna o número de linhas.
6	int insertRow(int beforeRow) Insere uma nova linha na tabela.
7	protected void prepareCell(int row, int column) Verifica se uma célula é uma célula válida na tabela.
8	protected void prepareColumn(int column) Verifica se o índice da coluna é válido.
9	protected void prepareRow(int row) Verifica se o índice da linha é válido.
10	void removeRow(int row) Remove a linha especificada da tabela.
11	void resize(int rows, int columns) Redimensiona a grade.
12	void resizeColumns(int columns) Redimensiona a grade para o número especificado de colunas.
13	void resizeRows(int rows) Redimensiona a grade para o número especificado de linhas.

Métodos herdados

Esta classe herda métodos das seguintes classes -

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

Exemplo de widget de grade

Este exemplo o levará por etapas simples para mostrar o uso de um widget de grade no GWT. Siga as etapas a seguir para atualizar o aplicativo GWT que criamos no GWT - capítulo Criar aplicativo -

Degrau	Descrição
1	Crie um projeto com o nome HelloWorld em um pacote com.tutorialspoint conforme explicado no capítulo GWT - Criar aplicativo .
2	Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
3	Compile e execute o aplicativo para verificar o resultado da lógica implementada.

A seguir está o conteúdo do descritor do 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 seguir está o conteúdo do arquivo de folha 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 seguir está o conteúdo do arquivo 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>

Vamos ter o seguinte conteúdo do arquivo Java src/com.tutorialspoint/HelloWorld.java que demonstrará o uso do 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);
   }
}

Quando você estiver pronto com todas as alterações feitas, vamos compilar e rodar a aplicação em modo de desenvolvimento como fizemos no capítulo GWT - Criar Aplicação . Se tudo estiver bem com sua aplicação, isso produzirá o seguinte resultado -

↰ Previous page