MVVM Example 3–List item

Next we will see how to load the list items using MVVM


Project Structure

Step : 1

Create the Personlist.zul file as follows

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
    <window apply="org.zkoss.bind.BindComposer"
        viewModel="@id('myvm') @init('ex.myexample.example4VM')">
        <listbox id="test" model="@load(myvm.persons1)">
            <listhead sizable="true">
                <listheader label="First Name" width="400px" />
                <listheader label="Last Name" width="285px" />
            </listhead>
            <template name="model" var="p1">
                <listitem>
                    <listcell label="@load(p1.firstName)" />
                    <listcell label="@load(p1.lastName)" />
                </listitem>
            </template>
        </listbox>
    </window>
</zk>

Step : 2

Next we will create View Model as follows

package ex.myexample;

import java.util.ArrayList;
import java.util.List;

import org.zkoss.zul.Messagebox;

public class example4VM {
    
    private List<person> persons = new ArrayList<person>();

    public List<person> getPersons1() {
        person p1 = new person();
        p1.setFirstName("John");
        p1.setLastName("Robert");
        persons.add(p1);

        p1 = new person();
        p1.setFirstName("Rosy");
        p1.setLastName("Sean");
        persons.add(p1);

        p1 = new person();
        p1.setFirstName("Rosy1");
        p1.setLastName("Sean1");
        persons.add(p1);
        return persons;
    }

    
}

Step : 3

Next we will create our Person POJO Java bean as follows

package ex.myexample;

public class person {

    private String _firstName = "";
    private String _lastName = "";

    // getter and setters
    public void setFirstName(String firstName) {
        _firstName = firstName;
    }

    public String getFirstName() {
        return _firstName;
    }

    public void setLastName(String lastName) {
        _lastName = lastName;
    }

    public String getLastName() {
        return _lastName;
    }

    public void setFullName(String f) {
        // do nothing.
    }

    public String getFullName() {
        return _firstName + " " + _lastName;
    }

}

Step : 4

Output as follows