Speed up web page with numerous containers?

Apparently 200 containers is a problem. The window shows but is not useable for over two minutes.

Any way to speed this up?

Can’t you refactor the structure of your app ? 200 WebContainers seems like a lot.

This is why I’ve been begging for drag and drop between web list boxes.

The 200 containers are just ten columns by ten rows in two “list boxes” of containers so I can use drag and drop

I’ve tried to get actual row heights after list boxes are shown but the instructions for JavaScript are incredibly difficult to follow.

can you show a screen shot of your page and what is one container?
at different browsers the same issue? browser have hardware acceleration enabled?

For what it’s worth I’ve found Embedding containers programmatically seems to be less of an overhead than design time containers

Of course, we don’t know what you are doing. We are shooting in the dark with our proposals. But I definitely agree with @Michel Bujardet that you would benefit greatly from looking at alternate solutions.

I wonder why you would need a container per cell (not saying you don’t). Do you drag just one cell at a time, or the entire row? if so, my approach may be a decent workaround: Instead of drag and drop, I use a marker (&U221A) in an extra column, and a button to start the process (in my case, an copy to next year). Any marked record (row) is copied programmatically - actually, from an array of classes underneath the listbox. It does not cost much in terms of performance.

In any case, you need to look at possible solutions to reduce the number of containers: one per row, for example. Or none if you use a regular weblistbox, and a marker to trigger the copy process. Perhaps, copy classes instead of UI elements, and show the UI once the process is completed in background?

Just food for thought. Hopefully, this can be helpful.

because pc’s can play realistic 3d games in realtime i think 200 WebContainers are nothing.
and there are so much complex websites that works fine without a delay.
but first you need to know the root of the time-wasting.
i guess it is a cascading of paint events.

[quote=460795:@Markus Rauch]because pc’s can play realistic 3d games in realtime i think 200 WebContainers are nothing.
and there are so much complex websites that works fine without a delay.
but first you need to know the root of the time-wasting.
i guess it is a cascading of paint events.[/quote]

We are talking Web apps here, not your desktop game. Because processing takes place on the server, there is an inherent lag due to round trips between browser and server. It is much worse than paint event, actually. Somewhere in the neighborhood of 200 ms is not unheard of.

[quote=460778:@John Scanlan]This is why I’ve been begging for drag and drop between web list boxes.

The 200 containers are just ten columns by ten rows in two “list boxes” of containers so I can use drag and drop[/quote]

So if I understand right, you have created a grid of 20 ten cell columns rows, which would be 200 cells total, in order to do drag and drop ?

Are you dragging individual cells or rows ? If rows, you could embed WebContainers in column zero, and drag them. In the example I guessed above, you would have 20 containers total.

Here is a discussion where @Brock Nash shares projects showing how to embed a WebContainer into a WebListBox:
https://forum.xojo.com/46100-what-can-i-embed-within-a-weblistbox

me thought rendering is at client side same as html & java script.
is there a diagram about xojo web apps?
today i made a test app with many container controls + labels, there was nothing slow in the page view in firefox. r2

I would think 200 containers would be doable. I use quite a few in the GraffitiSuite Demo start page on a very low-end VPS.

That said, it really depends on what you’re doing in each of those containers. If they’re largely decoration, it should be pretty snappy. If you have a lot of logic for each container it can slow to a crawl rather quickly.

Xojo Web is server side. Meaning, it does use JavaScript, but even WebTimer based on a JavaScript timer, still has to do round trips to trigger the Action event.

The only pure client side control seems to be animator.

It all comes down to how you’re using them. If you don’t implement a MouseMove event, for instance, then no packets are sent back and forth for that event. We don’t have enough information about the implementation to pinpoint the issue.

Louis . . . That’s how my program runs now; point and click. My clients are gymnastics coaches so they’re more attuned to drag and drop.

This page allows the user to copy an athlete’s routines for a competition to any other athlete’s routines for any other competition. So it’s cell to cell drag and drop. In my current version (non drag and drop) you click on a cell in the from box then click on a cell in the to box. (the first athlete is a text length test)

Each cell is a container (Not each apparatus text):

I quickly looked into enabling drag of cells in the current WebListBox. For many reasons too long to develop here, it is not possible.

In practice, it would take creating a special control based on an HTML table to do that. This is well beyond a few lines of JavaScript.

The WebContainer approach seems to be sound, since draggable can be enabled.

To speed up such a design, I would remove as many event handlers from the containers as possible, especially the ones that require round trips between controls and server, such as mouseMove. Instead of using the WebContainers to store data as you could do in Desktop, work on a local (server side) array that caches the cells. That way you can minimize data going back and forth between the client and server side program.

how about marking the source cell with a color at start, creating a dummy control which you moving around
and if you drop it then the cells are really replaced.
will the hovering moving control slow down the web app because of the redraw of controls below?
as i understood only your drag and drop is slow.

In Xojo Web only, that quickly becomes unusable, because of the 120-200 milliseconds lag between the client and the server’s program.

The best solution is to rely on the drag and drop feature provided by Xojo, which is client side for the drag part.

[quote=460769:@John Scanlan]Apparently 200 containers is a problem. The window shows but is not useable for over two minutes.

Any way to speed this up?[/quote]

200 containers should not be a problem. BUT excessive messages sent between the client browser and the server application will be.

For this kind of lag, maybe you are using events on each container. Since xojo web is too limited, responding to 200 events will be ridiculously slow. Maybe a Shown event or something else causing comunication with the server from all the controls?

Just tried to create a page with nothing but 200 containers that contain only three variables (row number, column number, and self.name) sitting on top of list boxes so the data would be be in the list boxes not the containers. Better result but still 20 seconds to become useful.

Michel . . . the drag and drop from listbox to listbox is why long ago I was trying to get the actual row heights in the list boxes.