Force repaint?

General
1

Hi all

I’m coding an own LoginForm. I want to disable the button as soon as the user clicked on it.

therefore I do the following:


username.setEnabled(false); // textfield
password.setEnabled(false); // textfield
loginButton.setEnabled(false); // button
loading.setVisible(true); // ProgressIndicator
login();  // this function takes care of the login procedure

Now what happens is the following:
It does not repaint the username, password and loginButton. Nothing happens, it seems as if it jumps directly to login().

I would need to force vaadin to update the ui components before executing login(). How can this be achieved?
Some sort of callback would be useful…

Thanks!

ben

2

It goes directly to login() because it’s written after the other statements.

Remember that the user input is handled in client-server requests and all UI changes caused by an event are updated at once in the response. In your code, the setters merely set properties that are displayed in the browser when the request is finished, but also the login() is done during the same request.

See
the Book
.

I’m not exactly sure what you want - should it stop somehow before doing the login?

3

It shall execute and repaint this:


username.setEnabled(false); // textfield
password.setEnabled(false); // textfield
loginButton.setEnabled(false); // button
loading.setVisible(true); // ProgressIndicator

when this the code above is repainted it shall execute

login()

Is it clearer what I’m trying to do now?

4

I understand exactly what you’re trying to do. But as Marko pointed out, it’s not that simple with server centric UI approach.

You will need to finish the first request (that happens when the user clicks “Login”) right after “loading.setVisible(true)”, so that the client can render those changes (do not call login() just yet), and then when the first update request comes for the ProgressIndicator, only then trigger the login() routine. Probably you even have to use fork a thread where you only run the login() routine, and then quit that thread.

To illustrate more:

User clicks "Login"
 |-> http request comes to server
 |-> disable necessary fields and show the progress indicator
 |-> fork a thread for login routine
 |-> click listener finishes, and the http request response is sent to client
Client renders changes
Thread runs login routine on the server, changing application state
Progress indicator sends a new http request
 |-> http request comes to server
 |-> login routine has been run, some application state has been changed
 |-> nothing else to do, http request response is sent to client, containing the changes made by login routine
Client renders changes

Edit: another option is to create a client side widget (button most likely) that disables the two text fields and the button. This requires GWT.

HTH,
Jouni

5

Jouni, thanks for your help.

So in order to get this running, I can either choose the thread approach or the GWT approach.