GWT - Widget DockPanel

introduction

le DockPanel widget représente un panneau qui place ses widgets enfants «ancrés» sur ses bords extérieurs, et permet à son dernier widget de prendre l'espace restant en son centre.

Déclaration de classe

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

@Deprecated
public class DockPanel
   extends CellPanel
      implements HasAlignment

Constructeurs de classe

N ° Sr.	Constructeur et description
1	DockPanel() Constructeur pour DockPanel.

Méthodes de classe

N ° Sr.	Nom et description de la fonction
1	void add(Widget widget, DockPanel. DockLayoutConstant direction) Obsolète. Ajoute un widget au bord spécifié du dock.
2	HasHorizontalAlignment. HorizontalAlignmentConstant getHorizontalAlignment() Obsolète. Obtient l'alignement horizontal.
3	HasVerticalAlignment. VerticalAlignmentConstant getVerticalAlignment() Obsolète. Obtient l'alignement vertical.
4	DockPanel. DockLayoutConstant getWidgetDirection(Widget w) Obsolète. Obtient la direction de mise en page du widget enfant donné.
5	protected void onEnsureDebugId(java.lang. String baseID) Obsolète. DockPanel prend en charge l'ajout de plus d'une cellule dans une direction, donc un entier sera ajouté à la fin de l'ID de débogage.
6	boolean remove(Widget w) Obsolète. Supprime un widget enfant.
sept	void setCellHeight(Widget w, java.lang.String height) Obsolète. Définit la hauteur de la cellule associée au widget donné, par rapport au panneau dans son ensemble.
8	void set Cell Horizontal Alignment(Widget w, Has Horizontal Alignment. Horizontal Alignment Constant align) Obsolète. Définit l'alignement horizontal du widget donné dans sa cellule.
9	void set Cell Vertical Alignment (Widget w, HasVertical Alignment. Vertical Alignment Constant align) Obsolète. Définit l'alignement vertical du widget donné dans sa cellule.
dix	void setCellWidth(Widget w, java.lang.String width) Obsolète. Définit la largeur de la cellule associée au widget donné, liée au panneau dans son ensemble.
11	void set Horizontal Alignment (Has Horizontal Alignment. Horizontal Alignment Constant align) Obsolète. Définit l'alignement horizontal par défaut à utiliser pour les widgets ajoutés à ce panneau.
12	void setVerticalAlignment(HasVerticalAlignment. VerticalAlignmentConstant align) Obsolète. Définit l'alignement vertical par défaut à utiliser pour les widgets ajoutés à ce panneau.

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
com.google.gwt.user.client.ui.CellPanel
java.lang.Object

Exemple de widget DockPanel

Cet exemple vous guidera à travers des étapes simples pour montrer l'utilisation d'un widget DockPanel 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;
}
.dockpanel td {
   border: 1px solid #BBBBBB;
   padding: 3px;
}

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>DockPanel Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Laissez-nous avoir le contenu suivant du fichier Java src/com.tutorialspoint/HelloWorld.java qui illustrera l'utilisation du widget DockPanel.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.ScrollPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {

   public void onModuleLoad() {
      DockPanel dockPanel = new DockPanel();
      dockPanel.setStyleName("dockpanel");
      dockPanel.setSpacing(4);
      dockPanel.setHorizontalAlignment(DockPanel.ALIGN_CENTER);

      // Add text all around
      dockPanel.add(new HTML("This is the first north component."), 
      DockPanel.NORTH);
      dockPanel.add(new HTML("This is the first south component."), 
      DockPanel.SOUTH);
      dockPanel.add(new HTML("This is the east component."), 
      DockPanel.EAST);
      dockPanel.add(new HTML("This is the west component."), 
      DockPanel.WEST);
      dockPanel.add(new HTML("This is the second north component."), 
      DockPanel.NORTH);
      dockPanel.add(new HTML("This is the second south component"), 
      DockPanel.SOUTH);

      // Add scrollable text in the center
      HTML contents = new HTML("This is a ScrollPanel contained"
         +" at the center of a DockPanel. "
         +" By putting some fairly large contents in the middle"
         +" and setting its size explicitly, it becomes a scrollable area"
         +" within the page, but without requiring the use of an IFRAME."
         +" Here's quite a bit more meaningless text that will serve primarily"
         +" to make this thing scroll off the bottom of its visible area."
         +" Otherwise, you might have to make it really, really"
         +" small in order to see the nifty scroll bars!");
      ScrollPanel scroller = new ScrollPanel(contents);
      scroller.setSize("400px", "100px");
      dockPanel.add(scroller, DockPanel.CENTER);


      VerticalPanel vPanel = new VerticalPanel();
      vPanel.add(dockPanel);

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

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