如何在使用RootLayoutPanel和DockPanel时设置5%的边距

Question

我一直在尝试GWT2，我发现很难得到我想要的基本页面布局。基本上我使用的是一个DocLayoutPanel，其中我添加了一个北(页眉)、南(页脚)、西(导航)和内容区域。我希望文档面板占据页面的90%并居中。这将带来5%的利润率。然而，由于GWT使用了top、left、right和bottom样式，所以使用我的常规策略(边距:自动)居中不起作用。

我怎样才能用GWT方式完成我想要的东西呢？

Answer 1

从你的问题看，我不清楚你在问什么，但我想你希望整个Dock面板有5%的边距？

GWT2.0中所有新的*LayoutPanels都使用css绝对定位，这就是为什么你会看到top/left/right/bottom样式。这就是为什么你的边际策略:自动不起作用。

DockLayoutPanel实际上只是为了布局。我建议调整放在DockLayoutPanel中的小部件的边距，以达到您想要的效果。

我自己尝试了一下，我接近于一个答案，但它并不完美。我将标签放到每个DockPanels中，边距为10px，但右边框和下边框不显示该边距。

<!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>.label {
        background: #666;
        color: #fff;
        font-size: 14pt;
        padding: 5px;
        margin: 10px;
        height: 100%;
        width: 100%;
    }</ui:style>

<g:DockLayoutPanel unit='PCT'> 
        <g:north size='10'> 
                <g:Label addStyleNames="{style.label}">Top</g:Label> 
        </g:north> 
        <g:center> 
                <g:Label addStyleNames="{style.label}">Body</g:Label> 
        </g:center> 
        <g:west size='10'> 
                <g:Label addStyleNames="{style.label}">West</g:Label> 
        </g:west> 
        <g:south size="10"> 
                <g:Label addStyleNames="{style.label}">South</g:Label> 
        </g:south> 
</g:DockLayoutPanel> 

Answer 2

将边距添加到DockLayoutPanel的父元素中。例如，如果要向RootLayoutPanel添加DockLayoutPanel：

DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
RootLayoutPanel rootPanel = RootLayoutPanel.get();
rootPanel.setStylePrimaryName("rootLayoutPanel");
rootPanel.add(dockLayoutPanel);

并添加CSS

.rootLayoutPanel {
    margin: 5px;
}