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

  1. @PageTitle("home")
  2. class HomeView extends Div {
  3. public HomeView() {
  4. setText("This is the home view");
  5. }
  6. }
Note
The @PageTitle annotation is read only from the actual navigation target: super classes and parent views are not considered.

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

  1. @Route(value = "blog")
  2. class BlogPost extends Component
  3. implements HasDynamicTitle,
  4. HasUrlParameter<Long> {
  5. private String title = "";
  6. @Override
  7. public String getPageTitle() {
  8. return title;
  9. }
  10. @Override
  11. public void setParameter(BeforeEvent event,
  12. @OptionalParameter Long parameter) {
  13. if (parameter != null) {
  14. title = "Blog Post #" + parameter;
  15. } else {
  16. title = "Blog Home";
  17. }
  18. }
  19. }