ZK 自定义列表框组件

Question

我想用select Mold实现Listbox的一个很常用的功能，在ZK上找不到。

情况：用户从列表框中选择值。 When the value is selected and the user open that listbox again, I need to change the model to the same model, but with empty listitem in front.如果他选择那个空值，模型必须再次更改为相同，但在索引 0 处没有空列表项。

我尝试了很多东西，比如写作：

1) ZUL 的动态模型。它确实有效，但我想让 ZUL 尽可能简单和干净。

<listbox id="x" mold="select" model="@load(not empty vm.criteria[self.id].selectedItem ? 
vm.metaDataMap[self.id].model : vm.metaDataMap[self.id].modelWithEmptyValue)"
    selectedItem="@bind(vm.criteria[self.id].selectedItem)">
    <listitem>
        <listcell label="@load(each.value)" value="@load(each)" />
    </listitem>
</listbox>

2) 为我的列表框编写 SelectorComposer。它无法正常工作，因为标签和值有时会消失，并且不会将值设置为“@bind(vm.criteria[self.id].selectedItem)”。还有 index`es 的一些问题

public class ListboxComposer extends SelectorComposer<Listbox> {
private static final long serialVersionUID = 1L;

public ListModelList<CaseStatusEnum> status = new ListModelList<CaseStatusEnum>(CaseStatusEnum.values());
public ListModelList<CaseStatusEnum> statusWithEmpty = new ListModelList<CaseStatusEnum>(CaseStatusEnum.values());

public Listbox comp;

public void doAfterCompose(Listbox comp) throws Exception {
    super.doAfterCompose(comp);
    comp.setModel(new ListModelList<CaseStatusEnum>(status));
    statusWithEmpty.add(0, null);
}

public ListModelList<CaseStatusEnum> getStatus() {
    return status;
}

@Listen("onSelect = listbox")
public void onSelect(SelectEvent<Listitem, CaseStatusEnum> evt) {
    Listbox listbox = this.getSelf();
    Listitem selectedItem = listbox.getSelectedItem();
    int selectedIndex = selectedItem.getIndex();
    if (listbox.getSelectedItem().getValue() != null) {
        listbox.setModel(statusWithEmpty);
        if (selectedIndex >= listbox.getModel().getSize()) {
            listbox.setSelectedIndex(listbox.getModel().getSize()-1);
        } else {
            listbox.setSelectedIndex(selectedIndex+1);
            listbox.getItemAtIndex(selectedIndex+1).setLabel(selectedItem.getLabel());
            listbox.getItemAtIndex(selectedIndex+1).setValue(selectedItem.getValue());
        }
    } else {
        listbox.setModel(status);
        listbox.clearSelection();
    }
}
}

在我的 ZUL 中：

<listbox id="x" mold="select" apply="lt.pathxxx.ListboxComposer"
    model="${composer.status}"
    selectedItem="@bind(vm.criteria[self.id].selectedItem)">
    <listitem>
        <listcell label="@load(each.value)" value="@load(each)" />
    </listitem>
</listbox>

3) 我什至尝试通过扩展列表框来创建自定义组件。但我也没有成功。

所以基本上，我想通过扩展列表框来编写自己的自定义组件，它可以根据是否有选中的项目来操作模型，或者没有（空）？正确的做法是什么？

编辑： 基本上，我需要的是

<hlayout id="x">
    <listbox mold="select" selectedItem="@bind(vm.criteria[self.parent.id].order)"
         visible="@load(not empty vm.criteria[self.parent.id].order)">
         <listitem label="" value="" />
         <listitem label="Descending" value="desc" />
         <listitem label="Ascending" value="asc" />
    </listbox>
    <listbox mold="select" selectedItem="@bind(vm.criteria[self.parent.id].order)"
        visible="@load(empty vm.criteria[self.parent.id].order)">
        <listitem  label="Descending" value="desc" />
        <listitem  label="Ascending" value="asc" />
    </listbox>
<hlayout>

我需要 ONE 列表框中的所有这些，并且必须从 java 设置模型（列表项）。也许我现在说得更清楚了！感谢您的回复！

Answer 1

祖尔：

<listbox mold="select" model="@load(vm.listboxModel)" selectedItem="@bind(vm.selectedListBoxItem)" onSelect="@command('check')">
    <listitem>
        <listcell label="@load(each.value)" value="@load(each)" />
    </listitem>
</listbox>

虚拟机：

private ListModelList listData; // of course init and fill it
private Person selectedListBoxItem;

public ListModelList getListData() {
    return listData;
}

public void setSelectedListBoxItem(Person selectedListBoxItem) {
    this.selectedListBoxItem = selectedListBoxItem;
}

public Person getSelectedListBoxItem() {
    return selectedListBoxItem;
}

@Command
@NotifyChange("listData")
public void check() {
    if (selectedListBoxItem != null) {
        if (listData.get(0) != null) {
            System.out.println("added null");
            listData.add(0, null);
        }
    } else {
        if (listData.get(0) == null) {
            System.out.println("removed null");
            listData.remove(0);
        }
    }
}

编辑：更像这样？是否对其进行了测试（使用System.out.println("removed null");，因此您可以检查他是否做了他需要做的事情。

希望这是你想要的（我对你的问题的理解）。

问候寒意。