Ваадин 14 - сетка исчезает при использовании вложенного макета - PullRequest
Новая
       42

Ваадин 14 - сетка исчезает при использовании вложенного макета

1 голос
/ 06 февраля 2020

После реализации вложенных макетов я столкнулся с проблемой рендеринга компонента, содержащего сетку. Анализ показывает, что присутствует в html, но у него есть атрибуты блока отображения, и сетка никогда не видна.

Я читал аналогичный вопрос ( Vaadin 14 - Сетка не отображается / заполняется, когда используется в Вложенный макет ), но перечисленные там предложения не дали мне результата.

Вот мой код:

MainLayout.kt: 

@Theme(value = Material::class, variant = Material.DARK)
class MainLayout : Composite<Div>(), RouterLayout {

    //Component to delegate content through.
    private val mainContent: Div = Div()
    private val layout = VerticalLayout(
            Span("from MainLayout top"),
            mainContent,
            Span("from MainLayout bottom"))


    override fun showRouterLayoutContent(hasElement: HasElement) {

        Objects.requireNonNull(hasElement)
        Objects.requireNonNull(hasElement.element)
        mainContent.removeAll()
        mainContent.element.appendChild(hasElement.element)
    }

    init {
        content.add(layout)
    }
}

LayoutWithMenuBar.kt: 

@ParentLayout(value = MainLayout::class)
class LayoutWithMenuBar : Composite<Div>(), RouterLayout {

    private val mainContent: Div = Div()

    private val menuBar = HorizontalLayout(
            RouterLink("Home", MainView::class.java),
            RouterLink("Tprojects", TProjectDashboard::class.java),
            RouterLink("ViewA", ViewA::class.java),
            RouterLink("ViewB", ViewB::class.java))


    private val root = VerticalLayout(menuBar, mainContent)

    override fun showRouterLayoutContent(hasElement: HasElement) {

        Objects.requireNonNull(hasElement)
        Objects.requireNonNull(hasElement.element)
        mainContent.removeAll()
        mainContent.element.appendChild(hasElement.element)
    }


    init {

        content.add(root)
    }
}

и компонент, содержащий сетку - TProjectDashboard: 

@Route("dashboard/tproject", layout = LayoutWithMenuBar::class)
class TProjectDashboard(@Autowired val tprojectService: TProjectService): VerticalLayout() {

    var tprojectGrid = Grid<TProject>(TProject::class.java)

    init {
        //tprojectGrid
        tprojectGrid.setColumns(
                TProject::tprojectUuid.name,
                TProject::tprojectClass.name,
                TProject::tprojectState.name,
                TProject::tentityState.name,
                TProject::size.name)

        tprojectGrid.setItems(tprojectService.findAll())

        tprojectGrid.setSizeFull()
        tprojectGrid.setWidthFull()
        tprojectGrid.setHeightFull()

        add(tprojectGrid)

        setSizeFull()
        setHeightFull()
        setWidthFull()
    }
}

Тот же результат, который я получаю при изменении родительского элемента TProjectDashboard с VerticalLayout на Composite. Подход с вложенными макетами хорошо работает для простых компонентов, таких как Span, и если я удалю ссылку на макет из аннотации @Route, я увижу свою сетку.

Вот экран, как он выглядит сейчас: введите описание изображения здесь

Буду признателен за любые подсказки или решения.

Заранее спасибо.

1 Ответ

4 голосов
/ 06 февраля 2020

Вероятно, это проблема с размерами, которая, к сожалению, случается слишком часто. Я бы начал с вызова setSizeFull() на mainContent div. Если это не помогло, go просматривает элементы в браузере и пытается увидеть, где исчезает размер, например, какой первый элемент имеет ширину или высоту 0.

Редактировать: Настройка setSizeFull() на всех компонентах работает. Я бы немного упростил ваши макеты, изменив композиты типа VerticalLayout. Тогда вы сможете избавиться от множества setSizeFull() вызовов.

Код ниже находится в Java, так как у меня не настроено Kotlin, вы можете позвонить getContent().setSizeFull() в MainLayout если вы хотите, чтобы он занимал всю высоту страницы.

MainLayout

@Theme(value = Material.class, variant = Material.DARK)
public class MainLayout extends Composite<VerticalLayout> implements RouterLayout {

    //Component to delegate content through.
    private Div mainContent = new Div();

    public MainLayout() {
        getContent().add(
                new Span("from MainLayout top"),
                mainContent,
                new Span("from MainLayout bottom"));
        mainContent.setSizeFull();
    }

    @Override
    public void showRouterLayoutContent(HasElement hasElement) {
        Objects.requireNonNull(hasElement);
        Objects.requireNonNull(hasElement.getElement());
        mainContent.removeAll();
        mainContent.getElement().appendChild(hasElement.getElement());
    }
}

LayoutWithMenuBar

@ParentLayout(value = MainLayout.class)
public class LayoutWithMenuBar extends Composite<VerticalLayout> implements RouterLayout {

    private Div mainContent = new Div();

    private HorizontalLayout menuBar = new HorizontalLayout(
            new RouterLink("Tprojects", TProjectDashboard.class));

    public LayoutWithMenuBar() {
        getContent().add(menuBar, mainContent);
        mainContent.setSizeFull();
    }

    @Override
    public void showRouterLayoutContent(HasElement hasElement) {
        Objects.requireNonNull(hasElement);
        Objects.requireNonNull(hasElement.getElement());
        mainContent.removeAll();
        mainContent.getElement().appendChild(hasElement.getElement());
    }
}

TProjectDashboard

@Route(value = "dashboard/tproject", layout = LayoutWithMenuBar.class)
public class TProjectDashboard extends VerticalLayout {

    private Grid<TProject> tprojectGrid = new Grid<>(TProject.class);

    public TProjectDashboard() {

        tprojectGrid.setItems(
                new TProject("Erik", "Software Engineer"),
                new TProject("Fia", "Kindergarden teacher"),
                new TProject("Jack", "All trades")
        );

        add(tprojectGrid);
    }
}
...