GWT - 网格部件

介绍

Grid 部件表示一个矩形网格，可以在其单元格中包含文本、html 或子部件。它必须明确调整为所需的行列数。

类声明

以下是 com.google.gwt.user.client.ui.Grid 类的声明：

public class Grid
   extends HTMLTable

类构造函数

序号	构造函数 & 描述
1	Grid() Grid 的构造函数。
2	Grid(int rows, int columns) 具有请求大小的 Grid 的构造函数。

序号

构造函数 & 描述

Grid()

Grid 的构造函数。

Grid(int rows, int columns)

具有请求大小的 Grid 的构造函数。

类方法

序号	函数名称 & 描述
1	boolean clearCell(int row, int column) 用单个空格替换指定单元格的内容。
2	protected Element createCell() 创建一个新的空单元格。
3	int getCellCount(int row) 返回列数。
4	int getColumnCount() 获取此网格中的列数。
5	int getRowCount() 返回行数。
6	int insertRow(int beforeRow) 在表格中插入新行。
7	protected void prepareCell(int row, int column) 检查单元格是否是表格中的有效单元格。
8	protected void prepareColumn(int column) 检查列索引是否有效。
9	protected void prepareRow(int row) 检查行索引是否有效。
10	void removeRow(int row) 从表格中删除指定行。
11	void resize(int rows, int columns) 调整网格大小。
12	void resizeColumns(int columns) 将网格调整为指定的列数。
13	void resizeRows(int rows) 将网格调整为指定行数。

继承的方法

此类继承自以下类的方法：

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 部件示例

此示例将引导您完成简单的步骤，以展示在 GWT 中使用 Grid 部件的方法。按照以下步骤更新我们在GWT - 创建应用章节中创建的 GWT 应用：

步骤	描述
1	在com.tutorialspoint包下创建一个名为HelloWorld的项目，如GWT - 创建应用章节中所述。
2	修改HelloWorld.gwt.xml、HelloWorld.css、HelloWorld.html和HelloWorld.java，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证实现逻辑的结果。

以下是修改后的模块描述符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>

以下是修改后的样式表文件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;
}

以下是修改后的 HTML 宿主文件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>

让我们在Java文件src/com.tutorialspoint/HelloWorld.java中包含以下内容，它将演示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("https://tutorialspoint.com/images/gwt-mini.png"));
         }
      }

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

完成所有更改后，让我们像在GWT - 创建应用章节中一样，在开发模式下编译并运行应用程序。如果您的应用程序一切正常，这将产生以下结果：

gwt_layout_panels.htm

打印页面