0

form submit - data is not bound

asked 2014-10-27 11:42:47 +0800

gargamel25 gravatar image gargamel25
41 2

updated 2014-10-28 01:17:55 +0800

cor3000 gravatar image cor3000
4406 2 7
ZK Team

Hi,

I have a problem with data binding in a form.

Why I ran into this?

I'm using qftest(a tool like selenium for test automation). It doesn't use hard events, so the mouse is not used to focus input elements... it fills the values from javascript.. YOU DON'T NEED to have selenium or qftest installed to reproduce it

Steps to reproduce:

index.zul

<zk>
<window mode="overlapped" position="top,center"
    apply="org.zkoss.bind.BindComposer"
    viewModel="@id('lvm') @init('pkg$.LoginViewModel')"
    form="@id('f') @load(lvm.form) @save(lvm.form, before='submit')"
    onOK="@command('submit')">

                    <vbox pack="end" align="middle">
                <hbox align="middle">
                    <vbox id="loginForm" sclass="box-form">
                        <label value="User name" />
                        <textbox id="tbxUsername" name="j_username" value="@bind(f.username)" focus="true"/>
                        <label value="Password" />
                        <textbox id="tbxPassword" name="j_password" value="@bind(f.password)" type="password"/>

                        <button id="btnLogin" label="Login" onClick="@command('submit')" sclass="push push-cdr" />
                    </vbox>
                </hbox>
            </vbox>
              <script>
                 zk.afterMount(function(){
                      zk.Widget.$('$tbxUsername').setValue('someValue');
                })
    </script> 
</window>

</zk>

LoginViewModel.java

package pkg$;
import org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.*;
import org.zkoss.zk.au.out.*;
import org.zkoss.zul.*;
import org.zkoss.bind.annotation.Command;
import org.zkoss.zul.Messagebox;

public class LoginViewModel{

private CredentialsForm form = new CredentialsForm();


@Command
public void submit() {
    boolean login = false;
          Messagebox.show("username="+form.getUsername());
        if(form.getUsername()==null || "".equals(form.getUsername())) {
              System.err.println("Error, data binding error ");
              Messagebox.show("Error");
        } else {
       System.out.println("Everything is OK ");
              Messagebox.show("OK");
            }
    }

public CredentialsForm getForm() {
    return form;
}

public void setForm(CredentialsForm form) {
    this.form = form;
}


public static class CredentialsForm {
    private String username;
    private String password;

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}
}

When the form is submitted the data is not bound, although you can see the textbox for username has the value someValue.

Is there any way to override the form submit so the sent data is updated with the actual values of the input components?

Best regards

delete flag offensive retag edit

Comments

I am curious about the reason to set value by JS at the beginning. Could you describe your requirement ? If you want to initialize name field, you can initialize username in CredentialsForm.

hawk ( 2014-11-20 06:54:01 +0800 )edit

2 Answers

Sort by ยป oldest newest most voted
0

answered 2014-10-28 01:22:51 +0800

cor3000 gravatar image cor3000
4406 2 7
ZK Team

ZK is relying on element focus quite a lot and certain events are only fired when the focus is lost (onblur).

I updated your example to show a way to fire the event even without losing the focus.

Robert

link publish delete flag offensive edit

Comments

Thank you...

I was looking for some hints on what is really happening when the user clicks Login button. How is the data gathered in order to be sent in that ajax call, because obviously is not what it should be.

gargamel25 ( 2014-10-28 02:22:27 +0800 )edit

it is not gathered at all... it sends an onClick event and any other event that's still queued on the client side, that is deferrable, and has a listener on the server side. the @bind() automatically results in an onChange listener in the binder, that's fired automatically by onBlur of the textbox

cor3000 ( 2014-10-28 03:49:44 +0800 )edit

I know it sounds confusing... so please tell us what you intend to do instead of what "you think" it should not behave like.

cor3000 ( 2014-10-28 03:52:01 +0800 )edit
0

answered 2014-10-29 23:02:00 +0800

gargamel25 gravatar image gargamel25
41 2

Hi again and sorry for the late post.

I got in contact with qftest team because we have paid support and described the problem with more details. I'll let you know when something new arrives, in case somebody else is interested.

Short story. If you have a form and an automation test tool after you record your steps when you play it it goes down to something like document.getElementById(someId... or widget.uuid).value=someDataYouFilledIn and sending the form.

When you do this using a native form what you see in the input fields is sent to the server. When using zkoss form is not... all the time(to make things even more complicated.. if it was never it would have been easier). I know in zkoss "we seldom use the concept of form submission" , but if it looks like a form and I can see the values in the input elements I assumed they will be submitted somehow without caring about the details of how this is achieved.

Anyway I know I'm complaining about a tool of which you probably didn't hear and don't have any idea about their implementation and integration with zkoss ,so if you think we should delete this question is OK with me.

Best regards

link publish delete flag offensive edit

Comments

no problem at all. maybe my tone was a bit harsh the other day. we are well aware of qftest, and the same effect can be noticed in e.g. selenium. That's why I usually recommend sending the keys using WebElement.sendKeys (what the user does) instead of setting the value (just a JS call).

cor3000 ( 2014-10-30 01:01:05 +0800 )edit

maybe a similar approach is possible in qftest to simlulate the real user interaction. Then things like focus and blur happen "naturally" and one doesn't have to think about it.

cor3000 ( 2014-10-30 01:16:41 +0800 )edit

another thing is, that calling setValue directly could circumvent a client side keydown listener, e.g. to prevent one special character from being input into a widget. For that sending the keystrokes would also give a more accurate simulation. Of what happens in the browser.

cor3000 ( 2014-10-30 01:19:29 +0800 )edit

Basically ZK is a server centric framework, it's recommended to manipulate components in Java. Then ZK will handle synchronization between server and client for you. Manipulating widgets requires more client knowledge and know more about widgets implementation.

hawk ( 2014-11-20 06:59:01 +0800 )edit

Just setting value with JS is not a common usage in ZK.

hawk ( 2014-11-20 07:00:33 +0800 )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: 2014-10-27 11:42:47 +0800

Seen: 45 times

Last updated: Oct 29 '14

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