java - 在Vaadin 7中的TabSheet中延迟加载标签内容的策略

我正在寻找一种仅在选择选项卡之后而不是之前将内容加载到Vaadin TabSheet上的选项卡中的方法。 Lazy Loading是该术语。

Vaadin 7 Tabsheet的延迟加载并不明显，因为在构建时需要每个选项卡的内容。

我在Vaadin论坛上阅读了主题Strategy for creating lazy load tabs。我确实从Jens Jansson那里了解到，在客户端，Vaadin已经在延迟加载。直到选中选项卡，DOM才会在浏览器中填充。但是我担心减轻服务器端的负载。该线程不能解决该问题。

最佳答案

这是一个完整的例子。以后可以将其封装在专用类中。请注意，每次选择时，选定的选项卡内容都会更改。如果您需要延迟加载但不需要每次都刷新，则可以创建一个布尔加载字段，并使刷新依赖于此。通过提供直观的构造函数参数，您可以直观地进行反击。例如，它对于显示的第一个选项卡很有用。

import com.vaadin.ui.Component;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TabSheet.SelectedTabChangeEvent;
import com.vaadin.ui.TabSheet.SelectedTabChangeListener;
import com.vaadin.ui.TextField;


public class TablesFrame extends CustomComponent {
private static class LazyTabChangeListener implements SelectedTabChangeListener {
    @Override
    public void selectedTabChange(SelectedTabChangeEvent event) {
        LazyTab tab = (LazyTab) event.getTabSheet().getSelectedTab();
        tab.refresh();
    }
}


private abstract class LazyTab extends CustomComponent {
    public LazyTab() {
        this(false);
    }


    public LazyTab(boolean eager) {
        if (eager) {
            refresh();
        }
    }


    abstract Component build();


    public final void refresh() {
        setCompositionRoot(build());
    }
}

private LazyTab tab1 = new LazyTab(true) {
    @Override
    Component build() {
        return new TextField("1");
    };
};

private LazyTab tab2 = new LazyTab() {
    @Override
    Component build() {
        return new TextField("2");
    };
};


public TablesFrame() {
    TabSheet ts = new TabSheet();
    ts.addSelectedTabChangeListener(new LazyTabChangeListener());
    ts.addTab(tab1, "Tab1");
    ts.addTab(tab2, "Tab2");
    setCompositionRoot(ts);
}
}

更新也可以继承TabSheet的子类。这样，您也可以使用常规选项卡，并具有TabSheet的所有操作。请注意，这里急切的LazyTab和常规选项卡有所不同，因为LazyTabs将重新加载。

import com.vaadin.ui.Component;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.TabSheet;


public class LazyTabSheet extends TabSheet {

public LazyTabSheet() {
    addSelectedTabChangeListener(new LazyTabChangeListener());
}


public static abstract class LazyTab extends CustomComponent {
    public LazyTab() {
        this(false);
    }


    public LazyTab(boolean eager) {
        if (eager) {
            refresh();
        }
    }


    public abstract Component build();


    public final void refresh() {
        setCompositionRoot(build());
    }
}


private static class LazyTabChangeListener implements SelectedTabChangeListener {
    @Override
    public void selectedTabChange(SelectedTabChangeEvent event) {
        Component selectedTab = event.getTabSheet().getSelectedTab();
        if (selectedTab instanceof LazyTab) {
            ((LazyTab) selectedTab).refresh();
        }
    }
}

}

如果您想以相同的方式使用手风琴，我不会继承Tabsheet，而是通过装饰器模式实现功能。手风琴继承了TabSheet的子类，因此它应该是可管理的。