Speed up web page with numerous containers?

http://107.155.69.221/cgi-bin/draganddrop2/draganddrop2.cgi

Drag a cell from the top box to the bottom. A message will show the content of the cell in the top box when it’s functional

Takes about 15 seconds on my computer for the drag to register.

Then the second drag is quick right Paul?

John, I see now what you are trying to do. Makes sense that you are doing it this way.

Now, just brainstorming here: What if you highlight (select) the “from container” on the first click, and copy its content to the “To container” on a second click. What I have in mind here is that the data in contained in tables or classes underneath, and this is what you are copying. Once the copying process is done, you refresh the “To container”. You would avoid the overhead of the drag and drop. Perhaps, this would be faster.

I do understand that users are used to drag and drop and this would be a change. Perhaps if the performance gain is sufficient, the change can be accepter easier.

Especially in Web programs, do not use the WebListBox to store data. The entire content of the WebListBox is loaded in the web page.

It is quite possible the tremendous amount of time you see is due to the transfer of data between server and client.

Better store data in an array, and show only the relevant data on the current page.

You may want to create a WebPage with only the WebContainers. No need to rest them over a WebListbox.

Use vertical and horizontal scrollbars to navigate.

Louis . . . That is the current way it’s used. My clients like drag and drop.

Michel . . . My two minute page had all containers, no listboxes.

The issue with the containers over listbox idea and even a mock listbox to listbox drag and drop requires that I can determine the height of multiline rows. I’ve tried that forever and haven’t had success yet.

When you request the height of a row it only gives you the minimum row height, not the final.

There’s no way to know exactly when a cell will wrap text. Each browser renders text slightly different.

Any ideas on getting actual row heights?

[quote=461356:@John Scanlan]http://107.155.69.221/cgi-bin/draganddrop2/draganddrop2.cgi

Drag a cell from the top box to the bottom. A message will show the content of the cell in the top box when it’s functional[/quote]

I already gave you the answer in my last post. Again, the framework dispatch events in order. If you have 200 events when loading the page, the first drag will happen only AFTER the 200 other events you are creating BEFORE the first drag could be atended.

(Each event is a complete post request making a round trip beetwen the server and the client.)

So, don’t use 200 events to initialize your page.

[code]Public Sub RowHeight(Row as Integer)
dim js as string

js = js + “table = document.getElementById('”+ListBox1.ControlID+“_rows’);”
js = js + “location.hash = ‘JS:’ + table.rows[”+str(Row)+“].offsetHeight;”

self.ExecuteJavaScript(js)
End Sub
[/code]

You call RowHeight with the row number, then get the actual row height in the SessionHashtagChanged event, in the form of “JS:38” where 38 is for instance the row height in pixels. Use Replace to trim the “JS:” prefix. Change “Listbox1” to the name of your Listbox in the Javascript code.

If you don’t like the codes to show in the URL line, study the WebSDK for TriggerServerEvent, another way to get back JavaScript values silently. You find the documentation for WebSDK in the Extras folder, next to the Xojo executable.

There is nothing in the documentation on how to return a value

The idea would be to, after the listbox is filled, fill an array with row heights.

Look. You keep asking for a way to get the height of rows in a Weblistbox.

I provide a solution.

I tested it, it works as posted.

Now it is up to you first to thank me, and then go on your merry way to write your program.

BTW, All the documentation for WebSDK is in /Extras/WebSDK folder, next to the Xojo executable.

In WebControlSDK.pdf, see “Xojo.triggerServerEvent()”. That is how you silently return a value from JavaScript. But you may not need it, if what I posted suffices.

Don’t abuse the built in controls that way. Your only choice is to go with a web plugin that you create yourself. It would be fairly straightforward if not easy to build a control that had all those things embedded in it and then get only single events to the entire control rather than hundreds of them to individual elements of the built in controls. I’ve done this for all sorts of things that simply didn’t work worth a darn as embedded controls. If you can figure out how to do it in raw HTML, CSS and Javascript then you can wrap it into a custom web control and handle all the stuff in a much better way than by forcing built in xojo controls to do what you want when they were never really meant to do that.

Michel … it does me no good to have the height posted in the URL. How can my app use that?

The documentation on triggerserverevent is useless. I’ve gone through it and done the examples many many times. Nothing in the documentation returns a value, nothing.

Better question James . . . Why can’t Xojo provide drag and drop between list boxes?

Why has every improvement in the last few years been about sales over quality?

I think the main reason is that according to the official roadmap the current Web interface is in the process of being replaced. They are cleaning up the API2.0 business right now but the very next thing on the list is Web2.0. It is my suspicion that they would be placing the effort on getting the new stuff out the door than fixing stuff in the old framework.

If there isn’t time pressure on this project then you can wait a bit and possibly try it with the new Web2.0 and see what things are different fixed or fantastic or whatever there. If some number of months before we have a release with a 1.0 version of web 2.0 is not going to work then you’re stuck rolling your own.

LOL
He also tell you how to use it there

Returning a value there is virtually the sole function of triggerserverevent…

Ivan . . . Please show me where it tells us how to return a value and I’ll be forever grateful

[quote=461533:@Michel Bujardet]

[code]Public Sub RowHeight(Row as Integer)
dim js as string

js = js + “table = document.getElementById(’”+ListBox1.ControlID+"_rows’);"
js = js + “location.hash = ‘JS:’ + table.rows[”+str(Row)+"].offsetHeight;"

self.ExecuteJavaScript(js)
End Sub
[/code]
You call RowHeight with the row number, then get the actual row height in the SessionHashtagChanged event[/quote]

Thanks Ivan. This doesn’t work however. If I set a for loop to iterate through the rows in a listbox it blows right through the rows to the last one. Have to believe this is the asynchronous problem.

I need this to iterate through the rows and populate an array of row heights.

How about an example, or good explanation, of how to return values through triggerserverevent ?