MVVM Combo Box Data binding

In this example, we will see how we can data bind Combo box


ZK Version : ZK 6
Project Name :ComboxBoxMVVM
Project Structure :
image
Example1.zul

   1: <?page title="new page title" contentType="text/html;charset=UTF-8"?>
   2: <zk>
   3:     <window id="myWin" title="new page title" border="normal"
   4:         apply="org.zkoss.bind.BindComposer"
   5:         viewModel="@id('myvm') @init('mydomainUI.Example1VM')">
   6:         <combobox model="@load(myvm.users)"
   7:             selectedItem="@bind(myvm.selectedUser)"
   8:             onSelect="@command('ShowSelectedUser')">
   9:             <template name="model" var="p1">
  10:                 <comboitem label="@load(p1.userName)"
  11:                     value="@load(p1.userCode)" />
  12:             </template>
  13:         </combobox>
  14:         <button id="Submit" label="Show Selected User Code"
  15:             onClick="@command('ShowSelectedUser')" />
  16:     </window>
  17: </zk>


Example1VM.java


   1: package mydomainUI;
   2:  
   3: import java.util.ArrayList;
   4: import java.util.List;
   5: import org.zkoss.bind.annotation.Command;
   6: import org.zkoss.zul.Messagebox;
   7:  
   8: import mydomain.users;
   9:  
  10: public class Example1VM {
  11:  
  12:     private List<users> allUsers= new ArrayList<users>();
  13:     private users selectedUser = new users();
  14:     
  15:     public users getSelectedUser() {
  16:         return selectedUser;
  17:     }
  18:  
  19:     public void setSelectedUser(users selectedUser) {
  20:         this.selectedUser = selectedUser;
  21:     }
  22:  
  23:     @Command
  24:     public void ShowSelectedUser()
  25:     {
  26:         Messagebox.show(this.selectedUser.getUserCode());
  27:     }
  28:     public List<users> getUsers() {
  29:         
  30:         users u1 = new users();
  31:         u1.setUserName("John");
  32:         u1.setUserCode("User101");
  33:         u1.setUserPassword("xxxxx");
  34:         u1.setFirstName("JohnFirstName");
  35:         u1.setLastName("JohnLastName");
  36:         u1.setHomePhone("1111111111");
  37:         u1.setMobilePhone("222222");
  38:         u1.setActive("Y");
  39:         allUsers.add(u1);
  40:  
  41:         u1 = new users();
  42:         u1.setUserName("Robert");
  43:         u1.setUserCode("User102");
  44:         u1.setUserPassword("xxxxx");
  45:         u1.setActive("Y");
  46:         u1.setFirstName("RobertFirstName");
  47:         u1.setLastName("RobertLastName");
  48:         u1.setHomePhone("53534343");
  49:         u1.setMobilePhone("4534343");
  50:         allUsers.add(u1);
  51:  
  52:         u1 = new users();
  53:         u1.setUserName("Sean");
  54:         u1.setUserCode("User103");
  55:         u1.setUserPassword("xxxxx");
  56:         u1.setActive("N");
  57:         u1.setFirstName("SeanFirstName");
  58:         u1.setLastName("SeanLastName");
  59:         u1.setHomePhone("643434343");
  60:         u1.setMobilePhone("64343445434");
  61:         allUsers.add(u1);
  62:  
  63:         u1 = new users();
  64:         u1.setUserName("Marry");
  65:         u1.setUserCode("User104");
  66:         u1.setUserPassword("xxxxx");
  67:         u1.setActive("N");
  68:         u1.setFirstName("MarryFirstName");
  69:         u1.setLastName("MarryLastName");
  70:         u1.setHomePhone("8644344");
  71:         u1.setMobilePhone("44333");
  72:         allUsers.add(u1);
  73:         return allUsers;
  74:     }
  75: }


users.java




   1: package mydomain;
   2:  
   3: public class users {
   4:  
   5:     private String userCode;
   6:     private String userName;
   7:     private String userPassword;
   8:     private String active;
   9:     private String firstName;
  10:     private String lastName;
  11:     private String homePhone;
  12:     private String mobilePhone;
  13:  
  14:     public String getFirstName() {
  15:         return firstName;
  16:     }
  17:  
  18:     public void setFirstName(String firstName) {
  19:         this.firstName = firstName;
  20:     }
  21:  
  22:     public String getLastName() {
  23:         return lastName;
  24:     }
  25:  
  26:     public void setLastName(String lastName) {
  27:         this.lastName = lastName;
  28:     }
  29:  
  30:     public String getHomePhone() {
  31:         return homePhone;
  32:     }
  33:  
  34:     public void setHomePhone(String homePhone) {
  35:         this.homePhone = homePhone;
  36:     }
  37:  
  38:     public String getMobilePhone() {
  39:         return mobilePhone;
  40:     }
  41:  
  42:     public void setMobilePhone(String mobilePhone) {
  43:         this.mobilePhone = mobilePhone;
  44:     }
  45:  
  46:     public String getUserCode() {
  47:         return userCode;
  48:     }
  49:  
  50:     public void setUserCode(String userCode) {
  51:         this.userCode = userCode;
  52:     }
  53:  
  54:     public String getUserName() {
  55:         return userName;
  56:     }
  57:  
  58:     public void setUserName(String userName) {
  59:         this.userName = userName;
  60:     }
  61:  
  62:     public String getUserPassword() {
  63:         return userPassword;
  64:     }
  65:  
  66:     public void setUserPassword(String userPassword) {
  67:         this.userPassword = userPassword;
  68:     }
  69:  
  70:     public String getActive() {
  71:         return active;
  72:     }
  73:  
  74:     public void setActive(String active) {
  75:         this.active = active;
  76:     }
  77:  
  78: }


Output

image

Download the source as war file


Demo here
Labels: