访问 Vaadin 14 中的导航栏

huangapple go评论85阅读模式
英文:

Accessing to navbar in vaadin 14

问题

我正在使用 Vaadin 14 开发我的应用程序
我的 MainView 类继承自 AppLayout 类这使我可以使用 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;
    }
}

以上是您提供的代码部分的中文翻译。如果您还有其他需要翻译的部分,请继续提供。

英文:

I'm using vaadin 14 for my application.
My MainView class extends Applayout class. This allows me to use addToNavBar(true, some Components) function which adds navigation bar to your application.

Now, In my main view, inside the navigation bar, I have register and login buttons populated. If click on these buttons, using addonclick listener I delegate to other views like Login and Registration. During these view changes, the navbar on top still stays there. However, if the user logged in or registered, I want to remove these login and register buttons in navigation bar and replace them with profile picture icon located inside the navbar. However, from child views(register,login) I couldn't find a way to access to navbar with vaadin 14. Accordingly, how can I access and change the content of the navbar from child views?

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;
}

答案1

得分: 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() 即可。

英文:

There is currently no good API for this. One reason is that framework needs to be agnostic to how you build your menu. I have solved this by creating small interface of this kind

public interface HasTabsAccessor {
public default Tabs getTabs(Component component) {
Optional&lt;Component&gt; 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;
}
}

Which I can then add to views where I need to access the menu.

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

And then just using getTabs() in the view.

huangapple
  • 本文由 发表于 2020年8月31日 19:56:19
  • 转载请务必保留本文链接:https://go.coder-hub.com/63670348.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定