java - 仅在 GWT2.0 布局/uibinder 世界中使用 css 在屏幕上居中对象

Question

互联网上有几种方法可以通过 css(-ve 边距、table-cell hack 等)将某些内容置于屏幕中心。直到现在我想使用 native 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 等的情况下实现吗？

谢谢。

Answer 1

最后，在 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();
}