整页 GWT 布局类似于普通网页答案

【问题标题】：Full page GWT layout like an usual webpage整页 GWT 布局类似于普通网页
【发布时间】：2011-10-21 14:38:19
【问题描述】：

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

我只是想做这样的布局：

我为此工作了几个小时，但没有结果:(

布局应该填满整个浏览器，但没有滚动条！标题应包含图像和标签 Menu 是来自 gwt 的 Menu 对象，内容会根据单击的列表项而变化

请帮忙....

【问题讨论】：

请发布您目前的情况，并告诉我们确切有什么事情没有按计划进行。

标签： java xml gwt layout

【解决方案1】：

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

另外，我建议在您的面板之间插入一些“溢出缓冲区”。即，您为最北端的面板分配了 100 像素。将它的大小缩小到 96，在它和下一个面板之间留出 +/-2px 的空间。这将使不同计算机和浏览器之间的任何大小/布局错误都能以很小的成本得到一定程度的补偿。

【讨论】：

【解决方案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>

【讨论】：

【解决方案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;
}

我希望我有所帮助。

【讨论】：