英文:
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<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;
}
}
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论