Tuesday, 5 June 2012

MVVM Example 3–List item

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


Project Structure
image

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

image

1 comment:

Passing Parameter between two files using MVVM

This examples shows how to pass parameter between two zul screens. In this example, we are passing some parameters from the parent vm to...