Question

Hi I play with GWT in the weekends, and I really like what i’ve seen
so far. I have 2 questions:

1. I don’t really understand the execution model of my app. I think
   that’s because I don’t know javascript. I’m assuming that there is
   only one logical thread from the browser running the javascript and it
   is the same thread that updates the display (disregarding asynchronous
   requests). So when through js I add 50 elements to a frame, the 50
   elements are displayed after all of them are added to the frame. In
   other words, after the js has finished executing. Do I have it
   right? Are there articles out there on this topic?

2. Sorry this is not a great example, but it may get my question
   across. What do I do in the following situation (design):
   a) update the text in a label to “starting…”
   b) do a bunch of js and dom manipulation
   c) update the text in the label to “finished!”

Currently, all I see is the after-effect: my dom manipulation and
“finished”. The label never displays “starting…”

How can I force the label to refresh between step a & b. I’ve seen
some posts describing that one could use the Timer and somehow force
the element to refresh. But I can’t figure out how this is achieved.

Looking forward to your suggestions. Thanks in advance.

Answer 1

To 1): Yes, javascript is single threaded. It is up to you to implement long running operations as non-blocking. Otherwise you’re likely to run into Slow Script Warnings (see next point).

To 2): Have a look at the IncrementalCommand class (it’s usage is described here). With it you can divide long running operations into chunks of smaller work and display progress updates to the user. A small example:

public class Starter implements EntryPoint {

    private Label text = new Label();
    private Label update = new Label();

    @Override
    public void onModuleLoad() {
        Button btn = new Button("hit me");
        btn.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                text.setText("starting...");
                startIncrementalWork();
            }
        });

        RootPanel.get().add(text);
        RootPanel.get().add(update);
        RootPanel.get().add(btn);
    }

    private void startIncrementalWork() {
        IncrementalCommand cmd = new IncrementalCommand() {

            private int count = 0;

            @Override
            public boolean execute() {
                if (count >= 10000) {
                    text.setText("finished");
                    return false;
                }

                for (int i = 0; i < 100; i++) {
                    update.setText("count " + count);
                    count++;
                }
                return true;
            }
        };

        DeferredCommand.addCommand(cmd);
    }
}

Hope that helps.