java - Vaadin - 如何使用 UriFragmentUtility 类？

Question

我怎样才能做到这一点？ https://vaadin.com/book/-/page/advanced.urifu.html#figure.advanced.urifu

我想使用一个标签(例如，像本页“图 11.12，使用 URI 片段实用程序的应用程序状态管理”)，如果用户单击它，浏览器就会聚焦该段落。

Answer 1

一种方法是使用方法 UI.scrollIntoView(Component)收到后UriFragmentChangedEvent 。另一种方法是使用 JavaScript。 SSCCE(MainUI 类):

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