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

Class LayoutPanel

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.LayoutPanel
All Implemented Interfaces:
HasAttachHandlers, HasHandlers, EventListener, AnimatedLayout, HasVisibility, HasWidgets, HasWidgets.ForIsWidget, IndexedPanel, IndexedPanel.ForIsWidget, IsWidget, ProvidesResize, RequiresResize, Iterable<Widget>
Direct Known Subclasses:
RootLayoutPanel
public class LayoutPanel extends ComplexPanel implements AnimatedLayout, RequiresResize, ProvidesResize
A panel that lays its children out in arbitrary layers using the Layout class.

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 LayoutPanelExample implements EntryPoint {

  public void onModuleLoad() {
    // Attach two child widgets to a LayoutPanel, laying them out horizontally,
    // splitting at 50%.
    Widget childOne = new HTML("left"), childTwo = new HTML("right");
    LayoutPanel p = new LayoutPanel();
    p.add(childOne);
    p.add(childTwo);

    p.setWidgetLeftWidth(childOne, 0, PCT, 50, PCT);
    p.setWidgetRightWidth(childTwo, 0, PCT, 50, PCT);

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

LayoutPanel elements in UiBinder templates lay out their children with arbitrary constraints, using <g:layer> elements. Each layer may have any of the following constraint attributes specified as CSS length attributes: left, top, right, bottom, width , and height.

Precisely zero or two constraints are required for each axis (horizontal and vertical). Specifying no constraints implies that the child should fill that axis completely.

The valid sets of horizontal constraints are:

(none)
Fill the parent's horizontal axis
left, width
Fixed width, positioned from parent's left edge
right, width
Fixed width, positioned from parent's right edge
left, right
Width implied by fixed distance from parent's left and right edges

The valid sets of vertical constraints are:

(none)
Fill the parent's vertical axis
top, height
Fixed height, positioned from parent's top edge
bottom, height
Fixed height, positioned from parent's bottom edge
top, bottom
Height implied by fixed distance from parent's top and bottom edges

The values of constraint attributes can be any valid CSS length, such as 1px, 3em, or 0 (zero lengths require no units).

For example: 

 <g:LayoutPanel>
   <!-- No constraints causes the layer to fill the parent -->
   <g:layer>
     <g:Label>Lorem ipsum...</g:Label>
   </g:layer>
   <!-- Position horizontally 25% from each edge;
        Vertically 4px from the top and 10em tall. -->
   <g:layer left='25%' right='25%' top='4px' height='10em'>
     <g:Label>Header</g:Label>
   </g:layer>
 </g:LayoutPanel>