How to sync UI values

Hi,

It might be a basic question, but I’ve confused for a couple of days, so I try to post.

How to show the same values of a TextField and a Label.

For example, you have two widgets, a TextField and a Label You input some text in the TextField,
and soon the focus of the TextField is lost, the label’s value changes. The label shows the same
value with the TextFields’s. The UI event must be only the lost of a focus.

Is it possible? Getting ValueChangeEvent of a TextField might be a way, but is there something
more simple way?

thanks.

To save lot of network traffic, vaadin will not send events when something happens in the browser if you don’t tell vaadin you want to be informed.
In order to tell vaadin what you are interested in receiving, you register corresponding listeners on the objects you want to get the events from.

So there is no other way that registering listeners and listening to events. (Actually there are, but there are quite hackish and/or really specific so it’s better to try to avoid them)

If you want to update only when the focus is lost, you can use a blur listener.


        TextField tf = new TextField();
        tf.addListener(new BlurListener() {
            
            public void blur(BlurEvent event) {
                //Do something
            }
        });

If you want it to update while the user is typing, but not at every key press (save some load on the server), you can use a text change listener.


        TextField tf = new TextField();
        tf.addListener(new TextChangeListener() {
            
            public void textChange(TextChangeEvent event) {
                //Do something
            }
        });

And if you want to update after every single key press you need to add use setImmediate.


        TextField tf = new TextField();
        tf.setImmediate(true);
        tf.addListener(new TextChangeListener() {
            
            public void textChange(TextChangeEvent event) {
                //Do something
            }
        });

Hi, Clerc
Thank you for your quick response.

OK, I see what you said.
I had misunderstood that the data binding methods could do something. I was wrong.
The binding is directly nothing to do with UI.

Thanks.

P.S.
Your vaadin is the best Web UI framework. I appreciate your work.
But here in Japan, there are few vaadin information. Your web site is a great help to me.

Hi,

just wanted to point out that of course you can use the data-binding directly. Try the following:

TextField tf = new TextField();
tf.setImmediate(true);
Label l = new Label(tf);

In the code above, you just set the TextField as the data source for the label. Whatever you write to the text field now will be update to the label. If you need “more immediate” updating, you can set the text change event modes and timeouts on the text field as needed.

Your TextFields need to be declared final for this code to work, and you might be missing an import or have the incorrect one. Your Java compiler should have caught the issue, what editor are you using?

You never add the HorizontalLayout anywhere. You need to call addComponent(layout);

As the exception you get probably says, you are using incompatible types. TextField.setValue() takes a String, and your getIdproject() method returns an int. Again, a proper Java editor would have told you this.

I tested your code, and I don’t get any exceptions. The issues you are having seem very simple; in fact, I could guess that the exceptions you are getting tell you exactly what is wrong with your code.

I don’t want to be rude, but I won’t answer any more similar questions on the thread, I’m sorry. If you have other issues, please create a new thread for them.