Gwt-flextable-widget

提供：Dev Guides
移動先:案内、検索

GWT-FlexTableウィジェット

前書き

*FlexTable* ウィジェットは、オンデマンドでセルを作成する柔軟なテーブルを表します。 ギザギザにすることができ（つまり、各行に異なる数のセルを含めることができます）、個々のセルを複数の行または列にまたがるように設定できます。

クラス宣言

以下は、 com.google.gwt.user.client.ui.FlowPanel クラスの宣言です- 

public class FlexTable
   extends HTMLTable

クラスコンストラクター

Sr.No. Constructor & Description
1

FlexTable()

空のFlexテーブルのコンストラクター。

クラスメソッド

Sr.No. Function name & Description
1

void addCell(int row)

指定した行にセルを追加します。

2

int getCellCount(int row)

特定の行のセルの数を取得します。

3

FlexTable.FlexCellFormatter getFlexCellFormatter()

FlexTable.FlexCellFormatterを明示的に取得します。

4

int getRowCount()

行数を取得します。

5

void insertCell(int beforeRow, int beforeColumn)

セルをFlexTableに挿入します。

6

int insertRow(int beforeRow)

FlexTableに行を挿入します。

7

protected void prepareCell(int row, int column)

セルが存在することを確認してください。

8

protected void prepareRow(int row)

行が存在することを確認してください。

9

void removeAllRows()

このテーブルのすべての行を削除します。

10

void removeCell(int row, int col)

指定されたセルをテーブルから削除します。

11

void removeCells(int row, int column, int num)

テーブルの行から多数のセルを削除します。

12

void removeRow(int row)

指定された行をテーブルから削除します。

継承されるメソッド

このクラスは、次のクラスからメソッドを継承します-

  • 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

FlexTableウィジェットの例

この例では、GWTでのFlexTableウィジェットの使用法を示す簡単な手順を紹介します。 次の手順に従って、_GWTで作成したGWTアプリケーションを更新します-アプリケーションの作成_の章-

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

以下は、変更されたモジュール記述子 src/com.finddevguides/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.finddevguides.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;
}
.flexTable td {
   border: 1px solid #BBBBBB;
   padding: 3px;
}

.flexTable-buttonPanel td {
   border: 0px;
}

.fixedWidthButton {
   width: 150px;
}

以下は、変更されたHTMLホストファイル war/HelloWorldl の内容です。 

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>FlexTable Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

FlexTableウィジェットの使用方法を示すJavaファイル src/com.finddevguides/HelloWorld.java の内容を見てみましょう。 

package com.finddevguides.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.FlexTable.FlexCellFormatter;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {

   public void onModuleLoad() {
     //Create a Flex Table
      final FlexTable flexTable = new FlexTable();
      FlexCellFormatter cellFormatter = flexTable.getFlexCellFormatter();
      flexTable.addStyleName("flexTable");
      flexTable.setWidth("32em");
      flexTable.setCellSpacing(5);
      flexTable.setCellPadding(3);

     //Add some text
      cellFormatter.setHorizontalAlignment(
      0, 1, HasHorizontalAlignment.ALIGN_LEFT);
      flexTable.setHTML(0, 0, "This is a FlexTable that supports"
         +" <b>colspans</b> and <b>rowspans</b>."
         +" You can use it to format your page"
         +" or as a special purpose table.");
      cellFormatter.setColSpan(0, 0, 2);

     //Add a button that will add more rows to the table
      Button addRowButton = new Button("Add a Row");
      addRowButton.addClickHandler(new ClickHandler() {
         @Override
         public void onClick(ClickEvent event) {
            addRow(flexTable);
         }
      });

      addRowButton.addStyleName("fixedWidthButton");

     //Add a button that will add more rows to the table
      Button removeRowButton = new Button("Remove a Row");
      removeRowButton.addClickHandler(new ClickHandler() {
         @Override
         public void onClick(ClickEvent event) {
            removeRow(flexTable);
         }
      });

      removeRowButton.addStyleName("fixedWidthButton");

      VerticalPanel buttonPanel = new VerticalPanel();
      buttonPanel.setStyleName("flexTable-buttonPanel");
      buttonPanel.add(addRowButton);
      buttonPanel.add(removeRowButton);
      flexTable.setWidget(0, 1, buttonPanel);
      cellFormatter.setVerticalAlignment(0, 1,
      HasVerticalAlignment.ALIGN_TOP);

     //Add two rows to start
      addRow(flexTable);
      addRow(flexTable);

     //Add the widgets to the root panel.
      RootPanel.get().add(flexTable);
   }

  /**
 *Add a row to the flex table.
   */
   private void addRow(FlexTable flexTable) {
      int numRows = flexTable.getRowCount();
      flexTable.setWidget(numRows, 0,
      new Image("http://www.finddevguides.com/images/gwt-mini.png"));
      flexTable.setWidget(numRows, 1,
      new Image("http://www.finddevguides.com/images/gwt-mini.png"));
      flexTable.getFlexCellFormatter().setRowSpan(0, 1, numRows + 1);
   }

  /**
 *Remove a row from the flex table.
   */
   private void removeRow(FlexTable flexTable) {
      int numRows = flexTable.getRowCount();
      if (numRows > 1) {
         flexTable.removeRow(numRows - 1);
         flexTable.getFlexCellFormatter().setRowSpan(0, 1, numRows - 1);
      }
   }
}

すべての変更が完了したら、link：/gwt/gwt_create_application [GWT-アプリケーションの作成]の章で行ったように、アプリケーションをコンパイルして開発モードで実行します。 すべてがあなたのアプリケーションでうまくいけば、これは次の結果を生成します-

GWT FlexTableウィジェット

「https://www.finddevguides.com/index.php?title=Gwt-flextable-widget&oldid=14815」から取得
Powered by MediaWiki