Question

I’m using GWT 2.4 and uiBinder to add widgets to a page. Now I want to layout two bottom buttons in one row, but I’m not sure of the correct way to do this.

I tried adding in a horizontalPanel like this:

<tr>
   <td align="center">
      <g:HorizontalPanel ui:field="horizontalPanel" borderWidth="1" spacing="50">
         <g:Button ui:field="cancelButton" text="Cancel"></g:Button>
         <g:Button ui:field="exitButton" text="Exit"></g:Button>                    
    </g:HorizontalPanel>
   </td>
</tr>

but it’s not spacing the buttons far enough apart. Increasing the spacing is adding more height to the panel and pushing everything down away another button that is above it.

What is the proper way to do this?

Answer 1

There are two ways you can go about doing your layout in GWT:

1. depend on smartgwt or gxt.
2. bite the bullet and learn css.

I advise people to go the 2nd path. smartgwt and gxt will seem attractive for a simple project. However, as your project gets more and more complex, the incompatibilities with all the other GWT goodies become wider and wider.

Bite the bullet and learn how to integrate css into gwt.

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
  xmlns:g="urn:import:com.google.gwt.user.client.ui">
  <ui:style>
    .trivial {
      font-weight: bold;
      margin-left: 50px;
      margin-top: 0px;
      margin-right: 50px;
      margin-bottom: 0px;
    }
  </ui:style>
  <g:HorizontalPanel>
    <g:Button styleName="{style.trivial}" ui:field="button1">David Headley</g:Button>
    <g:Button styleName="{style.trivial}" ui:field="button2">Debacle</g:Button>
  </g:HorizontalPanel>
</ui:UiBinder>