Избегайте обновления контента в SplitLayout - PullRequest
Новая
       16

Избегайте обновления контента в SplitLayout

1 голос
/ 27 мая 2019

У меня есть разделение в моем приложении vaadin, в котором в первом столбце я должен показать разные страницы, добавленные с помощью метода addToPrimary, в то время как во втором столбце у меня должна быть страница, которая содержит IFrame с видеоконференцией.Теперь проблема в том, что когда я меняю маршрут в первом столбце, обновляется даже второй, и это обновляет IFrame.Реализация showRouterLayoyutContent выглядит следующим образом: 

    @Override
public void showRouterLayoutContent(HasElement content) {

    if (this.accessControl.isAccessGranted(UI.getCurrent(), ((ContentView) content).getName()) && ((ContentView) content).getName().equals("contattaView") ) {
        setLayoutCall((com.vaadin.flow.component.Component) content);
    }
    else if (this.accessControl.isAccessGranted(UI.getCurrent(), ((ContentView) content).getName())) {
        setLayoutContent((com.vaadin.flow.component.Component) content);

    }

}

И двумя методами setLayoutCall и setLayoutContent являются следующие: 

private void setLayoutContent(com.vaadin.flow.component.Component content) {

    split.addToPrimary(content);

}
private void setLayoutCall(com.vaadin.flow.component.Component content) {

    split.addToSecondary(content);
    split.setThemeName("visible-split");
}

Как можно избежать обновления всего содержимого при обновлениипервый столбец разделенного макета с помощью навигации?

ОБНОВЛЕНИЕ: Я также показываю очень простой код, который я тестирую.Следующий класс является основным макетом: 


private SplitLayout split = new SplitLayout();
    private HorizontalLayout hl = new HorizontalLayout();
    private Div firstDiv = new Div();
    private Div secondDiv = new Div();
    public MainView() {
        Button button = new Button("Click me",
                event -> Notification.show("Clicked!"));
        final VerticalLayout menuBar = new VerticalLayout();
        menuBar.add(new RouterLink("first view", FirstView.class));
        menuBar.add(new RouterLink("second view", SecondView.class));
        menuBar.setAlignItems(Alignment.CENTER);
        add(menuBar);
        //split.addToPrimary(firstDiv);
        //split.addToSecondary(secondDiv);
        //firstDiv.setId("first");
        //secondDiv.setId("second");
        //hl.add(firstDiv,secondDiv);
        add(split);
        //add(hl);
    }

    @Override
    public void showRouterLayoutContent(HasElement element) {

        if(element!=null && element.getClass().getName().contains("FirstView")) {
            split.addToPrimary((Component) element);
            //firstDiv.removeAll();
            //firstDiv.add((Component) element);
            //firstDiv.removeAll();      
            //firstDiv.getElement().appendChild(new Element[]{element.getElement()});

        }
        else if(element!=null && element.getClass().getName().contains("SecondView") ) {
            secondDiv.removeAll();
            secondDiv.add((Component) element);
            split.addToSecondary((Component) element);
            //split.addToSecondary(element.getElement().getComponent().get());
        }


    }

Хотя эти два вида добавлены в разделение: 

    @Route(value="v1",layout=MainView.class)
public class FirstView extends VerticalLayout implements RouterLayout  {

    public FirstView() {
        add(new Label("First View"));
    }
}

@Route(value = "v2",layout=MainView.class)
public class SecondView extends VerticalLayout implements RouterLayout {
public SecondView() {
    IFrame frame = new IFrame();
    frame.setSrc("https://www.youtube.com/watch?v=LoigVtPCYPk&list=RDLoigVtPCYPk&start_radio=1");
    add(frame);
}
}

1 Ответ

0 голосов
/ 27 мая 2019

Ваш комментарий действительно является проблемой.

Я рекомендую создать оболочку Div для основного содержимого и вместо этого изменить содержимое. 

private final Div wrapper;

public MyLayout() {
    wrapper = new Div();
    wrapper.setSizeFull();

    split.addToPrimary(wrapper);
}

private void setLayoutContent(com.vaadin.flow.component.Component content) {
    wrapper.removeAll();
    wrapper.add(content);
}

Вы также можете сделать то же самое для второстепенного. Кроме того, чтобы предотвратить автоматическое удаление каких-либо компонентов при навигации, вы также можете переопределить removeRouterLayoutContent (доступно в Vaadin 14) 

@Override
public void removeRouterLayoutContent(HasElement oldContent) {
    // Do nothing, we remove manually in showRouterLayoutContent
}

Редактировать

Если вы не можете переопределить removeRouterLayoutContent, вы можете попробовать создать свой собственный экземпляр HasElement для добавления. Это немного взломано, но может быть самым простым решением. 

public void showRouterLayoutContent(HasElement content) {
    if (content.getClass().getSimpleName().contains("TestView")) {
        // Creating a new instance should stop it from being auto removed 
        content = new TestView();
        firstDiv.add((Component) content);
    }
    ...
}
...