Routing and Navigation Flashcards
Doc
https://vaadin.com/docs/latest/flow/routing
Route
A route in Vaadin lingo means a view mapped to a specific URL. URLs can also contain route parameters or query parameters that views can utilize to configure their internal state further.
Routes and Components
You can use the @Route annotation to define any component as a route target for a given URL fragment.
Defining the SomePathComponent component as the target for the specific route “some/path”.
@Route(“some/path”)
public class SomePathComponent extends Div {
public SomePathComponent() {
setText(“Hello @Route!”);
}
}
Assuming your application is running from the root context, when the user navigates to https://example.com/some/path, either by clicking a link in the application or entering the address in the address bar, the SomePathComponent component is shown on the page.
@Route Annotation - dropped
If you omit the @Route annotation parameter, the route target is derived from the class name. The derived name is in lower case and the trailing View is removed. Also, MainView or Main names are mapped to root (value is “”).
MyEditor becomes “myeditor”
PersonView becomes “person”
MainView becomes “”
Route Alias
Adding two @RouteAlias annotations for HomeView. Navigating to “home” or “main” navigates to the same view as the main route.
@Route(“”)
@RouteAlias(“home”)
@RouteAlias(“main”)
public class HomeView extends Div {
public HomeView() {
setText(“Hello @Route!”);
}
}
Navigating between routes
Switching between routes or views can be initiated in two ways: programmatically using UI.navigate() methods; or by using links. The navigate() method is more agile for a Java programmer, as the view change can be issued from anywhere in your code and you can interact with the target view. Using links, however, is the native web way of moving from one view to another, allowing you for example to share the direct link to a specific view with a colleague, and they work even if the session has expired.
navigate()
In the browser, the navigate() method triggers a location update and the addition of a new history state entry, but doesn’t issue a full page reload.
Button button = new Button(“Navigate to company”);
button.addClickListener(e ->
button.getUI().ifPresent(ui ->
ui.navigate(“company”))
);
navigate() - modifying the target
The navigate() method where you give the target view class as a parameter returns the actual target view as Optional. This allows you to further configure the new view with its Java API.
Creating an edit button that navigates to a separate view and assigns the DTO to the target view with its Java API:
new Button(“Edit “ + user.getName(), event -> {
ui.navigate(UserEditor.class)
.ifPresent(editor -> editor.editUser(user));
})
For the active user of the application, a view to edit the selected entity is opened, but they can’t share a direct link to edit the same entity with their colleague. If deep linking is required, the target view must maintain enough details about the UI state in the URL, or the developer must use route parameters to pass the data, instead of the direct Java API.
navigate() passing route parameters
If your target view implements HasUrlParameter, you can submit trivial data to the target view as route parameters. Compared to directly interacting with the target views Java API, this method automatically maintains the URL, which is beneficial for deep linking. However, you can’t pass more complex objects as route parameters as such, and you always need to consider data safety parameters that end up in URLs.
Navigation to the user/123 route target (where “123” is the parameter) upon clicking a button:
Button editButton = new Button(“Edit user details”);
editButton.addClickListener(e ->
editButton.getUI().ifPresent(ui -> ui.navigate(
UserProfileEdit.class, “123”))
);
navigate - Query Parameters and Route Template Parameters
In addition to handling Route Parameters as in the above example, the UI.navigate() method has other overloads that allow you to pass Query Parameters or Route Templates Parameters to the target view.
RouterLink Component
Navigation with RouterLink fetches the content of the new component without reloading the page. The page is updated in place without a full page reload, but the URL in the browser is updated.
To use RouterLink, you need:
A view with a @Route annotation.
A RouterLink component linking to that view.
import com.vaadin.flow.component.html.RouterLink;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.html.Div;
@Route(“home”)
public class HomeView extends VerticalLayout {
public HomeView() {
add(new Div(“Welcome to the Home Page”));
RouterLink linkToAbout = new RouterLink(“Go to About”, AboutView.class);
add(linkToAbout);
}
}
@Route(“about”)
public class AboutView extends VerticalLayout {
public AboutView() {
add(new Div(“Welcome to the About Page”));
}
}
@Route(“home”) and @Route(“about”) define navigable views.
new RouterLink(“Go to About”, AboutView.class); creates a clickable link to AboutView.
It makes use of client side routing
Server Side vs Client Side Routing
https://www.telerik.com/blogs/server-side-routing-vs-client-side-routing
