Question

我正在尝试使用GWT进行这样的布局。这真让我烦恼，因为它看起来不像我想要的那样。总有一些东西重叠，隐藏，大或只是错误的位置。

我只是想做这个布局： The layout

我正在研究这个问题几个小时没有结果:(

布局应该填满整个浏览器，但没有滚动条！标题应包含图像和标签 Menu是来自gwt的Menu对象，内容正在变化，具体取决于点击的listitem

帮助请....

Answer 1

根据个人经验，并根据谷歌自己的建议，我建议调查UIBinder。

另外，我建议在面板之间插入一些“溢出缓冲区”。即，你为最基本的面板分配了100px。将它的尺寸缩小到96，允许在它和下一个面板之间留出+/- 2px的空间。这将允许不同计算机和浏览器之间的任何大小/布局错误在一定程度上得到补偿，而且成本很低。

Answer 2

使用UiBinder，您可以使用两个嵌套的DockLayoutPanel来实现此布局。我自己没有测试过，但这样的东西应该可以工作（将DockLayoutPanel添加到RootLayoutPanel ）

<g:DockLayoutPanel unit='PX'>
  <g:north size='100'>
    <g:HTMLPanel>PUT HERE LABEL AND IMAGE </g:HTMLPanel>
  </g:north>
  <g:center>
     <g:DockLayoutPanel unit='PX'>
         <g:north size='30'>
              MENU 
             </g:north>
         <g:center>
               MAIN BODY
         </g:center>
     </g:DockLayoutPanel>
  </g:center>
  <g:west size='130'>
    <g:ListBox>
    </g:ListBox>
  </g:west>
</g:DockLayoutPanel>

Answer 3

我刚刚测试了以下解决方案，它的外观和工作方式完全如您所述。我使用了uiBinder，但并不是强制使用它。 ui xml代码是：

<!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>
    .important {
        font-weight: bold;
    }
    .header_bar{
        position:absolute;
        top:0px;
        left:0px;
        height: 100px;
        right:0px;
        background-color: red;
    }

    .left_bar{
        position:absolute;
        top:100px;
        left:0px;
        bottom:0px;
        width: 130px;
        background-color: green;
    }

    .menu_bar{
        position:absolute;
        top:100px;
        left:130px;
        height: 30px;
        right:0px;
        background-color: yellow;
    }
    .content{
        position:absolute;
        top:130px;
        left:130px;
        right: 0px;
        bottom: 0px;
    }
</ui:style>
<g:HTMLPanel>
<div class="{style.header_bar}">
    <g:FlowPanel ui:field="headerPanel"></g:FlowPanel> 
</div>
<div class="{style.left_bar}">
    <g:FlowPanel ui:field="leftPanel"></g:FlowPanel>
</div>
<div class="{style.menu_bar}">
    <g:FlowPanel ui:field="menuPanel"></g:FlowPanel>
</div>
<div class="{style.content}">
    <g:FlowPanel ui:field="contentPanel"></g:FlowPanel>
</div>
</g:HTMLPanel>

java文件代码是：

public class TestLayout extends Composite {

private static TestLayoutUiBinder uiBinder = GWT
        .create(TestLayoutUiBinder.class);

interface TestLayoutUiBinder extends UiBinder<Widget, TestLayout> {
}

public TestLayout() {
    initWidget(uiBinder.createAndBindUi(this));
    headerPanel.add(new Label("Head!"));
    leftPanel.add(new Label("Left!"));
    menuPanel.add(new Label("Menu!"));
    contentPanel.add(new Label("Content!"));
}

@UiField
FlowPanel headerPanel;

@UiField
FlowPanel leftPanel;

@UiField
FlowPanel menuPanel;

@UiField
FlowPanel contentPanel;
}

我希望我能帮到你。

整页GWT布局像通常的网页一样

3 个答案: