Question

编辑包含以下建议：此代码块现在可用于在屏幕截图中生成布局;

我有一个UIBinder，我正在尝试制作一个布局，以便内容窗格有一个主要部分填充可用的宽度和高度，将页脚向下推到底部。我试过了;

<!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>
.eastPanel {
        background-color: #F60;
    }

    .westPanel {
        background-color: #EEE;
    }

    .northPanel {
        background-color: #39F;
    }

    .southPanel {
        background-color: #99C;
    }

    .centrePanel {
        background-color: #FFC;
    }

    .headerPanel {
        font-weight: bold;
        background-color: #37B6CE;
    }

    .mainPanel {
        font-weight: bold;
        background-color: #123;
    }

    .footerPanel {
        font-weight: bold;
        background-color: #206876;
    }
</ui:style>
<g:DockLayoutPanel unit='EM'>
    <g:north size='8'>
        <g:FlowPanel styleName="{style.northPanel}">
            <g:SimplePanel ui:field="northPanel" />
            <g:Label>This is the NORTH panel</g:Label>
        </g:FlowPanel>
    </g:north>
    <g:west size='13'>
        <g:FlowPanel styleName="{style.westPanel}">
            <g:SimplePanel ui:field="westPanel" />
            <g:Label>This is the WEST panel</g:Label>
        </g:FlowPanel>
    </g:west>
    <g:center>
        <g:LayoutPanel styleName="{style.centrePanel}"  ui:field="centrePanel">
            <g:layer top="0em" height="2em">
                <g:HTMLPanel  styleName="{style.headerPanel}"  ui:field="headerPanel">                  
                fixed header - usually a search box
                </g:HTMLPanel>
            </g:layer>
            <g:layer top="2em" bottom="2em">
                <g:HTMLPanel styleName="{style.mainPanel}"  ui:field="meainPanel">
Expanding main area
                </g:HTMLPanel>
            </g:layer>
            <g:layer bottom="0px" height="2em">
                <g:HTMLPanel  styleName="{style.footerPanel}" ui:field="footerPanel">

                fixed footer - maybe some copyright information
                </g:HTMLPanel>
            </g:layer>
        </g:LayoutPanel>
    </g:center>

    <g:east size='0'>
        <g:FlowPanel styleName="{style.eastPanel}">
            <g:Label>This is the EAST panel</g:Label>
        </g:FlowPanel>
    </g:east>
    <g:south size="0">
        <g:FlowPanel styleName="{style.southPanel}">
            <g:Label>This is the SOUTH panel</g:Label>
        </g:FlowPanel>
    </g:south>
</g:DockLayoutPanel>

`

enter image description here

这是旧代码，它没有用，因为它使用表来尝试布局主要内容区域;

<!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" xmlns:wids="urn:import:org.limepepper.JavaCart.gwt.ui.client.widgets">
<ui:style>
    .mainPanel {
        background-color: #AFC;
        width: 100%;
        height: 100%;
    }
</ui:style>
<g:DockLayoutPanel unit='EM'>
    <g:north size='8'>
        <g:FlowPanel styleName="{style.northPanel}">
            <g:SimplePanel ui:field="northPanel" />
            <g:Label>This is the NORTH panel</g:Label>
        </g:FlowPanel>
    </g:north>
    <g:west size='13'>
        <g:FlowPanel styleName="{style.westPanel}">
            <g:SimplePanel ui:field="westPanel" />
            <g:Label>This is the WEST panel</g:Label>
        </g:FlowPanel>
    </g:west>
    <g:center>
        <g:HTMLPanel>
            <g:VerticalPanel>
                <g:HTMLPanel>
                    A heade panel
                </g:HTMLPanel>
                <g:HTMLPanel styleName="{style.mainPanel}">
                I want this panel to fill the space
                th
                rh
                tr
                h
                <br>
                </br>
                <br></br>
                <p></p>

                </g:HTMLPanel>
                <g:HTMLPanel>
                    Footer here
                </g:HTMLPanel>
            </g:VerticalPanel>

        </g:HTMLPanel>
    </g:center>
    <g:east size='0'>
        <g:FlowPanel styleName="{style.eastPanel}">
            <g:Label>This is the EAST panel</g:Label>
        </g:FlowPanel>
    </g:east>
    <g:south size="0">
        <g:FlowPanel styleName="{style.southPanel}">
            <g:Label>This is the SOUTH panel</g:Label>
        </g:FlowPanel>
    </g:south>
</g:DockLayoutPanel>

`

enter image description here

但是这没有填补空间，我可以通过编程方式完成，但我认为有一些GWT方法可供使用。

Answer 1

首先，您必须意识到，VerticalPanel是如何实现的，以及它如何布置其子窗口小部件。如果您检查页面生成的HTML，您会立即看到它是以<table>实现的。

一旦你意识到这一点，你就可以立刻看到用VerticalPanel或<table>标签来解决这个问题无法让你达到你想要的效果。

实施<g:center/> DockLayoutPanel的正确方法是使用LayoutPanel并使用<g:layer>...</g:layer>子项来定位页眉，页脚和内容。 LayoutPanel（与DockLayoutPanel非常相似）使用绝对定位来定位其图层，实现像素完美展示。

所以这就是它的样子：

...
<g:center>
  <g:layer top="0px" height="YOUR HEADER HEIGHT">
    <g:HTMLPanel>
      A heade panel
    </g:HTMLPanel>
  </g:layer>
  <g:layer top="YOUR HEADER HEIGHT" bottom="YOUR FOOTER HEIGHT">
    <g:HTMLPanel styleName="{style.mainPanel}">
        I want this panel to fill the space
    </g:HTMLPanel>
  </g:layer>
  <g:layer bottom="0px" height="YOUR FOOTER HEIGHT">
    <g:HTMLPanel>
        Footer here
    </g:HTMLPanel>
  </g:layer>
</g:center>
...

在图层的X轴或Y轴上指定2个坐标就足够了，而LayoutPanel将使图层内的窗口小部件占用另一个轴上的所有可用空间。因此，如果您指定top和height值，则小工具将占用水平轴上的所有可用空间，并位于top坐标并指定height

Answer 2

您可以嵌入另一个DockLayoutPanel作为外部center的{{1}}窗口小部件。

即：

DockLayoutPanel

<g:DockLayoutPanel unit='EM'> ... <g:center> <g:DockLayoutPanel unit="EM" width="100%" height="100%"> <g:center> <g:HTMLPanel> I want this panel to fill the space </g:HTMLPanel> </g:center> <g:north size="3"> <g:HTMLPanel> A header panel </g:HTMLPanel> </g:north> <g:south size="3"> <g:HTMLPanel> Footer here </g:HTMLPanel> </g:south> </g:DockLayoutPanel> </g:center> ...是一个专门的LayoutPanel。 DockLayoutPanel允许您相对于其自身的边缘定位事物，当您想要将某些内容放到其容器的底部时，这非常有用（例如）。如果您需要比LayoutPanel给出的更高级的内容，建议您查看LayoutPanel。

如何使窗口小部件填充GWT中VerticalLayout中的空间

2 个答案: