GWT - Widget FlexTable

introduzione

Il FlexTablewidget rappresenta una tabella flessibile che crea celle su richiesta. Può essere frastagliato (ovvero, ogni riga può contenere un numero diverso di celle) e le singole celle possono essere impostate per estendersi su più righe o colonne.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per com.google.gwt.user.client.ui.FlowPanel classe -

public class FlexTable
   extends HTMLTable

Costruttori di classi

Sr.No.	Costruttore e descrizione
1	FlexTable() Costruttore per Flex Table vuoto.

Metodi di classe

Sr.No.	Nome e descrizione della funzione
1	void addCell(int row) Aggiunge una cella alla riga specificata.
2	int getCellCount(int row) Ottiene il numero di celle su una determinata riga.
3	FlexTable.FlexCellFormatter getFlexCellFormatter() Ottiene esplicitamente il FlexTable.FlexCellFormatter.
4	int getRowCount() Ottiene il numero di righe.
5	void insertCell(int beforeRow, int beforeColumn) Inserisce una cella in FlexTable.
6	int insertRow(int beforeRow) Inserisce una riga in FlexTable.
7	protected void prepareCell(int row, int column) Assicurati che la cella esista.
8	protected void prepareRow(int row) Assicurati che la riga esista.
9	void removeAllRows() Rimuovi tutte le righe in questa tabella.
10	void removeCell(int row, int col) Rimuove la cella specificata dalla tabella.
11	void removeCells(int row, int column, int num) Rimuove un numero di celle da una riga nella tabella.
12	void removeRow(int row) Rimuove la riga specificata dalla tabella.

Metodi ereditati

Questa classe eredita i metodi dalle seguenti classi:

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

Esempio di widget FlexTable

Questo esempio ti guiderà attraverso semplici passaggi per mostrare l'utilizzo di un widget FlexTable in GWT. Segui i seguenti passaggi per aggiornare l'applicazione GWT che abbiamo creato in GWT - Capitolo Crea applicazione -

Passo	Descrizione
1	Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint come spiegato nel capitolo GWT - Crea applicazione .
2	Modifica HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java come spiegato di seguito. Mantieni il resto dei file invariato.
3	Compilare ed eseguire l'applicazione per verificare il risultato della logica implementata.

Di seguito è riportato il contenuto del descrittore del modulo modificato 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>

Di seguito è riportato il contenuto del file del foglio di stile modificato 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;
}

Di seguito è riportato il contenuto del file host HTML modificato 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>

Cerchiamo di avere il seguente contenuto del file Java src/com.tutorialspoint/HelloWorld.java che dimostrerà l'uso del 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);
      }
   }
}

Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità sviluppo come abbiamo fatto nel capitolo GWT - Crea applicazione . Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato:

↰ Previous page