Centre object on-screen using css only in GWT2.0 layout/uibinder world

Question

There are a few ways out there in the internet to centre something on the screen via css (-ve margins, table-cell hack etc). I was quite happy with that until now when I wanted to use native gwt2.0 layout panels/widgets. Imagine you want to do a "loading screen" to show a spinning circle until the app tries to figure out where to send user next (in background the app is checking if user is logged in or not).

I have this code in 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>

I basically want the image to be displayed in the center of the screen both vertically and horizontally.

Any bright ideas how to achieve that w/o scripting getWidth/setHeight etc?

Thanks.

Answer 1

In the end I was able to use general css with the help of HTMLPanel:

<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>

where corresponding css (linked via a bundle) is:

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

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

the only hint here was to call ensureInjected in the corresponding widget constructor (see http://code.google.com/p/google-web-toolkit/issues/detail?id=4408 for details):

@UiField CommonBundle res;

public LoadingScreen() {
    initWidget(uiBinder.createAndBindUi(this));
    res.centerStyle().ensureInjected();
}

Answer 2

I'm not sure why you're against scripting to achieve this, especially since you're going to need at least some amount of scripting in order to show and hide the loader at the right times. You may find your solution isn't going to work well across browsers.

GWT has the PopupPanel, which makes what you're trying to do quite simple.

// 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

Then you just call popup.hide() when you're done.