GWT - Widget FlowPanel

introduction

le FlowPanel widget représente un panneau qui met en forme ses widgets enfants en utilisant le comportement de mise en page HTML par défaut.

Déclaration de classe

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

public class FlowPanel
   extends ComplexPanel
      implements InsertPanel.ForIsWidget

Constructeurs de classe

N ° Sr.	Constructeur et description
1	FlowPanel() Constructeur pour le panneau de flux vide.

Méthodes de classe

N ° Sr.	Nom et description de la fonction
1	void add(Widget w) Ajoute un nouveau widget enfant au panneau.
2	void clear() Supprime tous les widgets enfants.
3	void insert(IsWidget w, int beforeIndex)
4	void insert(Widget w, int beforeIndex) Insère un widget avant l'index 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.ComplexPanel
java.lang.Object

Exemple de widget FlowPanel

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

.gwt-CheckBox {
   margin: 10px;	
}

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>FlowPanel 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 FlowPanel.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {

   public void onModuleLoad() {
      // Create a flow panel			
      FlowPanel flowPanel = new FlowPanel();

      // Add CheckBoxes to flow Panel
      for(int i = 1;  i <= 10; i++){
         CheckBox checkBox = new CheckBox("Item" + i);
         flowPanel.add(checkBox);
      }

      DecoratorPanel decoratorPanel = new DecoratorPanel();
      decoratorPanel.setWidth("500");
      decoratorPanel.add(flowPanel);

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