Navigation with Button

Flow
1

In vaadin 12 i user normaly for navigation the RouterLink

Here an example, which works

@Route(value = "About", layout = MainLayout.class)
@PageTitle("About")
public class About extends VerticalLayout {
	public static final String VIEW_NAME = "About";
	public About() {
	....

@Route("")
public class MainLayout extends Div implements RouterLayout {
...
	RoterLink aboutLink = new RouterLink(null, About.class);

How can i make this by using a normal Vaadin-Button, i.e.

@Route("")
public class MainLayout extends Div implements RouterLayout {
...
	Button aboutButton = new Button("About");
	aboutButton.addClickListener(e -> {
	...
	});
2

UI.getCurrent().navigate(class or route) should do it.

3

When i use the following code

@Route("")
public class MainLayout extends Div implements RouterLayout {
...
	Button aboutButton = new Button("About");
	aboutButton.addClickListener(e -> {
		UI.getCurrent().navigate(About.class)
	});

Then i get the following error

Unable to create an instance of 'org.app.view.settings.About'. Make sure it has a no-arg constructor
4

Seems to work for me in the [Bookstore starter project]
(https://vaadin.com/start/latest/java-ui). I modified the SampleCrudView’s constructor to start like this:

    public SampleCrudView() {
        setSizeFull();
        HorizontalLayout topLayout = createTopBar();

        Button button = new Button("Navigate");
        button.addClickListener( e -> UI.getCurrent().navigate(AboutView.class));
        topLayout.add(button);

By clicking the Navigate button, it takes me to the About view. That error message sounds like there’d be a missing no-argument constructor in About.java.

-Olli

5

Thanks, now it works

6

hans-georg gloeckler:
In vaadin 12 i user normaly for navigation the RouterLink

Here an example, which works

@Route(value = "About", layout = MainLayout.class)
@PageTitle("About")
public class About extends VerticalLayout {
	public static final String VIEW_NAME = "About";
	public About() {
	....

@Route("")
public class MainLayout extends Div implements RouterLayout {
...
	RoterLink aboutLink = new RouterLink(null, About.class);

How can i make this by using a normal Vaadin-Button, i.e.

@Route("")
public class MainLayout extends Div implements RouterLayout {
...
	Button aboutButton = new Button("About");
	aboutButton.addClickListener(e -> {
	...
	});

I agree, it would be nice that a RouterLink could be associated to a Button for navigation.

7

Amaury Ollagnier:

hans-georg gloeckler:
In vaadin 12 i user normaly for navigation the RouterLink

Here an example, which works

@Route(value = "About", layout = MainLayout.class)
@PageTitle("About")
public class About extends VerticalLayout {
	public static final String VIEW_NAME = "About";
	public About() {
	....

@Route("")
public class MainLayout extends Div implements RouterLayout {
...
	RoterLink aboutLink = new RouterLink(null, About.class);

How can i make this by using a normal Vaadin-Button, i.e.

@Route("")
public class MainLayout extends Div implements RouterLayout {
...
	Button aboutButton = new Button("About");
	aboutButton.addClickListener(e -> {
	...
	});

I agree, it would be nice that a RouterLink could be associated to a Button for navigation.

Yeah it seems natural that you’d be able to define a RouterLink and then reference that link in a Button or maybe the MenuBar planned for version 14, or even the buttons in an AppLayout.

8

There’s a workaround you can use:

            Button button = new Button("Link text");
            RouterLink routerLink = new RouterLink("", SecondView.class);
            routerLink.getElement().appendChild(button.getElement());
            add(routerLink); // don't add the Button to the layout

This will create you a clickable “Button” that behaves like a RouterLink.

-Olli