CODEWITHSUNDEEP
vaadin
Black
Black

Reputation: 5367

vaadin - basic layout - change content after Tab selected

I'm looking at the Basic App layout example for Vaadin

https://labs.vaadin.com/layout-examples/app-layout-basic

I'm trying to to understand the best way to compose the content. I notice that If I use the left-hand navigation to switch from "Home" to "About" the content of the page doesn't change.

When I look over the source code, it seems the content is static - there is no illustration of how to have the content change based on the selected Tabs in the NavBar.

Can someone provide an example of how this should be cone in practice?

Upvotes: 0

Views: 676

Answers (1)

Erik Lumme
Erik Lumme

Reputation: 5342

Here are some approaches:

Tab change listener

You can add a listener for which tab is selected with tabs.addSelectedChangeListener, and then change the content based on that.

Typically you'd create a map, Map<Tab, Component>, which defines the content to show for each tab. When the listener is fired, you retrieve the component for that tab from the map, and add it to some part of your layout, removing the previous component(s) first.

Example in the Vaadin Cookbook.

Tabs with routes/links

You can put links inside the tabs. This can be either a RouterLink, which allows navigating without reloading the page, or an Anchor.

You put these in your main layout, and each tab holds the route to one of your views. For example, say we have a MyView class:

@Route(layout = MainLayout.class)
public class MyView extends VerticalLayout {
    ...
}

And a MainLayout that holds the navigation:

public class MainLayout extends HorizontalLayout implements RouterLayout {
    public MainLayout() {
        Tab tab1 = new Tab(new RouterLink("Go to MyView", MyView.class));
        myTabs.add(tab1);
    }
}

Example in the Vaadin Cookbook.

Routes/links

If you don't want to use tabs, just use RouterLink or Anchor. With a RouterLink you can pass the class of the view you want to navigate to when clicked.

The RouterLink also has the option of setHighlightCondition, which sets under which condition a link should be highlighted. For example, setHighlightCondition(HighlightConditions.sameLocation()) causes the link to be highlighted whenever a user navigates to a location that matches the link.

Use setHighlightAction to choose how the link is highlighted. By default, it will add a highlight attribute to the link, which can be used to style it.

Upvotes: 3

Related Questions