LazyLayout based on CssLayout

[markoradinovic]

Hi, I would like to implement Masonry layout (only with css, with column properties) with lazy loading. I have already extended LazyLayout to use CssLayout. While my solutions is working, there is a lot code duplication. I was wondering, do you plan to extend LazyLayout to support more layout types?

[alump]

I will add lazyloading to my Masonry add-on at some point (specific implementation), but not sure if I will support other layout types with this add-on.

[markoradinovic]

Ok, thank you.

[stozk]

Well it's been a while but maybe this helps someone:

I wanted to use this with a CssLayout because it will automatically reflow the components according to the window size.

I tried simply duplicating the classes and replacing "extends VerticalLayout" with CssLayout. Well it didn't work, the lazyloading just doesn't get triggered (would have been too nice and easy ;-)).

But I was able to create a workaround:

The first component you add to the LazyLayout in the initializeLazyLayout will be a CssLayout e.g. CustomCssLayout which you will give a method like "addComponents" which will take in a list of the components to be added to the layout.

Then I just do this in the addNewRow:

protected void addNewRow(ComponentContainer container) {

    List<TemplatePanel> panelList = new TemplateLazyFetcher().createComponents(indexCounter, 3, model);
    if(fl!=null){
        container.removeComponent(fl);
    }
    rowLayout.addNewRow(panelList);
    fl = new VerticalLayout();
    fl.setHeight(0, Unit.PERCENTAGE);
    container.addComponent(fl);
    indexCounter = indexCounter + 3;
}

adding the fl VerticalLayout to the lazyLayout will trigger the scroll listener but it will get removed the next time the method gets called (otherwise you'll get a growing empty area) and lazyloading will work as intended.

[alump]

Maybe I just just add extension to Panel for these use cases? Extension would fire clean server side event always when user has scrolled it to the end? I would like to avoid pairing code with CssLayout, as it's layout structure can not be guestimated by the code.

[stozk]

Sounds good, if you want to do it.