Доступ к панели навигации в vaadin 14

Я использую vaadin 14 для своего приложения. Мой класс MainView расширяет класс Applayout. Это позволяет мне использовать функцию addToNavBar (правда, некоторые компоненты), которая добавляет панель навигации в ваше приложение.

Теперь, в моем основном представлении, внутри панели навигации, у меня есть кнопки регистрации и входа в систему. Если щелкнуть эти кнопки, используя прослушиватель addonclick, я делегирую его другим представлениям, таким как «Вход» и «Регистрация». Во время этих изменений представления верхняя панель навигации остается на месте. Однако, если пользователь вошел в систему или зарегистрировался, я хочу удалить эти кнопки входа и регистрации на панели навигации и заменить их значком изображения профиля, расположенным внутри панели навигации. Однако из дочерних представлений (регистрация, вход) я не смог найти способ получить доступ к панели навигации с помощью vaadin 14. Соответственно, как я могу получить доступ и изменить содержимое панели навигации из дочерних представлений?

public class MainView extends AppLayout {
private static final long serialVersionUID = 1L;
private final Tabs menu;
private HorizontalLayout headerLayout;

public MainView() {
    setPrimarySection(Section.NAVBAR);
    headerLayout = createHeaderContent();
    addToNavbar(true, headerLayout);
    setDrawerOpened(false);
    menu = createMenu();
    addToDrawer(createDrawerContent(menu));
}

private HorizontalLayout createHeaderContent() {
    headerLayout = new HorizontalLayout();
    headerLayout.setId("header");
    headerLayout.getThemeList().set("dark", true);
    headerLayout.setWidthFull();
    headerLayout.setSpacing(false);
    headerLayout.setAlignItems(FlexComponent.Alignment.CENTER);
    headerLayout.add(new DrawerToggle());
    headerLayout.add(createWebsiteName());
    headerLayout.add(createMiddleSpacingInHeader());
    headerLayout.add(createLoginAndRegisterButtons());

    return headerLayout;
}

private Component createLoginAndRegisterButtons() {
        HorizontalLayout layout = new HorizontalLayout();
        layout.setPadding(true);
        layout.setSpacing(true);
        layout.setAlignItems(Alignment.STRETCH);

        Button register = createRegisterButton();
        Button login = createLoginButton();
        Image loggedInUserPicture = createLoggedInUserImage();

        layout.add(register, login, loggedInUserPicture);

        return layout;
    }

java css vaadin vaadin14 vaadin10
person Ahmet Eroğlu    schedule 31.08.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

public interface HasTabsAccessor {
    
    public default Tabs getTabs(Component component) {
        Optional<Component> parent = component.getParent();
        Tabs menu = null;
        while (parent.isPresent()) { 
            Component p = parent.get();
            if (p instanceof MainLayout) {
                MainLayout main = (MainLayout) p;
                menu = main.getMenu();
            }           
            parent = p.getParent();
        }
        return menu;
    }
}

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

    @Route(value = FormLayoutView.ROUTE, layout = MainLayout.class)
    @PageTitle(FormLayoutView.TITLE)
    public class FormLayoutView extends VerticalLayout implements BeforeLeaveObserver, HasTabsAccessor {
...

А затем просто используя getTabs() в представлении.

person Tatu Lund    schedule 31.08.2020
comment
Привет, Тату, большое спасибо за ваше чрезвычайно полезное решение, я хочу попробовать его, но в вашем интерфейсе вы используете main = main.getMenu (), в vaadin 14, я думаю, что здесь вы пытаетесь получить доступ к вкладкам на левая панель навигатора. Но я пытаюсь прочитать до верхней панели навигации. И этот экземпляр, к которому я не могу получить доступ, потому что я добавляю его, просто вызывая метод addToNavBar из класса mainview, который расширяет приложение. - person Ahmet Eroğlu; 31.08.2020
comment
Да, вам необходимо адаптировать решение к вашему приложению. Как я уже отмечал, фреймворк дает большую свободу при создании вашего нижнего макета, то есть меню может быть слева вверху. Это может быть на основе вкладок, макетов или чего-то еще. Поэтому воспринимайте это решение как общую идею, как перейти к MainLayout и получить там доступ к некоторому API, который вам, естественно, придется добавить в свой MainLayout. - person Tatu Lund; 31.08.2020
comment
Я понял, уже разобрался к настоящему моменту! :) Большое спасибо ! :) - person Ahmet Eroğlu; 31.08.2020