"new" add-on to Vaadin - LazyLoadWrapper

Hi,

I’ve created a add-on to Vaadin called
LazyLoadWrapper
. In a nutshell it’s a wrapper “for any” Vaadin UI component that enables lazy loading of that component. The wrapper will continuously check if the component is closing in on the visible area of the browser and load the wrapped component just before it becomes visible.

The idea behind the wrapper is to cut down on the initial loading time of a big Vaadin application that is comprised of several components that are not visible for the user upon application initialization.

The wrapper should also be quite easy to add to a existing project as all that is needed is to download the add-on, add it to your project and (in the simplest case) just wrap your component inside the .addComponent() -call.

mainWindow.addComponent( new LazyLoadWrapper( yourComponent )); 

So head on to the
Vaadin Directory
and give the wrapper a try.

//Petri

PS: I’ll be adding a public issue tracker soon so that possible issues can be easily submitted.

Great utility component, Petri !

I like the simplified usage scenario. But how does it delegate loading process to a separate thread ? In your example above, actual component is already instantiated. What if the long-running code is in it’s constructor ?

In my
Toolkit Productivity Tools
addon I have similar class, but it requires a few more steps - an interface should be inplemented. But this is to let lazy loader know how to run a long operation (it runs a method in a separate thread), how to get progress feedback from it (when necessary) and a temporal message to display in place of component while it is loading.

In it’s current form, the wrapper isn’t multithreaded. On the server side this could be done, but for the client side, the single threaded JavaScript engine poses a restriction (i.e. it’s not possible to create multiple threads on the client side as far as I know).

I’m not sure if I understood you correctly, but if you mean that you want to create the component only if it’s actually needed (i.e. server side lazy loading), the lazy load wrapper supports this through a separate interface:

public interface LazyLoadComponentProvider extends Serializable {

        /**
         * Called when the placeholder component has become visible
         */
        public Component onComponentVisible();

    }

that can be used through the constructors as well.

mainWindow.addComponent(new LazyLoadWrapper(
                new LazyLoadWrapper.LazyLoadComponentProvider() {

                    public Component onComponentVisible() {
                        // Create your component here
                        HeavyPanel willBeCreatedOnlyIfShown = new HeavyPanel();
                        
                        return willBeCreatedOnlyIfShown;
                    }
                }));

The wrapper will call the onComponentVisible method when the wrapper has determined that the wrapped component should be loaded. Hence if our HeavyPanel is never shown, it’ll never be created.

Hmm, your component sounds interesting, I have to take a look at it at some point when I have some spare time. :slight_smile:

//Petri

Yes, I meant the typical scenario, when developer wants so initialize something heavy in a , say, Label, to fetch user name, for instance, from a database. So, in my terms - “heavy” means long initialization of some data.

Typically this is done in a constructor or in some init method of window / panel, which stucks the entire client UI as UIDL roundtrip from the server gets on hold. That was the main reason for my
LazyLoadingLayout
- it allows to delegate such loading into a separate thread and client UI will not stuck. My first use-case was the search panel in an app, where search process could take several seconds to complete - so I wrapped standard table to this lazy loading layout.

But the client-side lazy stuff is also very interesting. I still want ( but still has no time for it) to tweak the standard Vaadin tree to allow loading of tree nodes (on node expand) in a separate request like it was in plain old GWT tree.

Hey Petri,
Cool addon. Very simple to use. Any suggestion on how to go about customizing the “placeholder” icon with our own icon or add text to the placeholder, like “loading…”?
Thanks

bumping up. Any ideas?

Looking at the client side code this seems to be the relevant css class name:

public static final String LOADING_CLASSNAME = “v-lazyloadingwrapper-loading”;

Also I have submitted a bug report to the issue tracker:

http://code.google.com/p/lazyloadwrapper/issues/detail?id=1

And a change request while I’m at it:

Would it be possible to add to the API an option to reset the lazyloadwrapper somehow to the lazy loaded state, we have some cases where we detach and re-attach a big VerticalLayout that contains wrappers and we would like to re-render the layout lazily again. Currently we have solved it by creating new wrappers to replace the old ones, but I imagine it’s not ideal performance wise

Hi Petri,

we just started to use your plugin. We really like it but there’s a small issue: looks like it is - unlike vaadin’s basic widgets or other add on’s - compiled with Java 6.
Could you recompile it with Java 5 or is there a fundamental need for Java 6 support?

Kind regards
Daniel

Hi,

That might just be an oversight on my part… At least I don’t recall using any Java 6 specific things there… I’ll take a look at it and if possible recompile it with Java 5 (and create a new version to Vaadin Directory)…

Hi Petri,

don’t want to rush - just wanted to ask whether you’d be able to do it by today. We’re finishing a sprint this afternoon and I’d like to avoid the effort of temporarily switching the build to Java 6 as a workaround.

Thx
Dan

Hi Daniel,

Unfortunately that seems more and more unlikely… I’m also in the process of finishing a sprint today, so I think it’ll be pretty late before I could get to work on the add-on… Sorry… I’ll try to fix it during the weekend…

Hi Petri,

no prob - we’ll find a workaround for today’s sprint then. No need to do it on the weekend though - within the next few working days would be perfectly fine for me.

Thx a lot
Dan

Ps.: Funny coincidence that you’re also finishing a sprint today :wink:

Hi,

Just uploaded version 1.0.2 to Vaadin Directory that should be compatible with Java 5… Sorry that it took a while…

Petri, thanks for nice plugin. I’ve just started to play with it, and I’ve got the following question:

It is possible to suppress somehow the vertical/horizontal bars which appear when the contents is lazily loaded (see attached screenshot)? I use
LazyLoadWrapper
to wrap tab components and after the contents is loaded bars disappear (and of course there are no bars without wrapper). I am not sure what is causing the problem. I have Vaadin 6.7.3, FF 6.0.1 (tested also with IE 8.0.6 with the same effect).
12147.png

Petri, great add-on, thanks! I’m trying to use it to build a component similar to the ImageStrip add-on, with arbitrary components in place of images. I’ve put a bunch of my components into a
HorizontalLayout
, each first wrapped with a
LazyLoadWrapper
. The
HorizontalLayout
gets put into a
Panel
to allow the display of the components to be scrolled. All works well: dragging the scrollbar displays the
LazyLoadWrapper
placeholder until the component is loaded. Excellent.

The one glitch that I have found is demonstrated by
programmatic
control of the scroller. I have a button which takes you directly to the end of the component list by calling
setScrollLeft(int pos)
on the
Panel
. It works correctly, but it appears that all the intermediate components are being unecessarily loaded before those at the end of the list. The result is quite a delay, when I’d hoped that only the components at the end would need to be loaded.

Seems like it’s the
Panel
scrolling code that is telling every intermediate instance of the
LazyLoadWrapper
to load unnecessarily. Any way you can think of to work around this performance issue?

Hi,

After a very long break, the LLW is slowly getting back to life… There is now a alpha release of LLW for Vaadin 7. The new version for Vaadin 7 is still in a very early state and I’m in the process of figuring out the features that can be ported from the Vaadin 6 version to Vaadin 7. LLW for V7 is basically a complete rewrite as the LLW targets the server-client communications logic in Vaadin (which is basically rewritten in V7).

The 0.1 alpha release focuses on server-side lazy loading as I recon this is the most used feature of LLW (correct me if I’m wrong). The client-side lazy loading may or may not work with some components. I quickly tested it with Labels and Embedded which worked ok, but for more complex components (like Table) it didn’t quite work…

I’m also working on a new demo application for LLW, you can find it under:


http://petri.virtuallypreinstalled.com/LLW7Demo/

As a new experimental feature I’ve also exposed the setClientSideIsVisible(boolean) API to the server side to reset the LLW to a wrapped state (demo in the new demo app).

Give it a try, but do remember that it is an alpha release :wink:

Hi Petri,
First, thanks for the really useful addon. I’ve used it for some months now with no issues.

I have a question though… is there any way to change the background colour of the placeholder? The dark gray is good for visibility to say “something different is happening” but from a design point of view, it would be nice to be able to specify the background color.
Regards,
Anthony

Great Add-On. Do you plan to support IE anytime soon?

Hey, It is really a perfect add-on. I hope you are working to support IE. When can we expect an update?:slight_smile:

Does this add-on work in IE browser?