-
FEATURED COMPONENTS
First time here? Check out the FAQ!
<zk>
<window apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('com.example.TestVM')" title="example"
border="normal">
<div
form="@id('fx') @load(vm.selectedRecord) @save(vm.selectedRecord, before='saveThis')">
<hbox>
<label value="First Name"></label>
<textbox value="@bind(fx.firstName)"></textbox>
<label value="Last Name"></label>
<textbox value="@bind(fx.lastName)"></textbox>
<label value="Comments"></label>
<textbox id ="comments" value="@bind(fx.comments)"></textbox>
<space></space>
<button
label="Put some comments"
onClick="@command('insert')">
</button>
<space></space>
<button
label="saveThis"
onClick="@command('saveThis')">
</button>
</hbox>
</div>
</window>
</zk>
VM package com.example;
import org.zkoss.bind.annotation.AfterCompose; import org.zkoss.bind.annotation.Command; import org.zkoss.bind.annotation.ContextParam; import org.zkoss.bind.annotation.ContextType; import org.zkoss.zk.ui.Component; import org.zkoss.zk.ui.select.Selectors; import org.zkoss.zk.ui.select.annotation.Wire; import org.zkoss.zul.Messagebox; import org.zkoss.zul.Textbox;
public class TestVM {
@Wire("#comments")
private Textbox comments;
private Person selectedRecord = new Person();
@AfterCompose
public void initSetup(@ContextParam(ContextType.VIEW) Component view) {
Selectors.wireComponents(view, this, false);
}
public Person getSelectedRecord() {
return selectedRecord;
}
public void setSelectedRecord(Person selectedRecord) {
this.selectedRecord = selectedRecord;
}
@Command
public void saveThis() {
Messagebox.show(" " + this.selectedRecord.getComments());
}
@Command
public void insert() {
comments.setValue(comments.getValue() + " Some Text Inserted");
}
public class Person {
private String firstName;
private String lastName;
private String comments;
public String getFirstName() {
return firstName;
}
public void setFirstName(String firstName) {
this.firstName = firstName;
}
public String getLastName() {
return lastName;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
public String getComments() {
return comments;
}
public void setComments(String comments) {
this.comments = comments;
}
}
}
As per requirement, either user will be typing something in the comments box or it will be pull down from the list. For this example, i have added some text on button click.
Now the problem is on click of save button, the value is not actually stored in the object. I can understand the reason for this, because in the form binding , we have said only after click of savethis button, the value from the text box will be saved to object.
But i need to append some text programmatically sometimes. It that possible ?
Here is the ZK Fiddle Link http://zkfiddle.org/sample/mkfdks/1-Another-new-ZK-fiddle
You can understand MVVM pattern as below:
Client -- VM -- Server
Client event will trigger VM to make Server do something
Server change should also trigger VM to update Client status
the setValue() is the way to update client side OUTSIDE VM,
NO data changed at Server Side since you update that component directly
NO Save Action performed since no Client Event for this change so this change will not be stored to form object to save
What you need to do is update form object at Server Side then update Client via VM instead of call setValue() API of component directly, please refer to updated zkfiddle: 2nd version
Thank you benbai. One problem solved, but another problem. In your updated fiddle, do the folllowing
because the data is not saved before it gets updated, just save it before 'insert'.
Thank you very Much
But i always get confused with the following line
form="@id('fx') @load(vm.selectedRecord) @save(vm.selectedRecord, before={'saveThis', 'insert'})">
Is this saying "Store all the values from the component to the object on clicking the button which is annotated with savethis or Insert ?
Values will be stored before executing the first line in the method ?
and also how about change to "After", here data stored will be stored after executing the method save and insert. i.e after the last line ?
alternative 4th version now you don't have to save on "insert".
I just modify the value in the Form object (middle object), so that the value on the ViewModel is not changed until you click save.
This gives you the possibility to easily implement a "cancel" function, without having to revert the view model manually.
Asked: 2013-09-23 18:11:27 +0800
Seen: 69 times
Last updated: Sep 26 '13