GWT - Widget de grille

introduction

le Gridwidget représente une grille rectangulaire qui peut contenir du texte, du html ou un widget enfant dans ses cellules. Il doit être redimensionné explicitement au nombre souhaité de lignes et de colonnes.

Déclaration de classe

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

public class Grid
   extends HTMLTable

Constructeurs de classe

N ° Sr.	Constructeur et description
1	Grid() Constructeur pour Grid.
2	Grid(int rows, int columns) Constructeur pour Grid avec la taille demandée.

Méthodes de classe

N ° Sr.	Nom de la fonction et description
1	boolean clearCell(int row, int column) Remplace le contenu de la cellule spécifiée par un seul espace.
2	protected Element createCell() Crée une nouvelle cellule vide.
3	int getCellCount(int row) Renvoie le nombre de colonnes.
4	int getColumnCount() Obtient le nombre de colonnes de cette grille.
5	int getRowCount() Renvoie le nombre de lignes.
6	int insertRow(int beforeRow) Insère une nouvelle ligne dans le tableau.
sept	protected void prepareCell(int row, int column) Vérifie qu'une cellule est une cellule valide dans le tableau.
8	protected void prepareColumn(int column) Vérifie que l'index de colonne est valide.
9	protected void prepareRow(int row) Vérifie que l'index de ligne est valide.
dix	void removeRow(int row) Supprime la ligne spécifiée de la table.
11	void resize(int rows, int columns) Redimensionne la grille.
12	void resizeColumns(int columns) Redimensionne la grille au nombre de colonnes spécifié.
13	void resizeRows(int rows) Redimensionne la grille au nombre de lignes spécifié.

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 de grille

Cet exemple vous guidera à travers des étapes simples pour montrer l'utilisation d'un widget Grid 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;
}

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>Grid 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 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("http://www.tutorialspoint.com/images/gwt-mini.png"));
         }
      }

      DecoratorPanel decoratorPanel = new DecoratorPanel();
      decoratorPanel.add(grid);
      // Add the widgets to the root panel.
      RootPanel.get().add(decoratorPanel);
   }
}

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 -

↰ Previous page