addWindow slow response

Vaadin 6 / 7 / 8
1

Hi,
I’m using a Table on the top of my Page and a bit more complex Add-on on the bottom of my Page. If I work within my more complex Add-on, I understood that this will take some seconds for refreshing things and so on.

My problem is, that I just open a small Window (one textfield, one label) and this also took up to 3,4 or 5 seconds to open (addWindow) and also to close (removeWindow). Of course, if I click a button to get my Window opened, I send a request to the Server and the Server will not just send me the Dialog. The Server also sends my Complex Add-on and this take the time. If I set my Add-on to visible=false. My Window pops up less than a second.

Is there any way to let the Server just create the small Dialog, without sending the complex part?

Thanks a lot!

2

If you have push enabled you can create the content in another thread and syncronize it to UI in a callback.

3

Something like this maybe

Window w = new Window("My Window", content);
addWindow(w);
LazyLoader.load(content, () -> new Label("My Delayed Content"));
    public static class LazyLoader implements Runnable {
        private final WeakReference<ComponentContainer> contentRef;
        private final Supplier<Component> componentSource;
        public LazyLoader(ComponentContainer content, Supplier<Component> componentSource) {
            this.contentRef = new WeakReference<>(content);
            this.componentSource = componentSource;
        }
        
        @Override
        public void run() {
            try {
                Thread.sleep(MY_DELAY);
            } catch (InterruptedException e) {
                // TODO handle this
            }
            UI.getCurrent().access(() -> {
                if (contentRef.get() != null) {
                    contentRef.get().addComponent(componentSource.get());
                }
            });
        }
        
        public static void load(ComponentContainer content, Supplier<Component> componentSource) {
            new Thread(new LazyLoader(content, componentSource)).start();
        }
    }
4

Thank you Johannes, but it’s not one WIndow content that causes this slowness. Every Window is slow. The problem is that my Browser receives the whole Page again, if I click a button to open a Window and in my Page is this complex Add-On I’m using.

5

Is the complex add-on source available somewhere?

6

Yes it’s the Gantt Add-On
https://vaadin.com/directory#!addon/gantt

Just add 200 rows (steps), with 100 cols (substeps) and open a window (addWindow). This will cause slowness on my system

7

Hi Johannes,

here is a small sample I made. Just open and close the Window by click on the green Button. You will see it took a second. If you now, press the red button to set the gantt invisible and now open and close the Dialog, you will see it is faster.

Wait one second to get the Dialog opened, will not be a problem, but if I work a longer time in my Browser it will take more and more time to have Windows opened.

If you check your Task-Manager, you will see that your Browser needs also a lot of CPU Power, while open and close just that small Window. The CPU will also go up, if you just move your mouse in the gantt view.

final Gantt gantt = new Gantt();
gantt.setSizeFull();

gantt.setEndDate(DateUtils.addDays(new Date(), 365));
gantt.setMovableSteps(false);
gantt.setResizableSteps(false);
gantt.setResponsive(false);
gantt.setStartDate( new Date() );
gantt.setEndDate( new Date() );

for(int i=0; i < 250; i++){
Step stepWithSubSteps = new Step(null, CaptionMode.HTML);
stepWithSubSteps.setCaption(“”+i);

for(int x=0; x < 50; x++){
SubStep subStep = new SubStep();
subStep.setCaption(“”+x);

Calendar calendar = new GregorianCalendar();
calendar.clear();
calendar.set(Calendar.WEEK_OF_YEAR, x);
calendar.set(Calendar.DAY_OF_WEEK, Calendar.MONDAY);
calendar.set(Calendar.YEAR, Calendar.getInstance().get(Calendar.YEAR));

subStep.setStartDate(calendar.getTime());
subStep.setEndDate(DateUtils.addDays(calendar.getTime(), 7));

gantt.setStartDate( new Date(Math.min(gantt.getStartDate().getTime(), subStep.getStartDate())) );
gantt.setEndDate( new Date(Math.max(gantt.getEndDate().getTime(), subStep.getEndDate())) );

stepWithSubSteps.addSubStep(subStep);
}
gantt.addStep(stepWithSubSteps);
}

BeanItemContainer container = new BeanItemContainer(Step.class);

Table table = new Table(null, container);
table.setSortEnabled(false);
table.setBuffered(false);
table.setSizeFull();
table.setSelectable(false);
container.addAll(gantt.getSteps());
table.setVisibleColumns(“caption”);

gantt.setVerticalScrollDelegateTarget(table);
table.setColumnWidth(null, 500);

GridLayout layout = new GridLayout(1, 3);
layout.addComponent(getHeader(), 0, 0);

HorizontalLayout hl = new HorizontalLayout(table, gantt);
hl.setExpandRatio(gantt, 1.0F);
hl.setSizeFull();
layout.addComponent(hl, 0, 2);

layout.setSizeFull();

setCompositionRoot(layout);

Button button=new Button();
button.setStyleName(ValoTheme.BUTTON_FRIENDLY);
button.addClickListener(new ClickListener() {
private static final long serialVersionUID = 1L;

@Override
public void buttonClick(ClickEvent event) {
Window wnd = new Window(“Window”);
wnd.setWidth(“200px”);
wnd.setHeight(“200px”);
wnd.center();
wnd.setModal(true);
wnd.setClosable(true);

GridLayout layout = new GridLayout(1, 1);

final TextField textfield = new TextField(“ABC”);
textfield.setWidth(“100%”);
textfield.focus();

layout.setMargin(true);
layout.addComponent(textfield, 0, 0);
layout.setSizeFull();
wnd.setContent(layout);

UI.getCurrent().addWindow( wnd );
}
});

Button button2=new Button();
button2.setStyleName(ValoTheme.BUTTON_DANGER);
button2.addClickListener(new ClickListener() {
private static final long serialVersionUID = 1L;

@Override
public void buttonClick(ClickEvent event) {
gantt.setVisible(!gantt.isVisible());
}
});

layout.addComponent(new HorizontalLayout(button, button2), 0, 1);
layout.setRowExpandRatio(2, 1F);

setCompositionRoot(layout);

Thanks Dennis

8

I was able to reproduce this. Looking from the network tab the size of the XHR requests didn’t change in window open or close whether the gantt chart is visble or not. This leads me to believe that the GanttConnector and its state is not participating in this slowness, but the widgets in the add-on. Quick client-side debugging didn’t reveal anything. Maybe try to contact the add-on author?

9

Johannes, Thank you very much for spending time. I changed all my Windows to PopupViews, this is faster. Could you explain the different between Window and PopupView?