java - ZK自定义列表框组件

Question

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

情况:用户从列表框中选择值。当选择该值并且用户再次打开该列表框时，我需要将模型更改为相同的模型，但前面的列表项为空。如果他选择该空值，则模型必须再次更改为相同的值，但索引 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)”。还有索引的一些问题

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");，这样您就可以检查他是否做了他需要做的事情。

希望这是您想要的(这是我对您问题的理解)。

欢迎冷静。