Как правильно выровнять две кнопки в одной строке с HTMLPanel в GWT 2.4? - PullRequest
Новая
       25

Как правильно выровнять две кнопки в одной строке с HTMLPanel в GWT 2.4?

0 голосов
/ 22 ноября 2011

Я использую GWT 2.4 и uiBinder для добавления виджетов на страницу.Теперь я хочу расположить две нижние кнопки в одном ряду, но я не уверен в правильном способе сделать это.

Я попытался добавить горизонтальную панель следующим образом: 

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

, но кнопки не расположены достаточно далеко друг от друга.Увеличение расстояния увеличивает высоту панели и отталкивает все вниз от другой кнопки над ней.

Как правильно это сделать?

1 Ответ

1 голос
/ 22 ноября 2011

Есть два способа сделать макет в GWT:

  1. зависит от smartgwt или gxt.
  2. прикуси пулю и выучи css.

Я советую людям идти по второму пути. smartgwt и gxt покажутся привлекательными для простого проекта. Однако по мере того, как ваш проект становится все более сложным, несовместимость со всеми остальными вкусностями GWT становится все шире и шире.

Укуси пулю и узнай, как интегрировать CSS в 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>
...