Grid
介绍 (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) 具有请求大小的网格构造函数。 |
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.iowiki包下创建一个名为HelloWorld的项目，如GWT - Create Application一章中所述。 |
| 2 | 修改HelloWorld.gwt.xml ， HelloWorld.css ， HelloWorld.html和HelloWorld.java ，如下所述。 保持其余文件不变。 |
| 3 | 编译并运行应用程序以验证实现的逻辑的结果。 |
以下是修改后的模块描述符src/com.iowiki/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.iowiki.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.iowiki/HelloWorld.java ，它将演示Grid小部件的使用。
package com.iowiki.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.iowiki.com/images/gwt-mini.png"));
}
}
DecoratorPanel decoratorPanel = new DecoratorPanel();
decoratorPanel.add(grid);
// Add the widgets to the root panel.
RootPanel.get().add(decoratorPanel);
}
}
一旦准备好完成所有更改，让我们像在GWT - 创建应用程序章节中那样在开发模式下编译和运行应用程序 。 如果您的应用程序一切正常，这将产生以下结果 -
