我正在寻找一种方法,仅在选择选项卡之后而不是之前将内容加载到 Vaadin TabSheet 上的选项卡中。 Lazy Loading , 是术语。
延迟加载 Vaadin 7 Tabsheet不明显,因为每个tab的内容在构建的时候都是需要的。
我读了线程,Strategy for creating lazy load tabs , 在 Vaadin 论坛上。我确实学习了Jens Jansson在客户端,Vaadin 已经是延迟加载了。在选择选项卡之前,DOM 不会填充到浏览器中。但我担心减轻服务器端的负载。该线程不能解决该问题。
最佳答案
这是一个完整的例子。以后可以封装在专门的类中。请注意,每次选择时,所选选项卡的内容都会发生变化。如果您需要延迟加载但不需要每次都刷新,我会创建一个 boolean 加载字段并使刷新依赖于它。与直觉相反,您可以通过提供 eager 构造函数参数来使选项卡变得 eager。例如,它对于第一个显示的选项卡很有用。
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 的所有操作。请注意,这里的 eager LazyTabs 和常规标签页是不同的,因为 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();
}
}
}
}
如果你想以同样的方式使用 Accordion ,我不会继承 tabsheet 而是通过装饰器模式实现功能。 Accordion 是 TabSheet 的子类,因此它应该是可管理的。
关于java - 在 Vaadin 7 的 TabSheet 中延迟加载选项卡内容的策略,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27612837/