Почему компоненты внутри VerticalLayout не выровнены по вертикали в Vaadin 11? - PullRequest
Новая
       13

Почему компоненты внутри VerticalLayout не выровнены по вертикали в Vaadin 11?

0 голосов
/ 15 ноября 2018

У меня есть представление в Vaadin 11, которое отображается по URL-адресу, например products/X, где X - это идентификатор продукта. 

@Route(value = "products")
public class ProductView extends VerticalLayout implements HasUrlParameter<String> {

    public ProductView() {

    }

    [...]
}

Я не могу отобразить какую-либо информацию на этой странице, не имея продукта, поэтому я добавляю все компоненты в метод setParameter: 

@Override
public void setParameter(final BeforeEvent beforeEvent, 
                final String param) {
    final Product product = findProduct(param);

    if (product == null) {
        return;
    }
    final Text name = new Text(product.getName());
    final Text interestRate = new Text(String.format("Ставка: %.2f", 
                    product.getInterestRatePercentPerAnnum()));
    final Text duration = new Text(String.format("Срок: %d - %d месяцев",
                    product.getDurationMonths().getStart(),
                    product.getDurationMonths().getEndInclusive()));
    final Text provider = new Text(String.format("Организация: %s",
                    product.getProvider().getName()));
    final Text description = new Text("<html>Hi there! <b>Bold</b> text</html>");


    add(name);
    add(interestRate);
    add(duration);
    add(description);
    add(provider);
}

Но различные элементы данных отображаются в одной строке:

Screenshot

Это означает, что по какой-то причине VerticalLayout размещает компоненты горизонтально.

Как я могу это исправить (убедитесь, что каждый добавленный компонент отображается в отдельной строке)?

1 Ответ

0 голосов
/ 15 ноября 2018

Text - это конкретный компонент, поскольку он соответствует текстовым узлам в DOM (в браузере).Следовательно, HTML-элементы отсутствуют, а содержимое, добавляемое в VerticalLayout, будет перемещаться слева направо.Вот как это выглядит в дереве браузера: enter image description here

Используйте Div вместо: 

final Div name = new Div(new Text("Product"));
final Div interestRate = new Div(new Text(String.format("Ставка: %.2f",
            0.05d)));
final Div duration = new Div(new Text(String.format("Срок: %d - %d "
            + "месяцев", 10, 11)));
final Div provider = new Div(new Text(String.format("Организация: %s"
            , 10)));
final Div description = new Div(new Text("<html>Hi there! <b>Bold</b>"
            + " text</html>"));

Используя Div, вы вставляете div элементов в VerticalLayout, чтобы он мог выполнять свою работу.

...