Updating Page Title on Navigation

There are two ways to update the page title during navigation:

  • using the @PageTitle annotation

  • implementing HasDynamicTitle

Note
These two approaches are mutually exclusive: using both on the same class will result 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.

@PageTitle("home")
class HomeView extends Div {

  HomeView(){
    setText("This is the home view");
  }
}
Note
The @PageTitle annotation is read from the actual navigation target only; neither its superclasses nor its parent views are considered.

Setting the Page Title Dynamically

Implementing the interface HasDynamicTitle allows us to change the title from Java at runtime:

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

See also: