GWT - Widget de DockPanel

Introducción

los DockPanel widget representa un panel que coloca sus widgets secundarios "acoplados" en sus bordes exteriores y permite que su último widget ocupe el espacio restante en su centro.

Declaración de clase

A continuación se muestra la declaración de com.google.gwt.user.client.ui.DockPanel clase -

@Deprecated
public class DockPanel
   extends CellPanel
      implements HasAlignment

Constructores de clases

No Señor.	Constructor y descripción
1	DockPanel() Constructor para DockPanel.

Métodos de clase

No Señor.	Nombre y descripción de la función
1	void add(Widget widget, DockPanel. DockLayoutConstant direction) Obsoleto. Agrega un widget al borde especificado del muelle.
2	HasHorizontalAlignment. HorizontalAlignmentConstant getHorizontalAlignment() Obsoleto. Obtiene la alineación horizontal.
3	HasVerticalAlignment. VerticalAlignmentConstant getVerticalAlignment() Obsoleto. Obtiene la alineación vertical.
4	DockPanel. DockLayoutConstant getWidgetDirection(Widget w) Obsoleto. Obtiene la dirección del diseño del widget secundario dado.
5	protected void onEnsureDebugId(java.lang. String baseID) Obsoleto. DockPanel admite agregar más de una celda en una dirección, por lo que se agregará un número entero al final de la identificación de depuración.
6	boolean remove(Widget w) Obsoleto. Elimina un widget secundario.
7	void setCellHeight(Widget w, java.lang.String height) Obsoleto. Establece la altura de la celda asociada con el widget dado, relacionada con el panel como un todo.
8	void set Cell Horizontal Alignment(Widget w, Has Horizontal Alignment. Horizontal Alignment Constant align) Obsoleto. Establece la alineación horizontal del widget dado dentro de su celda.
9	void set Cell Vertical Alignment (Widget w, HasVertical Alignment. Vertical Alignment Constant align) Obsoleto. Establece la alineación vertical del widget dado dentro de su celda.
10	void setCellWidth(Widget w, java.lang.String width) Obsoleto. Establece el ancho de la celda asociada con el widget dado, relacionado con el panel como un todo.
11	void set Horizontal Alignment (Has Horizontal Alignment. Horizontal Alignment Constant align) Obsoleto. Establece la alineación horizontal predeterminada que se utilizará para los widgets agregados a este panel.
12	void setVerticalAlignment(HasVerticalAlignment. VerticalAlignmentConstant align) Obsoleto. Establece la alineación vertical predeterminada que se utilizará para los widgets agregados a este panel.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

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

Ejemplo de widget de DockPanel

Este ejemplo lo llevará a través de sencillos pasos para mostrar el uso de un widget de DockPanel en GWT. Siga los siguientes pasos para actualizar la aplicación GWT que creamos en GWT - Capítulo Crear aplicación -

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint como se explica en el capítulo GWT - Crear aplicación .
2	Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html y HelloWorld.java como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado 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>

A continuación se muestra el contenido del archivo de hoja de estilo modificado 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;
}

A continuación se muestra el contenido del archivo de host HTML modificado 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>

Tengamos el siguiente contenido del archivo Java src/com.tutorialspoint/HelloWorld.java que demostrará el uso del 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);
   }
}

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo de desarrollo como hicimos en el capítulo GWT - Crear aplicación . Si todo está bien con su aplicación, esto producirá el siguiente resultado:

↰ Previous page