Ваадин: Как добавить 3 вложенных макета - PullRequest
Новая
       10

Ваадин: Как добавить 3 вложенных макета

2 голосов
/ 28 января 2020

В данный момент у меня проблемы с пользовательским интерфейсом в vaadin. Мои взгляды связаны с RouterLayout, например:

  • -AppView (основной интерфейс) | url: /
  • - OperationsView (вложенный макет внутри контейнера в AppView) | url: / operations
  • --- Operation1View (вложенный макет внутри контейнера в OperationsView) | url: / operation1 <- это не работает </li>

Мои объявления перед любым классом:

Объявление AppView 

@Route(value = AppView.ROUTE)

Объявление OperationsView 

@Route(value = OperationsView.ROUTE, layout = AppView.class)

Объявление Operation1View 

@Route(value = Operation1View.ROUTE, layout = OperationsView.class)

Проблема в том, что третий макет отображается неправильно. Он принимает всю страницу, когда он принят, и портит все в пользовательском интерфейсе при переходе на другую страницу. Должен ли URL быть: / operations / operation1, а не / operation1? Однако я не могу заставить его работать правильно. Я что-то пропустил? Или иметь 3 вложенных макета невозможно с помощью vaadin?

Возможное решение (?): Следует ли отклонить третий вложенный макет и добавить методы во второй макет, чтобы удалить содержимое контейнера и отобразить предметы, которые я хочу? Я действительно не забочусь о навигации по URL в этом. Это последнее, что я могу придумать.

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

1 Ответ

3 голосов
/ 28 января 2020

Или с vaadin невозможно иметь 3 вложенных макета?

Возможно. Но реализуете ли вы RouterLayout в классах OperationsView и AppView?

Взгляните на пример здесь: Множественные родительские макеты с @ ParentLayout . Он имеет настройки, очень близкие к вашей. 

public class MainLayout extends Div implements RouterLayout {
}

@ParentLayout(MainLayout.class)
public class MenuBar extends Div implements RouterLayout {
    public MenuBar() {
        addMenuElement(TutorialView.class, "Tutorial");
        addMenuElement(IconsView.class, "Icons");
    }
    private void addMenuElement(Class<? extends Component> navigationTarget,
            String name) {
        // implementation omitted
    }
}

@Route(value = "tutorial", layout = MenuBar.class)
public class TutorialView extends Div {
}

@Route(value="icons", layout = MenuBar.class)
public class IconsView extends Div {
}

Разве URL не должен быть: / operations / operation1, а не / operation1?

Нет, как в аннотации @Router вы указали, что это operation1. Указывая layout, вы определяете структуру DOM, а не маршрут навигации. From docs :

Устанавливает родительский компонент для целевого компонента маршрута. При навигации между компонентами которые используют тот же макет, тот же экземпляр компонента используется повторно. Целью макета по умолчанию является пользовательский интерфейс, но макет не должен быть настраиваемым пользовательским интерфейсом, поскольку пользовательский интерфейс - это специальный класс, используемый для определения места окончания стека маршрутов, и не следует использовать родительские макеты. Все стеки макетов будут добавлены к пользовательскому интерфейсу, так как он представляет элемент Body.

НО Если вы хотите, чтобы он был operation\operation1, вместо него следует использовать @RoutePrefix ParentLayout Route Control

Он занимает всю страницу, когда принимается, и портит все в пользовательском интерфейсе при переходе на другую страницу

Не могли бы вы показать Снимок экрана или добавить некоторые детали, как это все испортило?

Редактировать:

На самом деле оказалось, что реализовать сложнее, чем я ожидал, но, похоже, это работает:

MainView.java

@Route("")
public class MainView extends VerticalLayout implements RouterLayout {
....

OperationsView.java

//This is needed if you want "operations" to be accessible on its own
@Route(value = "operations",layout = MainView.class)
@ParentLayout(MainView.class)
public class OperationsView extends VerticalLayout implements RouterLayout {

    Div content=new Div();
    public OperationsView(){
        System.out.println("operations view");
        add(new Label("operations view"));
        add(content);
    }
}

Operation1View.java

@Route(value="operation1",layout = OperationsView.class)
@RoutePrefix("operations")
public class Operation1View extends VerticalLayout {

    public Operation1View(){
        add(new Label("Operations view"));
    }
}
...