在 vaadin 14 中访问导航栏

Question

我正在为我的应用程序使用 vaadin 14。我的 MainView class 扩展了 Applayout class。这让我可以使用 addToNavBar(true, some Components) 函数来为您的应用程序添加导航栏。

现在，在我的主视图中，导航栏内填充了注册和登录按钮。如果单击这些按钮，我将使用 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;
    }

Answer 1

目前没有好的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()。

在 vaadin 14 中访问导航栏

Accessing to navbar in vaadin 14

css

java

vaadin

vaadin10

vaadin14