Updating the Page Title during Navigation
You can update the page title in two ways during navigation:
-
Use the
@PageTitle
annotation. -
Implement
HasDynamicTitle
.
Note
| These approaches are mutually exclusive; using both in the same class results in a runtime exception at startup. |
Using the @PageTitle Annotation
The simplest way to update the Page Title is to use the @PageTitle
annotation on your Component
class:
Example: Using `@PageTitle`to update the page title:
@PageTitle("home")
class HomeView extends Div {
public HomeView() {
setText("This is the home view");
}
}
Note
|
The @PageTitle annotation is read only from the actual navigation target; super classes and parent views aren’t considered.
|
Setting the Page Title Dynamically
As an alternative, you can also update the page title at runtime by implementing the HasDynamicTitle
interface.
Example: Implementing HasDynamicTitle
to update the page title.
@Route(value = "blog")
class BlogPost extends Component
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";
}
}
}
BCB28141-05D7-4DF0-AC9C-C0D73C4FC97D