Can CustomLayout handle 5000 components?

Dear Vaadin users,

I am trying to use
CustomLayout
for the purpose, which I’ve described
here
: I need to create a text with links, for which I would like to handle
onClick()
event.

So far so good: the approach worked fine for me, but when I tried to add more than 200 components, FF started to complain, that JS execution takes too long. With IE I was able to render this page, but with a big delay. The number of components I need to add to this layout is 5000. Is it something what Vaadin can handle? What is the maximum feasible amount?

Thanks in advance!

I haven’t tested this with your use case, but if not all of the components are visible all the time you can try to stage the component loads using the
LazyLoadWrapper add-on
.

Maybe it would be better to go to the client side and take care of all of this there. Then Vaadin wouldn’t have to track 5000 of your components. I’d bet it would be a lot faster with only GWT. Of course the case is different if you have to go to the server side all the time to fetch more data.

If it is only spellcheck that you require, I think you could use some of the rich text area implementations found on the Directory, but you probably have some other specifications as well.


Henri
, thank for the hint. Unfortunately, about 200 components are visible and that is enough to cause the communication timeout (and FF starts complaining).


Jens
, thanks for comments. I wonder, who to implement this approach? Is there any example which I can look at and extend for my needs? How much effort does it include?

It is not exactly the spellchecker but annotations on the text, which is non-editable HTML-rich. For example, the chemical names should be highlighted with one colour (see attachment), references to journals (citations) – with another and so on. There is no need to retrieve more data from the server, but only the send back the event, that the mouse is clicked. I can render the text using one Label + CONTENT_XHTML, but how to associate the mouse clicks with Java server-side handlers?

Thanks.
11736.jpg

How about just using normal HTML links, uri fragments and
URI Fragment utility
?

(So just put the whole text with links to one label and handle clicks in uri fragment utility)


Joonas
, thanks for reply. The
last time
I’ve asked about nearly the same topic, you also have given the same advise. However it looks like I failed to implement

UriFragmentUtility
support in my application
correctly. Do you happen to know any good working example of using
UriFragmentUtility
(except the one on Vaadin book)?

Thank you!

Hi,

did you find the solution?

I would need something similar - but no clickable labels.
Have you tried to use Labels.XHTML + Button with.setStyleName(BaseTheme.BUTTON_LINK)?

The add-on mentioned in
this thread
might help.


Henri
, thank you for valuable comment!
ClickableCustomLayout
indeed helped, but not completely. The whole story is that on mouse click I would like to show the PopupView. This popup needs to be shown in the area of the link.


  • CSSLayout
    is out of the game: it needs to render 10000 components (mixture of
    com.vaadin.ui.Label
    s and
    com.vaadin.ui.Button
    s). More over as
    Vaadin has no visual component, that is rendered as
    , the resulting HTML is complicated (a lot of embedded

    s) plus one need to trick these divs to be rendered not as blocks via CSS.

  • CustomLayout
    is better, as you render text as DOM text nodes, and you have
    com.vaadin.ui.Button
    s and
    com.vaadin.ui.PopupView
    s. In my setup if you render more then 50 such elements (so there will be 50 buttons and 50 popup views), the client side becomes unresponsive for more than 10 seconds, which is unacceptable. [*]

    ClickableCustomLayout
    is even better, as now the number of real visual elements is 50 (popup views).

I am happy to have only one popup window, but how to manage it? Thanks in advance.

Would it help if ClickableCustomLayout could give you the x,y of the click? I don’t think that’d be hard… I can take a stab. Update: check out 0.9.2. It’ll give you x, y of the click.


Royce
, thanks. You were able to find my post. All my last recent are about the same matter: I am trying to use Vaadin in extreme conditions, and it starts failing…

How do you think, is it possible to put
ClickableCustomLayout
+
PopupView
into
AbsoluteLayout
? So the sandwich looks like:


AbsoluteLayout
 + ClickableCustomLayout (relative positioning)
 |  + HTML
 + PopupView (absolute positioning)

and then when the mouse is clicked, I need to shift PopupView to new location… Will it work, how do you think?

Yeah, it probably will. ClickableCustomLayout reports the absolute position of the mouse click. Give it a go :wink:

Thanks for adding mouse coordinates – it should help me, but
this
is not working.

Perhaps
ClickableCustomLayoutClickEvent
should better extend
MouseEvents.ClickEvent
(if you can provide the information like that) so there is better integration with Vaadin.

Do you happen to know, if it is possible to communicate the coordinates of some DOM element back to server when client has rendered its contents?

Yeah - I should have done that. I’m busy implementing another widget at the moment and don’t really have the time right this second to give it a shot.

I haven’t come across anything that can do that… you could always write your own - it’s not hard at all.

That would be fantastic. In my case I would like to know not
clientX
and
clientY
, but
relativeX
and
relativeY
. I’ve got no idea how to calculate them, as I don’t know the coordinates of the layout.

I probably won’t have the chance to do this any time really soon. I promised my boss I’d support this add on in my own time, and there’s some pretty terrible family business going on at home. Sorry mate!

Here’s the code in case you want to give it a shot yourself. Eventually I’ll publish this somewhere, but I don’t have the time right now :frowning:
11819.gz (4.44 MB)