GWT - DockPanel Widget

introduzione

Il DockPanel widget rappresenta un pannello che dispone i suoi widget figli "agganciati" ai bordi esterni e consente al suo ultimo widget di occupare lo spazio rimanente al centro.

Dichiarazione di classe

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

@Deprecated
public class DockPanel
   extends CellPanel
      implements HasAlignment

Costruttori di classi

Sr.No.	Costruttore e descrizione
1	DockPanel() Costruttore per DockPanel.

Metodi di classe

Sr.No.	Nome e descrizione della funzione
1	void add(Widget widget, DockPanel. DockLayoutConstant direction) Deprecato. Aggiunge un widget al bordo specificato del dock.
2	HasHorizontalAlignment. HorizontalAlignmentConstant getHorizontalAlignment() Deprecato. Ottiene l'allineamento orizzontale.
3	HasVerticalAlignment. VerticalAlignmentConstant getVerticalAlignment() Deprecato. Ottiene l'allineamento verticale.
4	DockPanel. DockLayoutConstant getWidgetDirection(Widget w) Deprecato. Ottiene la direzione del layout del widget figlio specificato.
5	protected void onEnsureDebugId(java.lang. String baseID) Deprecato. DockPanel supporta l'aggiunta di più celle in una direzione, quindi un intero verrà aggiunto alla fine dell'ID di debug.
6	boolean remove(Widget w) Deprecato. Rimuove un widget figlio.
7	void setCellHeight(Widget w, java.lang.String height) Deprecato. Imposta l'altezza della cella associata al widget dato, relativa al pannello nel suo insieme.
8	void set Cell Horizontal Alignment(Widget w, Has Horizontal Alignment. Horizontal Alignment Constant align) Deprecato. Imposta l'allineamento orizzontale del widget dato all'interno della sua cella.
9	void set Cell Vertical Alignment (Widget w, HasVertical Alignment. Vertical Alignment Constant align) Deprecato. Imposta l'allineamento verticale del widget dato all'interno della sua cella.
10	void setCellWidth(Widget w, java.lang.String width) Deprecato. Imposta la larghezza della cella associata al widget dato, relativa al pannello nel suo insieme.
11	void set Horizontal Alignment (Has Horizontal Alignment. Horizontal Alignment Constant align) Deprecato. Imposta l'allineamento orizzontale predefinito da utilizzare per i widget aggiunti a questo pannello.
12	void setVerticalAlignment(HasVerticalAlignment. VerticalAlignmentConstant align) Deprecato. Imposta l'allineamento verticale predefinito da utilizzare per i widget aggiunti a questo pannello.

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

Esempio di widget DockPanel

Questo esempio ti guiderà attraverso semplici passaggi per mostrare l'utilizzo di un DockPanel Widget 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;
}
.dockpanel td {
   border: 1px solid #BBBBBB;
   padding: 3px;
}

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