MVVM combobox with model: isn't there an easy way to deal with the value???

answered 2016-01-04 08:59:41 +0800

KlausWr
37 ● 5

Thx, Senthil.

Your suggestion is what I mentioned as one of the hundreds of other tips to get it done. It works, but is not straight forward.

My personal favorite is what @gekkio posted in Combobox doesn't have key-value pairs working like html <SELECT> tag - Please Help..

The "Scala" implementation of a custom combobox class (extending combobox) introducing a "selectedValue" attribute is exatcly what I am missing from the standard implementation!

I understand, that the "value" attribute of the standard combobox cannot serve this need as it should reflect the "textbox" content of the (non-readable-) combobox. So adding an intuitive new attribute selectedValue (next to selectedIndex and selectedItem) is a brillant idea.

I translated gekkio's "Scala" proposal into Java like this:

package test;

import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.SelectEvent;
import org.zkoss.zul.Combobox;
import org.zkoss.zul.Comboitem;

public class CustomCombobox extends Combobox {
    private static final long serialVersionUID = 1L;
    private String _selectedValue = null;

    public String getSelectedValue() {
        return _selectedValue;
    }

    public void setSelectedValue(String selectedValue) {
        _selectedValue = selectedValue;
    }

    public void onAfterRender() {
        setReadonly(true);
        int selectedIndex = 0;

        for (Comboitem item : getItems()) {
            if (null != _selectedValue && _selectedValue.equals(item.getValue())) {
                setSelectedIndex(selectedIndex);
                break;
            }
            selectedIndex++;
        }
    }

    public void onSelect(SelectEvent<Comboitem, Event> event) {
        Comboitem selectedItem = event.getReference();
        if (selectedItem != null) {
            setSelectedValue((String) selectedItem.getValue());
        }
    }

}

As gekkio did not regard the MVVM binding there was a need to change the initial event handler from "onCreate" to "onAfter Render". And in order to allow two-way data binding (@load and @save) an extension to the standard component's language-addon is neccessary in you e.g. WEB-INF/zk/lang-addon.xml like:

...
    <component>
        <component-name>combobox</component-name>
        <extends>combobox</extends>
        <annotation>
            <annotation-name>ZKBIND</annotation-name>
            <property-name>selectedValue</property-name>
            <attribute>
                <attribute-name>LOAD_EVENT</attribute-name>
                <attribute-value>onAfterRender</attribute-value>
            </attribute>
            <attribute>
                <attribute-name>SAVE_EVENT</attribute-name>
                <attribute-value>onChange</attribute-value>
            </attribute>
            <attribute>
                <attribute-name>ACCESS</attribute-name>
                <attribute-value>both</attribute-value>
            </attribute>
        </annotation>
    </component>
...

Then you can use the customCombobox in a zul:

        <combobox model="@load(vm.nameValuePair)" 
            readonly="true" 
            use="test.CustomCombobox"
            selectedValue="@bind(vm.value)">

            <template name="model" var="entry">
                <comboitem 
                    label="@load(entry.key)" 
                    value="@load(entry.value)" />
            </template>
        </combobox>

The "use=" tag is one option. One can also shift the extension of combobox entirely into the language-addon.

This solution (which I heavily wish to be implemented in the standard combobox) works quite fine with one important bug which I describe in the next posting.

answered 2016-01-04 09:05:57 +0800

KlausWr
37 ● 5

The above solution (which I heavily wish to be implemented in the standard combobox) works quite fine with one important bug:

the evaluation of selectedValue for @save (or @bind) is always one UI cycle too late ????.

If I select another entry in the combobox the setter in the view model always gets the previous value over and over. It seems as if the new selected value is set after the view model is satisfied.

PLEASE ASSIST!!!