Vaadin - How can I use the UriFragmentUtility class?

Question

How can I make this? https://vaadin.com/book/-/page/advanced.urifu.html#figure.advanced.urifu

I would like to use a label (eg like in this page "Figure 11.12, Application State Management with URI Fragment Utility") and if the user click on it, then the browser focuses that paragraph.

Answer 1

One way is to use method UI.scrollIntoView(Component) after receiving UriFragmentChangedEvent . Another way would be to use JavaScript. SSCCE (MainUI class):

VerticalLayout layout = new VerticalLayout();
Label up = new Label("Up");
Label middle = new Label("Middle");
Label down = new Label("Down");


@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = QwertUI.class)
public static class Servlet extends VaadinServlet {
}

@Override
protected void init(VaadinRequest request) {
    Button buttonUp = new Button("Up");
    Button buttonMiddle = new Button("Middle");
    Button buttonDown = new Button("Down");
    buttonUp.addClickListener(this);
    buttonMiddle.addClickListener(this);
    buttonDown.addClickListener(this);
    up.setHeight("666px");
    middle.setHeight("666px");
    down.setHeight("666px");
    layout.addComponents(buttonUp, buttonMiddle, buttonDown, up, middle, down);
    setContent(layout);
    getPage().addUriFragmentChangedListener(
            new UriFragmentChangedListener() {
        public void uriFragmentChanged(
                UriFragmentChangedEvent source) {
            enter(source.getUriFragment());
         }
     });
     enter(getPage().getUriFragment());
}

private void enter(String uriFragment){

    UI ui = up.getUI();
    if(uriFragment != null){
        switch(uriFragment){
            case "Up": ui.scrollIntoView(up);; break;
            case "Middle": ui.scrollIntoView(middle); break;
            case "Down": ui.scrollIntoView(down); break;
        }
    }
}

@Override
public void buttonClick(ClickEvent event)
{
    getPage().setUriFragment(event.getButton().getCaption());
}