使用布局面板系统将面板置于GWT中

在GWT开发人员网站上，有一个示例显示了位于页面中间的面板。使用GWT布局面板可以在页面中间固定面板吗？使用布局面板系统将面板置于GWT中

http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels

2011-04-19 benstpierre

可以实现与简单的CSS的效果。例如：

<html><head> 
<style> 
.outer { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color: blue; 
} 

.inner { 
    position: absolute; 
    top: 25%; 
    right: 25%; 
    bottom: 25%; 
    left: 25%; 
    background-color: red; 
} 
</style> 
</head> 
<body> 
<div class="outer"><div class="inner" /></div> 
</body></html>

一旦基本作用是在普通使用CSS绝对定位的对象创建的，您可以用LayoutPanels重建它，因为他们基本上是一个CSS约束系统。

来源

2011-04-20 02:26:38 BobV

这不会创建一个固定宽度的内部分区〜 – 2011-04-20 04:00:10

* fixed-percentage *分区的好解决方案。 *固定大小*的解决方案有点不同，但它仍然可以用简单的CSS！ – 2011-04-20 21:35:02

我不认为你可以在LayoutPanel中自动制作一个固定宽度的图层中心。但是，您可以将该图层插入到DOM中以获取其大小，然后自己计算正确的偏移量。您可以看到Google如何在DialogBox.center（）的代码中执行此操作（而不是在LayoutPanel中）。

来源

2011-04-20 03:58:32

有一个很好的老CSS技巧为中心固定大小，绝对盒，使用自动CSS布点（无需JavaScript的）：

第一中心通过框的左上角top: 50%; left: 50%;
当然，这个盒子对于现在的底部/右边来说太远了。
然后使用边距减去框的高度/宽度的一半。（这是固定大小的，这样你就可以计算与笔和纸:-)

例“的高度/宽度的一半”：

<!doctype html> 

<html> 
<head> 

<style type="text/css"> 
    .box { 
     position: absolute; 
     background-color: red; 
     height: 300px;  width: 400px; /* Using "px" here, but you */ 
              /* can also use "em" etc. */ 
     top: 50%;   left: 50%; 
     margin-top: -150px; margin-left: -200px; 
    } 
</style> 

</head> 

<body> 
    <div class="box">Box</div> 
</body> 
</html>

应用这种风格到您的LayoutPanel - 我不没有一个完整的代码示例，但我认为它应该是可能的。

来源

2011-04-20 21:31:34

LayoutPanel为实现NeedsResize接口的子面板提供onResize（）事件。如果各种面板尺寸可能发生变化，您可以使用此挂钩。 – BobV 2011-04-20 22:49:23

使用布局面板系统将面板置于GWT中

回答

相关问题