Marshal's Blog

gwt布局的居中处理

先前写的videos项目，所有Panel都是从浏览器左上角开始的。对话框都是居中的，但是因为Panel，显得很别扭。

使用DockPanel进行居中处理，基本思路是，屏幕左边是WEST，屏幕中间是CENTER，屏幕右边是EAST，将项目的Panel填到DockPanel的CENTER。

通过Window方法获取到浏览器的宽度，如果超过640px，则宽度是640，如果宽度小于640，则充满整个宽度。

如果宽度不小于640，则左（WEST）右(EAST)各占去多出的1/2宽度。

这样就实现了居中。见：

if (Window.getClientWidth() > 640) {
    this.panel.setWidth("640px");
    int width = (Window.getClientWidth() – 640) / 2;
    this.leftPanel.setWidth(width + "px");
    this.rightPanel.setWidth(width + "px");
} else {
    this.panel.setWidth(Window.getClientWidth() + "px");
    this.leftPanel.setWidth(0 + "px");
    this.rightPanel.setWidth(0 + "px");
}

 

另外，窗口是可以调整的，或者比如智能手机从竖屏到横屏切换，这时候需要再次调用上面的代码。

需要注册一个到Window的ResizeHandler，实现其方法，方法代码就是上面的即可。

源代码见：

http://easymorse.googlecode.com/svn/tags/Videos-0.3.3/

   发送文章为PDF