I currently try to set the title
of the page.
public class A extends FlexLayout implements RouterLayout {}
@Route(value = "b", layout = A.class)
public class B extends FlexLayout{}
@Route(value = "c", layout = A.class)
public class C extends FlexLayout{}
To do so I tried to call UI.getCurrent().getPage().setTitle("demo title")
during afterNavigation
. Unfortunately this does not work for the initial navigation (and neither worked adding an attachListener
).
I also tried configuring it using the PageConfigurator
on the outermost RouterLayout
like this:
@Override
public void configurePage(InitialPageSettings settings) {
settings.addMetaTag("title", "demo title");
settings.addMetaTag("og:title", "demo title");
settings.addFavIcon("icon", "frontend/images/favicon.ico", "48x48");
}
HasDynamicTitle
only seems to work if the implementing class also defines the @Route
but not the encapsulating RouterLayout
For some reason the Router
itself sets the title during navigation.
The Router
defines the title using JS and redefining document.title
while Page.setTitle
seems to only modify the html.head.title
tag.
How does one set the title in a single spot?
How does one prevent the Router
form setting the title to the value of the current URL?
Using the @PageTitle
annotation is not an option as in my case the title is not known at compiletime.
Vaadin Flow is a unique framework that lets you build web apps without writing HTML or JavaScript. Get started Read documentation.
// Have some data List<Person> people = Arrays. asList( new Person("Nicolaus Copernicus", 1543), new Person("Galileo Galilei", 1564), new Person("Johannes Kepler", 1571)); // Create a grid bound to the list Grid<Person> grid = new Grid<>(); grid. setItems(people); grid. addColumn(Person::getName).
A link that handles navigation internally using Router instead of loading a new page in the browser.
If you have an unchanging page title you can just set it with an annotation @PageTitle
.
@PageTitle("home")
class HomeView extends Div {
HomeView(){
setText("This is the home view");
}
}
The official Vaadin Flow documentation suggests to use the HasDynamicTitle
.
Example:
@Route(value = "blog")
class BlogPost extends implements HasDynamicTitle, HasUrlParameter<Long> {
private String title = "";
@Override
public String getPageTitle() {
return title;
}
@Override
public void setParameter(BeforeEvent event,
@OptionalParameter Long parameter) {
if (parameter != null) {
title = "Blog Post #" + parameter;
} else {
title = "Blog Home";
}
}
}
Source
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With