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

列印頁面