1

互联网上有几种方法可以通过 css（-ve margins、table-cell hack 等）在屏幕上居中显示某些内容。直到现在，当我想使用本机 gwt2.0 布局面板/小部件时，我对此感到非常满意。想象一下，你想做一个“加载屏幕”来显示一个旋转的圆圈，直到应用程序试图找出下一步将用户发送到哪里（在后台，应用程序正在检查用户是否登录）。

我在 gwt uiBinder xml 中有这段代码：

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
         xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <ui:with field='res' type='ru.atamur.resources.CommonBundle'/>

  <g:HTMLPanel>
    <g:Image resource='{res.loader}'/>
  </g:HTMLPanel>

</ui:UiBinder>

我基本上希望图像垂直和水平显示在屏幕的中心。

任何聪明的想法如何在没有脚本的情况下实现 getWidth/setHeight 等？

谢谢。

4

3 回答 3

0

我不确定您为什么反对使用脚本来实现这一点，尤其是因为您至少需要一些脚本才能在正确的时间显示和隐藏加载程序。您可能会发现您的解决方案无法跨浏览器正常运行。

GWT 有 PopupPanel，它使您尝试做的事情变得非常简单。

// A popup that doesn't auto-hide, and doesn't let the
// user click on anything else.
PopupPanel popup = new PopupPanel(false,true);
popup.setGlassEnabled(); // Dims the rest of the page
popup.setWidget(new Image(res.loader()));
popup.center(); // Show popup centered

然后，您只需在完成后调用 popup.hide()。

于 2010-02-14T20:53:52.103 回答
0

最后，我能够在 HTMLPanel 的帮助下使用通用 css：

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'>

    <ui:with field='res' type='ru.atamur.resources.CommonBundle'/>

    <g:HTMLPanel>
        <div class="{res.centerStyle.container}">
            <p class="{res.centerStyle.centered}">
                <g:Image resource='{res.loader}'/>
            </p>
        </div>
    </g:HTMLPanel>

</ui:UiBinder>

其中相应的 css（通过捆绑链接）是：

.container {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    display: table
}

.centered {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

这里唯一的提示是在相应的小部件构造函数中调用 ensureInjected（有关详细信息，请参阅http://code.google.com/p/google-web-toolkit/issues/detail?id=4408）：

@UiField CommonBundle res;

public LoadingScreen() {
    initWidget(uiBinder.createAndBindUi(this));
    res.centerStyle().ensureInjected();
}
于 2010-02-14T19:35:39.483 回答
0

居中项目也可以使用不带 CSS 的 UIBinder 来完成：

<g:HorizontalPanel width="100%" height="100%">
 <g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
  <g:Label>Hello Center</g:Label>
 </g:cell>
</g:HorizontalPanel>
于 2011-07-17T18:35:19.880 回答