在GWT 2.4中使用HTMLPanel将同一行中的两个按钮对齐的正确方法是什么?

时间:2011-11-21 23:10:03

标签: gwt button alignment

我正在使用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 个答案:

答案 0 :(得分:1)

您可以通过两种方式在GWT中进行布局:

  1. 依赖于smartgwt或gxt。
  2. 咬紧牙关学习css。
  3. 我建议人们走第二条道路。 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>