Package com.google.gwt.user.client.ui

Class DockLayoutPanel

java.lang.Object
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.DockLayoutPanel
All Implemented Interfaces:
HasAttachHandlers, HasHandlers, EventListener, AnimatedLayout, HasVisibility, HasWidgets, HasWidgets.ForIsWidget, IndexedPanel, IndexedPanel.ForIsWidget, IsWidget, ProvidesResize, RequiresResize, Iterable<Widget>
Direct Known Subclasses:
SplitLayoutPanel
public class DockLayoutPanel extends ComplexPanel implements AnimatedLayout, RequiresResize, ProvidesResize
A panel that lays its child widgets out "docked" at its outer edges, and allows its last widget to take up the remaining space in its center.

This widget will only work in standards mode, which requires that the HTML page in which it is run have an explicit <!DOCTYPE> declaration.

Example

public class DockLayoutPanelExample implements EntryPoint {

  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"), 2);
    p.addSouth(new HTML("south"), 2);
    p.addEast(new HTML("east"), 2);
    p.addWest(new HTML("west"), 2);
    p.add(new HTML("center"));

    // Attach the LayoutPanel to the RootLayoutPanel. The latter will listen for
    // resize events on the window to ensure that its children are informed of
    // possible size changes.
    RootLayoutPanel rp = RootLayoutPanel.get();
    rp.add(p);
  }
}

Use in UiBinder Templates

DockLayoutPanel elements in UiBinder templates lay out their children in elements tagged with the cardinal directions, and center:

<g:center>
<g:north>
<g:south>
<g:west>
<g:east>

Each child can hold only widget, and there can be only one <g:center>. However, there can be any number of the directional children.

(Note that the tags of the child elements are not capitalized. This is meant to signal that they are not runtime objects, and so cannot have a ui:field attribute.)

For example:

 <g:DockLayoutPanel unit='EM'>
   <g:north size='5'>
     <g:Label>Top</g:Label>
   </g:north>
   <g:center>
     <g:Label>Body</g:Label>
   </g:center>
   <g:west size='192'>
     <g:HTML>
       <ul>
         <li>Sidebar</li>
         <li>Sidebar</li>
         <li>Sidebar</li>
       </ul>
     </g:HTML>
   </g:west>
 </g:DockLayoutPanel>