ListSubModel is not working with template and MVVM

asked 2012-03-07 09:03:34 +0800

Luxxx
18

updated 2012-03-07 09:26:51 +0800

Hi,

I noticed that ListSubModel is not working if you have a template in the combobox:
Here is the page:

<zk>
    <window border="none" vflex="1"
            apply="org.zkoss.bind.BindComposer"
            viewModel="@id('vm') @init('lu.vdl.trasal.zk.ComboboxTestVM')"
            validationMessages="@id('vmsgs')">

        <combobox id="items" width="300px" model="@load(vm.items)" autodrop="true" selectedItem="@bind(vm.item)">
            <template name="model" var="s">
                <comboitem label="@load(s)"></comboitem>
            </template>
        </combobox>
        <label value="@load(vm.item)"></label>
    </window>
</zk>

and the ViewModel:

package lu.vdl.trasal.zk;

import org.zkoss.zul.ListModel;
import org.zkoss.zul.SimpleListModel;

public class ComboboxTestVM {
    private String[] i = {"Hello", "World", "dog", "cat", "donald"};
    private String item;
    private ListModel<String> items = new SimpleListModel<String>(i);

    public ListModel<String> getItems() {
        return items;
    }
    public void setItems(ListModel<String> items) {
        this.items = items;
    }
    public String getItem() {
        return item;
    }
    public void setItem(String item) {
        this.item = item;
    }
}

If you enter 'd', then 'Hello' and 'World' are displayed in the combobox. And if you select the item then 'dog' or 'donald' are displayed at the label.
So the selection works fine, but the rendering is wrong.

Without a template, everything is ok!

        <combobox id="items" width="300px" model="@load(vm.items)" autodrop="true" selectedItem="@bind(vm.item)">
            <comboitem self="@{each=l}"/>
        </combobox>

This seems to be a bug?!?
Or am I doing something wrong here...???

Please help!
Roll

delete flag offensive retag edit

8 Replies

Sort by » oldest newest

answered 2012-03-09 02:13:11 +0800

paowang
140 ● 6

change SimpleListModel to ListModelArray and try it again.

private ListModel<String> items = new ListModelArray<String>(i);

link publish delete flag offensive edit

answered 2012-03-09 05:20:02 +0800

AnimalAan
9

public class SimpleListModel<E> extends AbstractListModel<E> implements Sortable<E>, ListSubModel<E>, Serializable
A simple implementation of ListModel.
Note: It assumes the content is immutable. If not, use ListModelList or ListModelArray instead. In additions, it stores the data in the array format, so if the original data is not an array. It is better not to use this class.
Also notice that SimpleListModel also implements ListSubModel. It means when it is used with Combobox, only the data that matches what the user typed will be shown.

link publish delete flag offensive edit

answered 2012-03-12 08:50:26 +0800

Luxxx
18

@paowang:
ListModelArray does not implement ListSubModel !

@AnimalAan:
??? Could you explain what you mean?
What you bolded out is exactly what I wanna have and isn't working .......

link publish delete flag offensive edit

answered 2012-03-16 04:07:39 +0800

paowang
140 ● 6

Okay. I know what you exactly want.

Try this, it might be work:

<combobox id="items" width="300px" model="@load(vm.items)" autodrop="true"
	selectedItem="@bind(vm.item)">
	<template name="model">
		<comboitem label="${each }"></comboitem>
	</template>
</combobox>

link publish delete flag offensive edit

answered 2012-03-27 09:06:36 +0800

lucamerolla
66

updated 2012-03-27 09:09:05 +0800

Hello,

I'm having a similar issue with the combobox and the new data binding for ZK6. I was debugging and the variable get populated correctly on the CountryComboViewModel
class, but the combo box always display it empty.

This is the zul part

<hbox style="padding-left: 10px;"
		apply="org.zkoss.bind.BindComposer"
		viewModel="@id('combovm') @init('org.test.account.CountryComboViewModel')">
	<label value="${labels.account.search.username}" ></label>
	<textbox value="@bind(vm.username)" instant="true" ></textbox>
	<label value="Country" ></label>
	<combobox id="items" width="300px"
				model="@load(combovm.countries)" autodrop="true"
				selectedItem="@bind(combovm.selected)">
		<template name="model">
			<comboitem self="${each=country}" label="${country.name}" value="${country.code}" ></comboitem>
		</template>
	</combobox>
</hbox>

I have tried also the following and the one suggested by @paowang

<comboitem self="@{each=country}" label="@{country.name}" value="@{country.code}" ></comboitem>

but all are displaying an empty combo box.

The View Model class is the following

public class CountryComboViewModel {

	@WireVariable
	private CountryBeanLocal countryBean;

	private ListModel<Country> countries;
	private Country selected;

	public ListModel<Country> getCountries() {
		if (countries == null) {
			countries = new SimpleListModel<Country>(
					countryBean.getAllCountries());
		}
		return countries;
	}

	public void setCountries(ListModel<Country> countries) {
		this.countries = countries;
	}

	public Country getSelected() {
		return selected;
	}

	public void setSelected(Country selected) {
		this.selected = selected;
	}

}

I hope somebody can give me an hint, thanks in advance.

link publish delete flag offensive edit

answered 2012-03-27 13:07:01 +0800

lucamerolla
66

Ok I have found a solution for my problem. I have used a simple ArrayList instead of the SimpleListModel and I have used this ZUL code:

<combobox id="items" width="300px"
	model="@load(combovm.countries)" autodrop="true"
	selectedItem="@bind(combovm.selected)">
	<template name="model" var="country">
		<comboitem label="@load(country.name)" value="@load(country.code)" />
	</template>
</combobox>

Now it works properly.

link publish delete flag offensive edit

answered 2012-04-11 18:30:36 +0800

mileidysg
3

Mine didnt work. I solved attaching an item renderer to the combo box

container.setItemRenderer(new ComboitemRenderer<Owner>() {

				@Override
				public void render(Comboitem item, Owner data, int index) throws Exception {
					item.setId(String.valueOf(data.getId()));
					item.setLabel(data.getLabel());
					item.setDescription(data.getDescription());
				}
			});