​How can I update UI component during big thred going ?

First of all, sorry that my English.(I’m Korean)

I’m using vaadin 7.1.8.

While button clickListener method is running, I want update UI component.

Here is my code.

public class ComponentHoldOk extends Button  {

     @Getter @Setter private Window stateWindow = new Window();
     @Getter @Setter private Label stateWindowLabel = new Label();

     
    public ComponentHoldOk () {
         this.addClickListener( clickListener);
         this.makeStateWindow();
    }


    final ClickListener clickListener = new ClickListener() {

        @Override
        public void buttonClick(ClickEvent event) {
            action();
        }
    };


  // !!!!!!!!!!!!!!!!
    [b]
private void action() {

        UI.getCurrent().addWindow(stateWindow);
        System.out.println("window add");
    
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {            
            e.printStackTrace();
        }
                
        getStateWindowLabel().setValue("--- step 1/3 ---");
        System.out.println("--- step 1/3 ---");
        
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {            
            e.printStackTrace();
        }
        
        getStateWindowLabel().setValue("--- step 2/3 ---");
        System.out.println("--- step 2/3 ---");        
                
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {            
            e.printStackTrace();
        }
        
        getStateWindowLabel().setValue("--- step 3/3 ---");
        System.out.println("--- step 3/3 ---");        
        
            
        stateWindow.close();
        System.out.println("window close");        

    }
[/b]


    private void makeStateWindow() {

         stateWindow.setDraggable(false);
         stateWindow.setClosable(false);
         stateWindow.setResizable(false);
         stateWindow.setModal(true);
                        
         final VerticalLayout windowAttendFindInfoContent = new VerticalLayout();          
         final VerticalLayout verticalLayout = new VerticalLayout();                   
         stateWindowLabel.setValue("wait please...");
         verticalLayout.addComponent(stateWindowLabel);
         windowAttendFindInfoContent.addComponent(verticalLayout); 
         stateWindow.setContent(windowAttendFindInfoContent);
    }

}

When button is clicked, I want “action()” method is run like this.

  1. modal window with state label added.
  2. first logic run(like network process - diffrent server)
  3. state label’s value update
  4. second logic run(like network process - diffrent server)
  5. state label’s value update
  6. third logic run(like network process - diffrent server)
  7. state label’s value update
  8. modal window close

but I guess, that code may work this …

  1. first logic run(like network process - diffrent server)
  2. second logic run(like network process - diffrent server)
  3. third logic run(like network process - diffrent server)
  4. modal window with state label added, state label’s value update, modal window close. same time

the “system.out.println()” method In “action()” is run as I expect,
but UI method(add, update, remove etc…) is not run in time.

This is my question.


How can I update UI component in this situation ?

Thank you for reading. happy new year.

13404.png

result image attached

Hi,

the problem is you’re doing the time-consuming tasks in the same thread that is processing the request from the browser. This is why only the last state is sent to the browser.

You have to either enable push in your application and push the changes to the client, or use polling to have the browser check when there are some changes. And refactor the time-consuming tasks to a background thread instead of running them in the “main” thread.

A good starting point could be this forum thread:
https://vaadin.com/forum#!/thread/231272

Hi Teppo Kurki.
Thank you for answering my question.

I’ll study thread topic.