编辑包含以下建议:此代码块现在可用于生成屏幕截图中的布局;如何使一个小部件填充GWT中VerticalLayout的空间
我有一个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>
`
这是老代码,没有工作的原因,而是用一个表来尝试布局主要内容的区域;
<!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>
`
但这并不填补空间,我能做到这一点编程,但我相信有一些GWT的方法来使用。
我认为DocLayoutPanels只能连接到RootLayout,所以如果没有侧面板就可以展开 –
如果你把嵌套的DocklayoutPanel放到一个HTMLPanel中,你可能必须指定HTMLPanel的显式大小,因为它没有' t实现RequireResize和ProvideResize接口。所以你把它直接放到了Parnet DockLayoutPanel的中心元素中。 @Tom H:DocklayoutPanels与所有其他LayoutPanels可以连接到实现ProvideResize接口的任何Panel。所以你嵌套任意数量的LayoutPanels –
@timeu糟糕,我不小心将DockLayoutPanel包装在HTMLPanel中。我编辑了我的答案以解决这个问题。 –