List Item Double click event on selected Item using MVVM

In this example, we will see how we can handle double click event on list items using MVVM


ZK Version : ZK 6
Project Name :ListItemDoubleClickEventMVVM
Project Structure

ListItemDoubleClickEvent.zul

   1: <?page title="new page title" contentType="text/html;charset=UTF-8"?>

   2: <zk>

   3:     <window apply="org.zkoss.bind.BindComposer"

   4:         viewModel="@id('myvm') @init('mydomainUI.ListItemDoubleClickEventVM')">

   5:         <listbox id="test" model="@load(myvm.persons1)"

   6:             selectedItem="@bind(myvm.curSelectedPerson)">

   7:             <listhead sizable="true">

   8:                 <listheader label="First Name" width="400px" />

   9:                 <listheader label="Last Name" width="285px" />

  10:             </listhead>

  11:             <template name="model" var="p1">

  12:                 <listitem onDoubleClick="@command('onDoubleClicked')">

  13:                     <listcell label="@load(p1.firstName)" />

  14:                     <listcell label="@load(p1.lastName)" />

  15:                 </listitem>

  16:             </template>

  17:         </listbox>

  18:     </window>

  19: </zk>

  20:  

Person.java

   1: package mydomain;

   2:  

   3: public class Person {

   4:  

   5:     private String _firstName = "";

   6:     private String _lastName = "";

   7:  

   8:     // getter and setters

   9:     public void setFirstName(String firstName) {

  10:         _firstName = firstName;

  11:     }

  12:  

  13:     public String getFirstName() {

  14:         return _firstName;

  15:     }

  16:  

  17:     public void setLastName(String lastName) {

  18:         _lastName = lastName;

  19:     }

  20:  

  21:     public String getLastName() {

  22:         return _lastName;

  23:     }

  24:  

  25:     public void setFullName(String f) {

  26:         // do nothing.

  27:     }

  28:  

  29:     public String getFullName() {

  30:         return _firstName + " " + _lastName;

  31:     }

  32:  

  33: }

ListItemDoubleClickEventVM.java

   1: package mydomainUI;

   2:  

   3: import java.util.ArrayList;

   4: import java.util.List;

   5: import mydomain.Person;

   6: import org.zkoss.bind.annotation.Command;

   7: import org.zkoss.zul.Messagebox;

   8:  

   9: public class ListItemDoubleClickEventVM {

  10:  

  11:     private List<Person> persons = new ArrayList<Person>();

  12:     private Person curSelectedPerson;

  13:     

  14:     public Person getCurSelectedPerson() {

  15:         return curSelectedPerson;

  16:     }

  17:  

  18:     public void setCurSelectedPerson(Person curSelectedPerson) {

  19:         this.curSelectedPerson = curSelectedPerson;

  20:     }

  21:  

  22:     public List<Person> getPersons1() {

  23:         Person p1 = new Person();

  24:         p1.setFirstName("John");

  25:         p1.setLastName("Robert");

  26:         persons.add(p1);

  27:  

  28:         p1 = new Person();

  29:         p1.setFirstName("Rosy");

  30:         p1.setLastName("Sean");

  31:         persons.add(p1);

  32:  

  33:         p1 = new Person();

  34:         p1.setFirstName("Rosy1");

  35:         p1.setLastName("Sean1");

  36:         persons.add(p1);

  37:         curSelectedPerson= new Person();

  38:         return persons;

  39:     }

  40:  

  41:     @Command

  42:     public void onDoubleClicked() {

  43:         Messagebox.show(curSelectedPerson.getFirstName());

  44:         

  45:     }

  46:  

  47: }

Output.
Run ListItemDoubleClickEvent.zul and double click on any of list item



Download the source as war file