解答：
使用页签控件与向导控件组合实现向导
使用插件动态添加flex面板实现
效果如图：
1、使用页签控件+向导控件
页面如图：
代码如下：
//注册控件
@Override
public void onGetControl(OnGetControlArgs e) {
String key = e.getKey();
if (key != null && key.contains("tabpage")) {
TabPage tabPage = new TabPage();
tabPage.setKey(e.getKey());
tabPage.setView(this.getView());
e.setControl(tabPage);
}
}
private void createDynamic() {
Tab tab = this.getView().getControl("dmp_tabap");
// TabAp
List<Map<String, Object>> items = new ArrayList<>();
List<Map<String, Object>> datas = this.getDatas();
if (datas != null) {
for (int i = 0; i < datas.size(); i++) {
String id = datas.get(i).get("id").toString();
String name = datas.get(i).get("name").toString();
String type = datas.get(i).get("type").toString();
TabPageAp tabPageAp = new TabPageAp(); // 创建TabPageAp
String tabPageId = "tabpage" + String.valueOf(i);
tabPageAp.setKey(tabPageId);
tabPageAp.setName(
new LocaleString(ResManager.loadKDString(name, "DemoCustomFormPlugin_0", "ecos-custom-formplugin")
+ String.valueOf(i + 1)));
if (StringUtils.equals(type, "1")) {
this.getPageCache().put("tabkey",tabPageId);
}
Map<String, Object> tabPageMap = new HashMap<>();
tabPageMap = tabPageAp.createControl();
tabPageMap.put(tabPageId, tabPageAp);
items.add(tabPageMap);
}
}
tab.addControls(items);
}
@Override
public void afterBindData(EventObject e) {
createDynamic();
Tab tab = this.getView().getControl("dmp_tabap");
String tabkey = this.getPageCache().get("tabkey");
tab.activeTab(tabkey);
}
eq:只展示向导控件、则去掉页签控件的初始可见
2、后台生成flex组合实现
代码如下：
@Override
public void loadCustomControlMetas(LoadCustomControlMetasArgs e) {
FlexPanelAp dynamicFlex = this.createDynamicFlex();
if (dynamicFlex != null) {
Map<String, Object> mapFlex = new HashMap<>();
mapFlex.put(ClientProperties.Id, "dmp_dynamicap");
mapFlex.put(ClientProperties.Items, dynamicFlex.createControl().get(ClientProperties.Items));
e.getItems().add(mapFlex);
}
}
@Override
public void beforeBindData(EventObject e) {
FlexPanelAp dynamicFlex = this.createDynamicFlex();
if (dynamicFlex != null) {
Container dynamicAp = this.getControl("dmp_dynamicap");
dynamicAp.getItems().addAll(dynamicFlex.buildRuntimeControl().getItems());
this.getView().createControlIndex(dynamicAp.getItems());
}
}
@Override
public void onGetControl(OnGetControlArgs e) {
String key = e.getKey();
if (key.contains("childflex1")) {
Container container = new Container();
container.setKey(e.getKey());
container.setView(this.getView());
container.addClickListener(this);
e.setControl(container);
}
}
private FlexPanelAp createDynamicFlex() {
FlexPanelAp dynamicFlex = new FlexPanelAp();
dynamicFlex.setKey("dynamicflex");
List<Map<String, Object>> datas = this.getDatas();
if (datas != null) {
for (int i = 0; i < datas.size(); i++) {
String id = datas.get(i).get("id").toString();
String name = datas.get(i).get("name").toString();
String type = datas.get(i).get("type").toString();
FlexPanelAp firstFlex = this.createFirstFlex(i, name, type);
FlexPanelAp flex = new FlexPanelAp();
flex.setKey("outflex" + i);
flex.setGrow(0);
flex.setShrink(0);
flex.setWidth(new LocaleString("120px"));
flex.setHeight(new LocaleString("62px"));
flex.setAlignItems("center");
flex.setJustifyContent("flex-start");
flex.getItems().add(firstFlex);
if (i + 1 != datas.size()) {
FlexPanelAp secondFlex = this.createSecondFlex(i);
flex.getItems().add(secondFlex);
}
dynamicFlex.getItems().add(flex);
}
}
return dynamicFlex;
}
private FlexPanelAp createFirstFlex(int i, String name, String type) {
FlexPanelAp flex = new FlexPanelAp();
flex.setKey("flex1" + i);
flex.setAlignItems("center");
flex.setJustifyContent("center");
flex.setGrow(0);
flex.setShrink(0);
flex.setWidth(new LocaleString("50px"));
// 创建迭代阶段lab
LabelAp stage = new LabelAp();
stage.setId("labelname" + i);
stage.setKey("labelname" + i);
stage.setName(new LocaleString(name));
stage.setFontSize(14);
FlexPanelAp childflex = createFirstchildFlex(i, type);
flex.getItems().add(childflex);
flex.getItems().add(stage);
return flex;
}
private FlexPanelAp createFirstchildFlex(int i, String type) {
FlexPanelAp flex = new FlexPanelAp();
flex.setKey("childflex1" + i);
flex.setAlignItems("center");
flex.setJustifyContent("center");
flex.setGrow(0);
flex.setShrink(0);
flex.setWidth(new LocaleString("36px"));
flex.setHeight(new LocaleString("36px"));
flex.setRadius("50%");
Style flexStyle = new Style();
String labelcolor = null;
if (StringUtils.equals(type, "1")) {
flex.setBackColor("#007fff");
Border border = new Border();
border.setBottom("1px solid #007fff");
border.setRight("1px solid #007fff");
border.setLeft("1px solid #007fff");
border.setTop("1px solid #007fff");
flexStyle.setBorder(border);
flex.setStyle(flexStyle);
labelcolor = "#ffffff";
} else {
flex.setBackColor("#ffffff");
Border border = new Border();
border.setBottom("1px solid #e2e7ef");
border.setRight("1px solid #e2e7ef");
border.setLeft("1px solid #e2e7ef");
border.setTop("1px solid #e2e7ef");
flexStyle.setBorder(border);
flex.setStyle(flexStyle);
labelcolor = "#191919";
}
LabelAp stage = new LabelAp();
stage.setId("radius" + i);
stage.setKey("radius" + i);
stage.setName(new LocaleString(String.valueOf(i)));
stage.setFontSize(14);
stage.setForeColor(labelcolor);
Style labeStyle = new Style();
Padding labelPadding = new Padding();
labelPadding.setTop("8px");
labeStyle.setPadding(labelPadding);
stage.setStyle(labeStyle);
flex.getItems().add(stage);
return flex;
}
private FlexPanelAp createSecondFlex(int i) {
FlexPanelAp flex2 = new FlexPanelAp();
flex2.setKey("flex2" + i);
flex2.setAlignItems("center");
flex2.setJustifyContent("center");
flex2.setGrow(0);
flex2.setShrink(0);
flex2.setWidth(new LocaleString("70px"));
flex2.setHeight(new LocaleString("1px"));
Style flexStyle = new Style();
Border border = new Border();
border.setTop("1px dashed #e2e7ef");
flexStyle.setBorder(border);
Padding flexPadding = new Padding();
flexPadding.setBottom("8px");
flexStyle.setPadding(flexPadding);
flex2.setStyle(flexStyle);
return flex2;
}
3、数据
private List<Map<String, Object>> getDatas() {
List<Map<String, Object>> datas = new ArrayList<>();
Map<String, Object> data = new HashMap<>();
data.put("id", "12345671");
data.put("name", "开始");
data.put("type", "0");
datas.add(data);
data = new HashMap<>();
data.put("id", "12345672");
data.put("name", "进行中");
data.put("type", "1");
datas.add(data);
data = new HashMap<>();
data.put("id", "12345673");
data.put("name", "完成");
data.put("type", "0");
datas.add(data);
return datas;
}
4、解析属性（如图）
5、最后不推荐使用这种动态加控件的，尽量采用第一种方式实现
推荐阅读