Hi, all.
I have in my app MainLaout “/” class that has div wrapper and in this div I has “/profile”. So I want make also this wrapper div in Profile view, like this “/profile/about”. How can I do this?
I tried do this, like described on “Routes and Navigation” topic, but it’s not helped. When I try route to /profile/about - nothing happens. This construction still mappings only on /about.
public class MainLayout extends Composite<VerticalLayout> implements HasComponents, RouterLayout, BeforeEnterObserver {
private Div contentDiv = new Div();
private HeaderComponent headerComponent = new HeaderComponent();
private HorizontalLayout containerLayout = new HorizontalLayout();
private VerticalLayout leftSideBarLayout = new VerticalLayout();
private Tabs navigationBar = new Tabs();
private Tab homeTab = new Tab("Home");
private Tab publicTabTitle = new Tab("Public");
private Tab globalTab = new Tab("Blogcamp");
private Tab tagsTab = new Tab("Tags");
private Tab usersTab = new Tab("Users");
private QueryParameters qparams;
public MainLayout() {
getContent().setSizeFull();
getContent().setClassName("main-body");
containerLayout.setSizeFull();
containerLayout.addClassName("container");
leftSideBarLayout.setSizeFull();
leftSideBarLayout.addClassName("left-sidebar");
homeTab.addClassName("navigation-tab");
homeTab.addClassName("home-tab");
publicTabTitle.setEnabled(false);
publicTabTitle.addClassName("title-tab");
globalTab.addClassName("navigation-tab");
globalTab.addClassName("child-tab");
globalTab.addComponentAsFirst(new Icon(VaadinIcon.GLOBE));
tagsTab.addClassName("navigation-tab");
tagsTab.addClassName("child-tab");
tagsTab.addClassName("under-icon-tab");
usersTab.addClassName("navigation-tab");
usersTab.addClassName("child-tab");
usersTab.addClassName("under-icon-tab");
navigationBar.add(homeTab, publicTabTitle, globalTab, tagsTab, usersTab);
navigationBar.addClassName("navigation-bar");
navigationBar.setOrientation(Tabs.Orientation.VERTICAL);
leftSideBarLayout.add(navigationBar);
contentDiv.addClassName("content");
containerLayout.add(leftSideBarLayout, contentDiv);
add(headerComponent, containerLayout);
navigationBar.addSelectedChangeListener(event -> {
String selectedTab = event.getSource().getSelectedTab().getLabel();
if (selectedTab.equals(homeTab.getLabel())) {
UI.getCurrent().navigate("");
} else if (selectedTab.equals(globalTab.getLabel())) {
UI.getCurrent().navigate("global", qparams);
} else if (selectedTab.equals(tagsTab.getLabel()) ) {
UI.getCurrent().navigate("tags", qparams);
} else if (selectedTab.equals(usersTab.getLabel())) {
UI.getCurrent().navigate("users", qparams);
}
});
}
@Override
public void showRouterLayoutContent(HasElement content) {
contentDiv.getElement().appendChild(content.getElement());
}
@Route(value = "profile", layout = MainLayout.class)
@PageTitle("Profile - Blogcamp")
@StyleSheet(StaticResources.MAIN_LAYOUT_STYLES)
public class ProfileView extends Composite<Div> implements HasComponents, RouterLayout {
private VerticalLayout mainLayout = new VerticalLayout();
private VerticalLayout userLayout = new VerticalLayout();
private VerticalLayout switchLayout = new VerticalLayout();
private Div contentDiv = new Div();
private HorizontalLayout avatarLayout = new HorizontalLayout();
private HorizontalLayout infoLayout = new HorizontalLayout();
public ProfileView() {
getContent().setSizeFull();
mainLayout.setSizeFull();
userLayout.setSizeFull();
avatarLayout.setSizeFull();
infoLayout.setSizeFull();
userLayout.add(avatarLayout, infoLayout);
switchLayout.setSizeFull();
contentDiv.setSizeFull();
mainLayout.add(userLayout, switchLayout, contentDiv);
add(mainLayout);
}
@Override
public void showRouterLayoutContent(HasElement content) {
contentDiv.getElement().appendChild(content.getElement());
}
}
@Route(value = "about", layout = ProfileView.class)
@PageTitle("Profile - About")
public class AboutMeView extends Composite<Div> implements HasComponents {
public AboutMeView() {
add(new H2("About"));
}
}
Thanks.