Monday, 11 June 2012

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

No comments:

Post a Comment