Выравнивание по центру в GWT LayoutPanels (эквивалент Alignment.MIDDLE_CENTER) - PullRequest
Новая
       42

Выравнивание по центру в GWT LayoutPanels (эквивалент Alignment.MIDDLE_CENTER)

1 голос
/ 02 февраля 2012

Как разместить LayoutPanel в среднем центре родительского LayoutPanel (RootLayoutPanel, экран, страница браузера)?Предполагая, что внутренняя панель имеет фиксированный размер, внешняя панель является гибкой и имеет размеры (с окном браузера).

В Vaadin это команда одной строки:
(VerticalLayout)outerPane).setComponentAlignment(innerPane, Alignment.MIDDLE_CENTER);

Что такое эквивалент GWT?
Перечисление Layout.Alignment GWT обеспечивает только BEGIN END STRETCH.
Неадекватное.Размещение по центру экрана необходимо для отображения небольших форм, диалоговых окон, предупреждающих сообщений, экранов входа и т. Д.

Подробная информация о моем сообщении на форуме GWT
Спасибо

--- ОБНОВЛЕНИЕ (27.2.2012) ---------------

Чтобы использовать предложенную технику - используя setWidgetLeftRight () и setWidgetTopBottom () - мне нужно вычислить вфактическое положение NW (x, y) внутреннего компонента относительно внешнего компонента и выполняется после каждого изменения размера внешнего контейнера или внутреннего контейнера (высота содержимого).

Так что, если GWT не поддерживает центрирование, и кажется, что даже в последней версии это не так, требуется больше кодирования: 

outerComponent.setWidgetLeftRight(innerComponent, x, PX, x, PX);
outerComponent.setWidgetTopBottom(innerComponent, y, PX, y, PX);

x, y для вычисления как:
x = (w1 - w2) / 2
y = (h1 - h2) / 2
где:
w1 - ширина внешнего компонента (переменная, легко получить?)
h1 -высота внешнего компонента (переменная, легко получить?)
w2 - ширина внутреннего центрированного компонента (фиксированная)
h2 - высота внутреннего центрированного компонента (переменная, в зависимости от содержимого, потенциально сложно получить)

Все желательно в пикселях (PX?) Или EM.Когда смешано с%, должно произойти больше конверсии.

При каждом событии изменения размера координаты должны пересчитываться (изменение w1, h1).

При каждом изменении внутреннего содержимого координаты должны пересчитываться (изменения h2).

Это в значительной степени замаскированный абсолютный макет (AbsolutePanel).

Решение CSS?Я нашел несколько примеров на этом сервере, но ни один не помечен как решенный.Ни один с вертикальным и горизонтальным центрированием и гибкой высотой внутреннего компонента.

Почему я не предпочитаю решение для макетов на основе CSS:

  • Склонны к проблемам с браузерами.GWT не поможет вам здесь.
  • Я считаю смешивание макетов в коде и в CSS плохим дизайнерским решением.CSS лучше всего оставить для «декоративных» объявлений (размеры и цвета шрифта, поля, отступы).
  • Мой собственный плохой опыт работы с макетами CSS;легко сломать, трудно отладить, много головных болей, прежде чем все сложить.Лучше всего избегать.Я возлагал большие надежды на GWT.

Я думаю об этом решении на основе кода:

  • новый подкласс Widget?Панель?Компоновка?Составная часть?(внутренний компонент)
  • реализовать ожидаемое RequResize, реализовать метод обратного вызова onResize ()
  • получить фактические значения для переменных размеров (w1, h1, h2).Как?
  • установить новые координаты для внутреннего компонента.Как?

Указывает любому, кто предоставляет решение на основе этих предпосылок:)

Ответы [ 2 ]

1 голос
/ 04 февраля 2012

Хорошо, вы можете использовать VerticalPanel и установить поле HorizontalAlignment или, если вы хотите использовать LayoutPanels, вы можете адаптировать решение в документах GWT, которые вы разместили в ветке групп Google. 

LayoutPanel p = new LayoutPanel(); 
Widget centercontent;
p.add(centercontent);
p.setWidgetLeftRight(centercontent, 5, EM, 5, EM);     // Center panel 
p.setWidgetTopBottom(centercontent, 5, EM, 5, EM);

Это создаст центральную панель с полями в 5 em слева, справа, сверху и снизу, как показано ниже (будет видна только белая панель посередине). EM - фиксированный размер, аналогичный пикселю, но зависит от базового размера шрифта. Если ваш базовый размер шрифта (определенный для вашего тела) установлен на 16 пикселей, то 1 EM = 16 px (см. здесь для получения информации о преобразовании).

enter image description here

Вы также можете использовать относительные значения для полей: 

p.setWidgetLeftRight(centercontent, 5, PCT, 5, PCT);     //5 % left and right margin
p.setWidgetTopBottom(centercontent, 5, PCT, 5, PCT);     // 5 % top and bottom margin.

Однако таким образом вы не сможете полностью решить свою проблему (разные размеры форм -> см. Скриншоты в теме Google), поскольку центральная панель всегда будет иметь фиксированные поля (5 EM или 5%) независимо от размера по вертикали. центральная панель.
Кроме того, содержимое центральной панели будет обрезано, если оно будет выше доступного размера экрана, и будет изменено при изменении размера браузера.

Так что я думаю, что лучший подход - поместить FlowPanel / HTMLPanel в LayoutPanel и применить стили CSS, чтобы разрешить естественное изменение размера.

0 голосов
/ 08 апреля 2013

Что если вы добавили ResizeListener на центральную панель (я не уверен, что это сработает, попробую сейчас). По сути, всякий раз, когда окно изменяет размеры, панель центрирует себя (вычисляя ее высоту относительно высоты ее родителя).

EDIT

В итоге я получил то, что хотел, позволив моей панели реализовать ResizeHandler и получив следующее: 

@Override public void onResize(ResizeEvent event) {

    // for my case, this is the first parent element with the full height.
    Widget parent = getParent().getParent();
    int height = parent.getOffsetHeight();

    // could make this more exact by including height of this panel.
    getElement().getStyle().setPaddingTop((int)((height - 80)/2), Unit.PX);
}

// my panel is not initially visible
@Override public void onAttach() { 
    super.onAttach();
    Scheduler.get().scheduleDeferred(new ScheduledCommand() {
        @Override public void execute() {
            onResize(null);
        }
    });
}
...