0

Please help me in form binding

asked 2013-09-23 18:11:27 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8
http://emrpms.blogspot.in...
<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

delete flag offensive retag edit

5 Answers

Sort by ยป oldest newest most voted
0

answered 2013-09-26 07:11:39 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

updated 2013-09-26 07:57:15 +0800

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

link publish delete flag offensive edit
0

answered 2013-09-26 07:38:19 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8
http://emrpms.blogspot.in...

Thank you benbai. One problem solved, but another problem. In your updated fiddle, do the folllowing

  1. Enter the first Name
  2. Enter the Last Name
  3. Click Button Put some text, now the data you entered in the first name and last name will go away
link publish delete flag offensive edit
0

answered 2013-09-26 07:56:54 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

updated 2013-09-26 07:57:35 +0800

because the data is not saved before it gets updated, just save it before 'insert'.

3rd version

link publish delete flag offensive edit
0

answered 2013-09-26 10:28:36 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8
http://emrpms.blogspot.in...

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 ?

link publish delete flag offensive edit

Comments

Yes, you understand it correctly (...if I also understand it correctly :p)

benbai ( 2013-09-26 12:31:30 +0800 )edit
0

answered 2013-09-26 11:16:58 +0800

cor3000 gravatar image cor3000
4406 2 7
ZK Team

updated 2013-09-26 12:13:26 +0800

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.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2013-09-23 18:11:27 +0800

Seen: 65 times

Last updated: Sep 26 '13

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More