GWT - Grid Widget

Advertisements


Introduction

The Grid widget represents a rectangular grid that can contain text, html, or a child Widget within its cells. It must be resized explicitly to the desired number of rows and columns.

Class declaration

Following is the declaration for com.google.gwt.user.client.ui.Grid class:

public class Grid
   extends HTMLTable

Class constructors

S.N.Constructor & Description
1Grid()
Constructor for Grid.
2Grid(int rows, int columns)
Constructor for Grid with requested size.

Class methods

S.N.Function name & Description
1boolean clearCell(int row, int column)
Replaces the contents of the specified cell with a single space.
2protected Element createCell()
Creates a new, empty cell.
3int getCellCount(int row)
Return number of columns.
4int getColumnCount()
Gets the number of columns in this grid.
5int getRowCount()
Return number of rows.
6int insertRow(int beforeRow)
Inserts a new row into the table.
7protected void prepareCell(int row, int column)
Checks that a cell is a valid cell in the table.
8protected void prepareColumn(int column)
Checks that the column index is valid.
9protected void prepareRow(int row)
Checks that the row index is valid.
10void removeRow(int row)
Removes the specified row from the table.
11void resize(int rows, int columns)
Resizes the grid.
12void resizeColumns(int columns)
Resizes the grid to the specified number of columns.
13void resizeRows(int rows)
Resizes the grid to the specified number of rows.

Methods inherited

This class inherits methods from the following 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

Grid Widget Example

This example will take you through simple steps to show usage of a Grid Widget in GWT. Follow the following steps to update the GWT application we created in GWT - Create Application chapter:

StepDescription
1Create a project with a name HelloWorld under a package com.tutorialspoint as explained in the GWT - Create Application chapter.
2Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.java as explained below. Keep rest of the files unchanged.
3Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptor 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>

Following is the content of the modified Style Sheet file 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;
}

Following is the content of the modified HTML host file 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>

Let us have following content of Java file src/com.tutorialspoint/HelloWorld.java which will demonstrate use of Grid widget.

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

Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, this will produce following result:

GWT Grid Widget

Advertisements
Advertisements