GWT - Widget FlexTable

introduction

le FlexTablewidget représente un tableau flexible qui crée des cellules à la demande. Il peut être irrégulier (c'est-à-dire que chaque ligne peut contenir un nombre différent de cellules) et des cellules individuelles peuvent être définies pour s'étendre sur plusieurs lignes ou colonnes.

Déclaration de classe

Voici la déclaration pour com.google.gwt.user.client.ui.FlowPanel classe -

public class FlexTable
   extends HTMLTable

Constructeurs de classe

N ° Sr. Constructeur et description
1

FlexTable()

Constructeur pour table Flex vide.

Méthodes de classe

N ° Sr. Nom de la fonction et description
1

void addCell(int row)

Ajoute une cellule à la ligne spécifiée.
2

int getCellCount(int row)

Obtient le nombre de cellules sur une ligne donnée.

3

FlexTable.FlexCellFormatter getFlexCellFormatter()

Obtient explicitement FlexTable.FlexCellFormatter.

4

int getRowCount()

Obtient le nombre de lignes.
5

void insertCell(int beforeRow, int beforeColumn)

Insère une cellule dans le FlexTable.
6

int insertRow(int beforeRow)

Insère une ligne dans le FlexTable.
sept

protected void prepareCell(int row, int column)

Assurez-vous que la cellule existe.
8

protected void prepareRow(int row)

Assurez-vous que la ligne existe.
9

void removeAllRows()

Supprimez toutes les lignes de ce tableau.
dix

void removeCell(int row, int col)

Supprime la cellule spécifiée du tableau.

11

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

Supprime un certain nombre de cellules d'une ligne du tableau.

12

void removeRow(int row)

Supprime la ligne spécifiée de la table.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

  • 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

Exemple de widget FlexTable

Cet exemple vous guidera à travers des étapes simples pour montrer l'utilisation d'un widget FlexTable dans GWT. Suivez les étapes suivantes pour mettre à jour l'application GWT que nous avons créée dans GWT - Chapitre Créer une application -

Étape La description
1 Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint comme expliqué dans le chapitre GWT - Créer une application .
2 Modifiez HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html et HelloWorld.java comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vérifier le résultat de la logique implémentée.

Voici le contenu du descripteur de module modifié 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>

Voici le contenu du fichier de feuille de style modifié 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;
}

Voici le contenu du fichier hôte HTML modifié 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>FlexTable Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Laissez-nous avoir le contenu suivant du fichier Java src/com.tutorialspoint/HelloWorld.java qui démontrera l'utilisation du widget FlexTable.

package com.tutorialspoint.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.tutorialspoint.com/images/gwt-mini.png"));
      flexTable.setWidget(numRows, 1, 
      new Image("http://www.tutorialspoint.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);
      }
   }
}

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode développement comme nous l'avons fait dans le chapitre GWT - Créer une application . Si tout va bien avec votre application, cela produira le résultat suivant -