GWT DockLayoutPanel

In this layout panel, all its child widgets lays at corner or edges. The last widget occupies the center space. It works also in standard mode where HTML page is having !DOCTYPE DECLARATION.

GWT DockLayoutPanel Class Declaration

Let's see the declaration of com.google.gwt.user.client.ui.DockLayoutPanel

DockLayoutPanel Nested Classes

Class	Description
DockLayoutPanel.Direction	It is used in addEast(Widget, double) et al to specify the direction in which a child widget will be added.
DockLayoutPanel.LayoutData	Its layout data is associated with each widget.

GWT DockLayoutPanel Constructors

Constructor	Description
DockLayoutPanel(Style.Unit unit)	It creates an empty dock panel.

DockLayoutPanel Common Methods

Modifier and Types	Method	Description
void	add(Widget widget)	It adds a widget at the center of the dock.
void	addEast(IsWidget widget, double size)	It is a overloaded version for IsWidget.
void	addEast(Widget widget, double size)	It adds a widget to the east edge of the dock.
void	addLineEnd(Widget widget, double size)	It adds a widget to the end of the line.
void	addNorth(Widget widget, double size)	It adds a widget to the north edge of the dock.
void	addSouth(Widget widget, double size)	It adds a widget to the south edge of the dock.
Element	getWidgetContainerElement(Widget child)	It gets the container element wrapping the given child widget.
protected DockLayoutPanel.Direction	getResolvedDirection(DockLayoutPanel.Direction direction)	It resolves the specified direction based on the current locale.
protected void	insert(Widget widget, DockLayoutPanel.Direction direction, double size, Widget before)	It adds a widget to the specified edge of the dock.
protected void	onAttach()	It is called when a widget is attached to the browser's document.
protected void	onDetach()	It is called when a widget is detached from the browser's document.
void	setWidgetHidden(Widget widget, boolean hidden)	It sets whether or not the given widget should be hidden.
void	setWidgetSize(Widget widget, double size)	It updates the size of the widget passed in as long as it is not the center widget and updates the layout of the dock.

GWT DockLayoutPanel Example 1

//SampleDockLayoutPanel.java

import com.google.gwt.event.logical.shared.ResizeEvent;
import com.google.gwt.event.logical.shared.ResizeHandler;
import com.google.gwt.user.client.Window;

/*This is the entry point method. */
 
public void onModuleLoad() { 

// Attach five widgets to a DockLayoutPanel, one in each direction. Lay // them out in ?em? units. 

DockLayoutPanel p = new DockLayoutPanel(Unit.EM); 
p.addNorth(new HTML("north"), 8); 
p.addSouth(new HTML("south"), 8); 
p.addEast(new HTML("east"),8);
 	p.addWest(new HTML("west"), 8);
 p.add(new HTML("center")); 

// Attach the DockLayoutPanel to the RootLayoutPanel. 

RootLayoutPanel rp = RootLayoutPanel.get(); rp.add(p); 

}

//SampleDockLayoutPanel.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;
}

Output:

GWT DockLayoutPanel Example 2

//SampleDockLayoutPanel.java

  
import com.google.gwt.core.client.EntryPoint;  
import com.gwtext.client.core.Margins;  
import com.gwtext.client.core.RegionPosition;  
import com.gwtext.client.widgets.Panel;  
import com.gwtext.client.widgets.Viewport;  
import com.gwtext.client.widgets.layout.BorderLayout;  
import com.gwtext.client.widgets.layout.BorderLayoutData;  
import com.gwtext.client.widgets.layout.FitLayout;  
  
public class Test implements EntryPoint {  
  
    public void onModuleLoad() {  
        Panel panel = new Panel();  
        panel.setBorder(false);  
        panel.setPaddings(15);  
        panel.setLayout(new FitLayout());  
  
        Panel borderPanel = new Panel();  
        borderPanel.setLayout(new BorderLayout());  
  
        //add north panel  
        Panel northPanel = new Panel();  
        northPanel.setHtml("<p>north panel</p>");  
        northPanel.setHeight(32);  
        northPanel.setBodyStyle("background-color:#FFFF88");  
        borderPanel.add(northPanel, new BorderLayoutData(RegionPosition.NORTH));  
  
        //add south panel  
        Panel southPanel = new Panel();  
        southPanel.setHtml("<p>south panel</p>");  
        southPanel.setHeight(100);  
        southPanel.setBodyStyle("background-color:#CDEB8B");  
        southPanel.setCollapsible(true);  
        southPanel.setTitle("South");  
  
        BorderLayoutData southData = new BorderLayoutData(RegionPosition.SOUTH);  
        southData.setMinSize(100);  
        southData.setMaxSize(200);  
        southData.setMargins(new Margins(0, 0, 0, 0));  
        southData.setSplit(true);  
        borderPanel.add(southPanel, southData);  
  
        //add east panel  
        Panel eastPanel = new Panel();  
        eastPanel.setHtml("<p>east panel</p>");  
        eastPanel.setTitle("East Side");  
        eastPanel.setCollapsible(true);  
        eastPanel.setWidth(225);  
  
        BorderLayoutData eastData = new BorderLayoutData(RegionPosition.EAST);  
        eastData.setSplit(true);  
        eastData.setMinSize(175);  
        eastData.setMaxSize(400);  
        eastData.setMargins(new Margins(0, 0, 5, 0));  
  
        borderPanel.add(eastPanel, eastData);  
  
        Panel westPanel = new Panel();  
        westPanel.setHtml("<p>west panel</p>");  
        westPanel.setTitle("West");  
        westPanel.setBodyStyle("background-color:#EEEEEE");  
        westPanel.setCollapsible(true);  
        westPanel.setWidth(200);  
  
        BorderLayoutData westData = new BorderLayoutData(RegionPosition.WEST);  
        westData.setSplit(true);  
        westData.setMinSize(175);  
        westData.setMaxSize(400);  
        westData.setMargins(new Margins(0, 5, 0, 0));  
  
        borderPanel.add(westPanel, westData);  
  
        Panel centerPanel = new Panel();  
        centerPanel.setHtml("<p>center panel</p>");  
        centerPanel.setBodyStyle("background-color:#C3D9FF");  
  
        borderPanel.add(centerPanel, new BorderLayoutData(RegionPosition.CENTER));  
  
        panel.add(borderPanel);  
  
        Viewport viewport = new Viewport(panel);  
    }  
}  

Output: