Updating the Page Title During Navigation

The page title can be updated in two ways during navigation:

1. Use the @PageTitle annotation.

2. Implement HasDynamicTitle.

These approaches are mutually exclusive: using both in the same class will result in a runtime exception at startup.

Using @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:

Java

@PageTitle("home")
class HomeView extends Div {
    public HomeView() {
        setText("This is the home view");
    }
}

Setting the Page Title Dynamically

As an alternative, you can implement the HasDynamicTitle interface. This approach allows you to change the title from Java at runtime:

Example: Implementing HasDynamicTitle to update the page title.

Java

@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";
        }
    }
}