Vaadin 13. Wrapper Div

Flow
1

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.

2

Do you have any view with @Route(“”), it is mandatory to have one route with “”. If your view “profile” is the default view, you can also add @RouteAlias(“”) there.

3

Tatu Lund:
Do you have any view with @Route(“”), it is mandatory to have one route with “”. If your view “profile” is the default view, you can also add @RouteAlias(“”) there.

Hi. Yeah, I already have one route with root navigation, but it’s too content div that wrapping on MainLayout.

@Route(value = "", layout = MainLayout.class)
@RouteAlias(value = "home", layout = MainLayout.class)
@PageTitle("Blogcamp")
@StyleSheet(StaticResources.MAIN_LAYOUT_STYLES)
public class HomeView extends Composite<Div> implements HasComponents {

    public HomeView() {

    }
}

So I want to do like Iam goes to /profile and in this ProfileView also was be one wrapper div where will be wrapping profile/about AboutMe.view.

With this counstruction that I described on top works only like this http://localhost:8080/about, so I want to do http://localhost:8080/profile/about, but still don’t understand how currently did this.

4

I made it:

ProfileView

@RoutePrefix(value = "profile")
@ParentLayout(MainLayout.class)

Now it’s works as I wanted.

Anyway thanks for reply, wish you a good day!