Question

我使用带有uibinder xml的GWT 2.5.1来指定ui布局。

作为一个新手，无法弄清楚如何指定一个简单的布局：

i-want-this

我希望[Somelabel：]和[Button]取得最小的所需位置，[Textbox]占用剩下的部分。尝试了不同的方法：将它们放置到HorizontalPanel，FlowPanel，甚至DockLayoutPanel。它们都不满足我的要求：HorizontalPanel只是将父容器划分为三个相等的部分，FlowPanel不考虑元素宽度，DockLayoutPanel希望我手动计算并指定[Somelabel：]和[Button]的宽度，但仍然没有。完全没用。

这是基本的ui布局任务，我无法相信GWT没有办法在没有手动像素宽度计算的情况下指定我想要的内容。大多数不同的UI工具都有简单的方法来指定它。

这将它们置于相同的细胞中：

    <g:HorizontalPanel width="100%">
        <g:Label>Somelabel:</g:Label>
        <g:TextBox ui:field="someTextBox"/>
        <g:Button ui:field="someButton" text="Button"/>
    </g:HorizontalPanel>

horizontal-panel

这会以一种奇怪的方式（无论是＆＃34;浮动：左和＃34;是否为标签指定;是否＆＃34;浮动：右和＃34;是否为按钮指定）：

    <g:FlowPanel width="100%">
        <g:Label>Somelabel:</g:Label>
        <g:TextBox ui:field="someTextBox"/>
        <g:Button ui:field="someButton" text="Button"/>
    </g:FlowPanel>

flow-panel

这要我指定像素但不显示它们：

    <g:DockLayoutPanel width="100%" height="90">
        <g:east size="30"><g:Label>Somelabel:</g:Label></g:east>
        <g:center><g:TextBox ui:field="someTextBox"/></g:center>
        <g:west size="50"><g:Button ui:field="someButton" text="Button"/></g:west>
    </g:DockLayoutPanel>

[没有图片，因为它没有显示任何内容]

我有点卡住，因为唯一可以使用的xml是HorizontalPanel，而且它没有做我想要的。

UP：添加了屏幕截图并尝试了＆＃34; float：＆＃34; css样式（没有改变任何东西）。

UP2：使用LayoutPanel获取我想要的图片并指定每个图层的像素宽度。

    <g:LayoutPanel width="100%" height="40px">
        <g:layer width="100px" left="0">
            <g:Label>Somelabel:</g:Label>
        </g:layer>
        <g:layer left="100px" right="200px">
            <g:TextBox ui:field="someTextBox"/>
        </g:layer>
        <g:layer width="200px" right="0">
            <g:Button ui:field="someButton" text="Button"/>
        </g:layer>
    </g:LayoutPanel>

但是xml看起来很难看，迫使我手动计算像素，并在两个地方指定每个宽度。我可以以某种方式将像素宽度计算留给框架，只需指定＆＃34;将它放在那里并给它想要的最小位置＆＃34;？

Answer 1

如果您参考GWT文档[此处] [1]，则会提及您的确切问题。尝试使用FlowPanel并指定float : left CSS属性。

编辑： 这对我有用

UI-粘合剂

<g:FlowPanel width="100%" addStyleNames="myTable">
    <g:FlowPanel addStyleNames="myTableRow">
        <g:Label addStyleNames="myTableLabel">Somelabel:</g:Label>
        <g:FlowPanel width="100%" addStyleNames="myTableCell">
            <g:TextBox ui:field="someTextBox" addStyleNames="myTableInput"/>
        </g:FlowPanel>
        <g:Button ui:field="someButton" text="Button" addStyleNames="myTableButton"/>
    </g:FlowPanel>
</g:FlowPanel>

CSS：

.myTable {
    display: table;
    width: 100%;

}

.myTableRow {
    display: table-row;
}

.myTableLabel {
    display: table-cell;
}

.myTableCell {
    display: table-cell;
    width: 100%;
}

.myTableInput {
width: 100%;    
}

.myTableButton {
    display: table-cell;
}

GWT uibinder - 如何指定这么简单的布局？

1 个答案: