Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vaadin Flow: setting the title

I currently try to set the title of the page.


Scenario

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{}

Attempts

  1. 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).

  2. 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");
    }
  1. HasDynamicTitle only seems to work if the implementing class also defines the @Route but not the encapsulating RouterLayout

Issue

For some reason the Router itself sets the title during navigation.

Stacktrace of the setTitleCall

The Router defines the title using JS and redefining document.title while Page.setTitle seems to only modify the html.head.title tag.


Question

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?


Note

Using the @PageTitle annotation is not an option as in my case the title is not known at compiletime.

like image 485
Gerrit Sedlaczek Avatar asked May 10 '19 11:05

Gerrit Sedlaczek


People also ask

What is flow in vaadin?

Vaadin Flow is a unique framework that lets you build web apps without writing HTML or JavaScript. Get started Read documentation.

How do you make a grid in vaadin?

// 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).

What is Routerlink vaadin?

A link that handles navigation internally using Router instead of loading a new page in the browser.


1 Answers

Fixed title

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

Dynamic title

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

like image 81
LOLWTFasdasd asdad Avatar answered Sep 30 '22 10:09

LOLWTFasdasd asdad