Grid

优质

小牛编辑

124浏览

2023-12-01

介绍 (Introduction)

Grid小部件表示一个矩形网格，可以在其单元格中包含text，html或子Widget。必须将其显式调整为所需的行数和列数。

Class 声明 (Class Declaration)

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

public class Grid
   extends HTMLTable

类构造函数 (Class Constructors)

Sr.No.	构造函数和描述
1	Grid() Grid的构造函数。
2	Grid(int rows, int columns) 具有请求大小的网格构造函数。

Sr.No.

构造函数和描述

Grid()

Grid的构造函数。

Grid(int rows, int columns)

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

Class Methods

Sr.No.	功能名称和描述
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) 将网格大小调整为指定的行数。

方法继承 (Methods Inherited)

该类继承以下类中的方法 -

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

网格小部件示例

此示例将指导您完成在GWT中显示Grid Widget的使用的简单步骤。按照以下步骤更新我们在GWT - Create Application的GWT应用程序GWT - Create Application章节 -

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

以下是修改后的模块描述符src/com.

/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..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.

/HelloWorld.java ，它将演示Grid小部件的使用。

package com..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..com/images/gwt-mini.png"));
         }
      }
      DecoratorPanel decoratorPanel = new DecoratorPanel();
      decoratorPanel.add(grid);
      // Add the widgets to the root panel.
      RootPanel.get().add(decoratorPanel);
   }
}

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