tab动态渲染或侧边菜单实现

CUBA
, ,
#1

请教一下tab怎么可以动态渲染,通过读取数据库,动态渲染tab,或者做成侧边菜单实现,菜单数据也是读取数据库数据,能否提供一下实现的demo.谢谢
image

#2

动态添加tab的示例：

  1. XML:
<layout>
    <tabSheet id="tabSheet"
              width="200"
              height="100">
    </tabSheet>
</layout>
  1. Controller:
@Inject
private TabSheet tabSheet;
@Inject
private UiComponents uiComponents;

@Subscribe
public void onInit(InitEvent event) {
    Label<String> label = uiComponents.create(Label.TYPE_STRING);
    label.setValue("This is tab 1");
    tabSheet.addTab("tab1", label);
}

效果：
image

#3

image
你好,动态生成如上图样式,要怎么处理

#4

我给你的例子里面是很简单的在tab中添加了一个 Label，你需要根据你的业务逻辑在tab中添加其他组件。CUBA 中所有组件都支持通过代码添加。如果需要配置样式，可以给组件设置不同的 stylename。

另外，CUBA 还支持 fragment，你可以对页面功能进行组件化封装，fragment也同样支持通过代码添加。

#5

ok,感谢,我研究一下

#6

请问下每个tab里面的内容怎么渲染？

#7

如果是通过代码添加的组件，就需要通过代码触发数据加载。

比如我给的例子中，label.setValue("This is tab 1"); 就可以看做是加载数据的过程。你要根据你需要渲染的内容为tab里面的每个组件填入数据，这个过程可以是通过API、SQL等方法加载数据。