show and modify List in grid ZK - list

Question

I have a list that is dynamically generated from the view.
when the button is clicked, a new row is added, the value is entered and saved.
.zul
<zk>
<window border="normal" title="hello" viewModel="#id('vm') #init('gemalto.CreateServiceVersion')" apply="org.zkoss.bind.BindComposer">
<grid id="demoGrid"
model="#load(vm.profileList) #template((each.editingStatus) ? 'editable' : 'noneditable')">
<columns sizable="true">
<column width="160px" >Value</column>
<column width="160px" ></column>
</columns>
<rows>
<template name="editable">
<row>
<textbox id="valueTextBox"
value="#load(each.serviceProfile.valueVariable) #save(each.serviceProfile.valueVariable, before='confirm')" />
<button
image="/img/save.png" label="save"
onClick="#command('confirm', currentVariable=each)"/>
</row>
</template>
<template name="noneditable">
<row>
<label value="#load(each.serviceProfile.valueVariable)" />
</row>
</template>
</rows>
</grid>
<div align="center">
<button label="Add" image="/img/create.png" onClick="#command('onAddNew')" />
</div>
</window>
</zk>
view model
public class CreateServiceVersion extends SelectorComposer<Component> {
private boolean isEditing = false;
private boolean displayEdit = true;
private boolean isAddNew = false;
private List<ServiceProfileStatus> profileList = new ArrayList<ServiceProfileStatus>();
public List<ServiceProfileStatus> getProfileList() {
return profileList;
}
#AfterCompose
public void afterCompose() {
profileList.add(new ServiceProfileStatus(new ServiceProfile("value1"), false));
profileList.add(new ServiceProfileStatus(new ServiceProfile("value2"), false));
}
#Command
public void CrudServiceVersion() {
Executions.sendRedirect("CrudServiceVersion.zul");
}
#Command
#NotifyChange({"profileList"})
public void onAddNew() {
if (!isEditing) {
ServiceProfileStatus sps = new ServiceProfileStatus(new ServiceProfile(""), displayEdit);
profileList.add(0, sps);
isAddNew = true;
isEditing = true;
}
}
#Command
public void confirm(#BindingParam("currentVariable") ServiceProfileStatus sps) {
isEditing = false;
isAddNew = false;
sps.setEditingStatus(isEditing);
BindUtils.postNotifyChange(null,null,sps,"*");
}
}
the problem is that I add a new item, the value is copied to all others items.
I put the images to see more clearly what is happening.
imgur.com/7u7OkPG
imgur.com/mf8PUYI
imgur.com/aJpNoXM

Answer 1

I tested with your code and it works normally with me.
Now I changed the code a little bit :
Removed the extends SelectorComposer from your viewmodel cause that is not needed for MVVM.
Changed your 2 templates to 1 template.
Usage of your boolean in your viewmodel in the zul.
Zul :
<?xml version="1.0" encoding="UTF-8"?>
<zk>
<window border="normal" title="hello" viewModel="#id('vm') #init('be.chillworld.CreateServiceVersion')" apply="org.zkoss.bind.BindComposer">
<grid id="demoGrid" model="#load(vm.profileList)">
<columns sizable="true">
<column width="160px" >Value</column>
<column width="160px" ></column>
</columns>
<rows>
<template name="model">
<row>
<textbox value="#load(each.serviceProfile.valueVariable) #save(each.serviceProfile.valueVariable, before='confirm')" />
<button disabled="#load(not each.editingStatus)" visible="#load(each.editingStatus)" image="/img/save.png" label="save"
onClick="#command('confirm', currentVariable=each)"/>
</row>
</template>
</rows>
</grid>
<div align="center">
<button disabled="#load(vm.mayCreateNew)" label="Add" image="/img/create.png" onClick="#command('onAddNew')" />
</div>
</window>
</zk>
Viewmodel :
package be.chillworld;
import java.util.ArrayList;
import java.util.List;
import org.zkoss.bind.BindUtils;
import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zk.ui.Executions;
/**
*
* #author chillworld */
public class CreateServiceVersion {
private boolean isEditing = false;
private List<ServiceProfileStatus> profileList = new ArrayList<ServiceProfileStatus>();
public List<ServiceProfileStatus> getProfileList() {
return profileList;
}
#AfterCompose
public void afterCompose() {
profileList.add(new ServiceProfileStatus(new ServiceProfile("value1"), false));
profileList.add(new ServiceProfileStatus(new ServiceProfile("value2"), false));
}
#Command
public void CrudServiceVersion() {
Executions.sendRedirect("CrudServiceVersion.zul");
}
#Command
#NotifyChange({"profileList","mayCreateNew"})
public void onAddNew() {
isEditing = true;
ServiceProfileStatus sps = new ServiceProfileStatus(new ServiceProfile(""), true);
profileList.add(0, sps);
}
#Command
#NotifyChange("mayCreateNew")
public void confirm(#BindingParam("currentVariable") ServiceProfileStatus sps) {
isEditing = false;
sps.setEditingStatus(isEditing);
BindUtils.postNotifyChange(null, null, sps, "*");
}
public boolean getMayCreateNew() {
return isEditing;
}
}
ServiceProfileStatus.java :
package be.chillworld;
/**
*
* #author chillworld
*/
public class ServiceProfileStatus {
private ServiceProfile serviceProfile;
private boolean editingStatus;
public ServiceProfileStatus(ServiceProfile serviceProfile, boolean editingStatus) {
this.serviceProfile = serviceProfile;
this.editingStatus = editingStatus;
}
public boolean isEditingStatus() {
return editingStatus;
}
public void setEditingStatus(boolean editingStatus) {
this.editingStatus = editingStatus;
}
public ServiceProfile getServiceProfile() {
return serviceProfile;
}
public void setServiceProfile(ServiceProfile serviceProfile) {
this.serviceProfile = serviceProfile;
}
public ServiceProfileStatus(ServiceProfile serviceProfile) {
this.serviceProfile = serviceProfile;
}
}
ServiceProfile.java :
package be.chillworld;
/**
*
* #author chillworld
*/
public class ServiceProfile {
private String valueVariable;
public ServiceProfile(String valueVariable) {
this.valueVariable = valueVariable;
}
public String getValueVariable() {
return valueVariable;
}
public void setValueVariable(String valueVariable) {
this.valueVariable = valueVariable;
}
}