BorderLayoutUiBinderExample

gistfile1.xml

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:border="urn:import:com.sencha.gxt.ui.client.widget.container.border"
  xmlns:gxt="urn:import:com.sencha.gxt.ui.client.widget">

  <ui:with type="com.sencha.gxt.ui.client.util.Margins" field="northMargins">
    <ui:attributes top="0" right="0" bottom="5" left="0" />
  </ui:with>
  <ui:with type="com.sencha.gxt.ui.client.util.Margins" field="westMargins">
    <ui:attributes top="0" right="5" bottom="0" left="0" />
  </ui:with>
  <ui:with type="com.sencha.gxt.ui.client.util.Margins" field="eastMargins">
    <ui:attributes top="0" right="0" bottom="0" left="5" />
  </ui:with>
  <ui:with type="com.sencha.gxt.ui.client.util.Margins" field="southMargins">
    <ui:attributes top="5" right="0" bottom="0" left="0" />
  </ui:with>

  <ui:with type="com.sencha.gxt.ui.client.widget.container.border.BorderLayoutContainer.BorderLayoutData" field="northData">
    <ui:attributes size="100" margins="{northMargins}" />
  </ui:with>
  <ui:with type="com.sencha.gxt.ui.client.widget.container.border.BorderLayoutContainer.BorderLayoutData" field="westData">
    <ui:attributes size="150" margins="{westMargins}" />
  </ui:with>
  <ui:with type="com.sencha.gxt.ui.client.widget.container.common.MarginData" field="centerData">
    <ui:attributes />
  </ui:with>
  <ui:with type="com.sencha.gxt.ui.client.widget.container.border.BorderLayoutContainer.BorderLayoutData" field="eastData">
    <ui:attributes size="150" margins="{eastMargins}" />
  </ui:with>
  <ui:with type="com.sencha.gxt.ui.client.widget.container.border.BorderLayoutContainer.BorderLayoutData" field="southData">
    <ui:attributes size="100" margins="{southMargins}" />
  </ui:with>


  <border:BorderLayoutContainer pixelSize="800, 400">
    <border:north layoutData="{northData}">
      <gxt:ContentPanel />
    </border:north>
    <border:west layoutData="{westData}">
      <gxt:ContentPanel />
    </border:west>
    <border:center layoutData="{centerData}">
      <gxt:ContentPanel heading="BorderLayout UiBinder Example" />
    </border:center>
    <border:east layoutData="{eastData}">
      <gxt:ContentPanel />
    </border:east>
    <border:south layoutData="{southData}">
      <gxt:ContentPanel />
    </border:south>
  </border:BorderLayoutContainer>

</ui:UiBinder>