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 :

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

Download the source as war file

Demo here