Центрировать объект на экране, используя только CSS в GWT2.0 layout / uibinder world - PullRequest
Новая
       16

Центрировать объект на экране, используя только CSS в GWT2.0 layout / uibinder world

1 голос
/ 14 февраля 2010

В интернете есть несколько способов центрировать что-либо на экране с помощью css (-ve поля, хак таблицы и т. Д.). Я был вполне доволен этим до тех пор, пока не захотел использовать нативные панели / виджеты макета 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 и т. Д.?

Спасибо.

Ответы [ 3 ]

0 голосов
/ 14 февраля 2010

Я не уверен, почему вы против скриптинга, чтобы достичь этого, тем более что вам понадобится хотя бы некоторое количество скриптов, чтобы показать и скрыть загрузчик в нужное время. Вы можете обнаружить, что ваше решение не будет хорошо работать в браузерах.

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 (), когда закончите.

0 голосов
/ 17 июля 2011

Центрирование элементов также можно выполнить с помощью UIBinder без CSS: 

<g:HorizontalPanel width="100%" height="100%">
 <g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
  <g:Label>Hello Center</g:Label>
 </g:cell>
</g:HorizontalPanel>
0 голосов
/ 14 февраля 2010

В конце концов я смог использовать общие CSS с помощью 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>

где соответствующий css (связанный через связку): 

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

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

единственный совет здесь заключался в том, чтобы вызывать sureInjected в соответствующем конструкторе виджета (подробности см. http://code.google.com/p/google-web-toolkit/issues/detail?id=4408): 

@UiField CommonBundle res;

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