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
image
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

image

Download the source as war file
Labels: