James
James

Reputation: 708

Multiple Route in a single page Vaadin application

I'm trying to understand routing in vaadin, i find it very complicated. any insight you can share will be very appreciated.

What i want to do is when i click a button i will be redirected to another page.

This is my code so far:

@Route(value = "person-form", layout = MainLayout.class)
@RolesAllowed("USER")
@Uses(Icon.class)
public class NuovaPraticaView extends Div {

    private TextField firstName = new TextField("First name");
    private TextField lastName = new TextField("Last name");
    private EmailField email = new EmailField("Email address");
    private DatePicker dateOfBirth = new DatePicker("Birthday");
    private PhoneNumberField phone = new PhoneNumberField("Phone number");
    private TextField occupation = new TextField("Occupation");

    private Button cancel = new Button("Cancel");
    private Button save = new Button("Save");

    private Binder<SamplePerson> binder = new Binder<>(SamplePerson.class);

    public NuovaPraticaView(SamplePersonService personService) {
        addClassName("nuova-pratica-view");

        add(createTitle());
        add(createFormLayout());
        add(createButtonLayout());

        binder.bindInstanceFields(this);
        clearForm();

        cancel.addClickListener(e -> clearForm());
        save.addClickListener(e -> {
            personService.update(binder.getBean());
            Notification.show(binder.getBean().getClass().getSimpleName() + " details stored.");
            clearForm();
            UI.getCurrent().navigate(DocumentazioneEntita.class);
        });
    }

    private void clearForm() {
        binder.setBean(new SamplePerson());
    }

    private Component createTitle() {
        return new H3("Nuova Pratica");
    }

    private Component createFormLayout() {
        FormLayout formLayout = new FormLayout();
        email.setErrorMessage("Please enter a valid email address");
        formLayout.add(firstName, lastName, dateOfBirth, phone, email, occupation);
        return formLayout;
    }

    private Component createButtonLayout() {
        Button button = new Button("Salva ed Esci", event -> {UI.getCurrent().navigate(DocumentazioneEntita.class);
    });
        HorizontalLayout buttonLayout = new HorizontalLayout(button);
        buttonLayout.addClassName("button-layout");
        save.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        buttonLayout.add(save);
        buttonLayout.add(cancel);
        
        return buttonLayout;
    }

When i click on the button i want to go to my other class called DocumentazioneEntita.java

Now i found that you have to write route like that:

@Route(value = {"person-form|documentazione-entita"}, layout = MainLayout.class)

but i will encounter this mistake:

Type mismatch: cannot convert from String[] to StringJava(16777233)

Upvotes: 1

Views: 399

Answers (2)

Andr&#233; Schild
Andr&#233; Schild

Reputation: 4754

Having multiple routes to the same target is done with route alias.

https://vaadin.com/docs/latest/routing/route

@Route("myroute")
@RouteAlias("alias1")
@RouteAlias("alias2")
public class HomeView extends Div {
    public HomeView() {
        setText("Hello @Route!");
    }
}

Upvotes: 3

ollitietavainen
ollitietavainen

Reputation: 4290

Your direct problem is the curly braces around the value property:

@Route(value = {"person-form|documentazione-entita"}, layout = MainLayout.class)
               ^                                   ^

In an annotation, the curly braces are indicating a list of values instead of an individual value:

  @Something(value = {"a", "b", "c"})

would mean the @Something annotation has three values: "a", "b", and "c".

Your example has a single String in a list, but the @Route annotation doesn't support lists of values, only single values, no {curly braces}. Each view can only have a single @Route annotation and each @Route annotation must have a unique value within the application. You can use any number of @RouteAlias annotations in addition to @Route to have multiple paths to the same view. Each @RouteAlias value must be unique for the application, too.

Upvotes: 3

Related Questions