Package com.google.gwt.layout.client

Class Layout

java.lang.Object
com.google.gwt.layout.client.Layout
public class Layout extends Object
Helper class for laying out a container element and its children.

This class is typically used by higher-level widgets to implement layout on their behalf. It is intended to wrap an element (usually a <div>), and lay its children out in a predictable fashion, automatically accounting for changes to the parent's size, and for all elements' margins, borders, and padding.

To use this class, create a container element (again, usually a <div>) and pass it to Layout(Element). Rather than attaching child elements directly to the element managed by this Layout, use the attachChild(Element) method. This will attach the child element and return a Layout.Layer object which is used to manage the child.

A separate Layout.Layer instance is associated with each child element. There is a set of methods available on this class to manipulate the child element's position and size. In order for changes to a layer to take effect, you must finally call one of layout() or layout(int). This allows many changes to different layers to be applied efficiently, and to be animated.

On most browsers, this is implemented using absolute positioning. It also contains extra logic to make IE6 work properly.

Example

public class LayoutExample implements EntryPoint {

  public void onModuleLoad() {
    // The following is a very simple example, which constructs a layout around
    // a parent element, and attaches two child elements that split their
    // parent's space vertically. It then goes on to animate from the first
    // state to a horizontal stacking that uses EM units rather than
    // percentages.
    Document doc = Document.get();
    Element parent = doc.createDivElement();
    doc.getBody().appendChild(parent);

    Layout layout = new Layout(parent);
    layout.onAttach();

    Element topChild = doc.createDivElement(), bottomChild = doc
        .createDivElement();
    Layer topLayer = layout.attachChild(topChild);
    Layer bottomLayer = layout.attachChild(bottomChild);

    // Stack the two children vertically, meeting at 50%.
    topLayer.setLeftRight(0, PX, 0, PX);
    bottomLayer.setLeftRight(0, PX, 0, PX);
    topLayer.setTopHeight(0, PCT, 50, PCT);
    bottomLayer.setBottomHeight(0, PCT, 50, PCT);
    layout.layout();

    // Update the two children to stack horizontally, meeting at 10em.
    // Also have them animate for 500ms.
    topLayer.setTopBottom(0, PX, 0, PX);
    bottomLayer.setTopBottom(0, PX, 0, PX);
    topLayer.setLeftWidth(0, EM, 10, EM);
    bottomLayer.setLeftRight(10, EM, 0, EM);
    layout.layout(500);
  }
}

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

NOTE: This class is still very new, and its interface may change without warning. Use at your own risk.