Managing Dynamic Containers within a WebView

I have an array that tracks dynamically created containers then added to a webview (embedwithin - refer to example below). While the containers are being created dynamically, how do you specify a unique name for each container to later call container_name.close in order for it to be removed from the display? When I use the example to display the webobj.name contained within the webview, each container is listed with the same name based on the name of the container control being used for each addition. How does one dynamically name containers at creation?

A user clicking “Add” creates a webcontainer and appends it to a list of containers within a webview. I am able to add the containers dynamically without problems. If a container is removed from the webview and not in the reverse order to which it was created, the space allocated for that container remains. I would like to move the following containers “up” to remove the space between containers.

Example:

container1
container2
<— container3 removed
container4

Disclaimer
I am not an OO developer. I come from a PL/SQL and DBA background and still learning.

A simple way to name the containers would be to use an array of Containers.

Add myContainers() as ContainerControl1 to the WebPage, and do this to add one :

myContainers.append New ContainerControl1

You can then remove or insert elements of the array.

That way you have what you describe automatically.

you can keep track of such objects in an array but it’s best from an OO viewpoint to simply allow the item to close itself (that is, if you have the luxury of the user clicking on it to do so).

Alternatively, if the user is closing a selected item, then you might have the item stored in a ‘currentSelection’ property?

As for sliding, in the xojo web world that’s best done slightly outside the xojo code with CSS.

I posteded a technique some time ago here

Michel,
Thanks for the reply. I see where I got off the path. The containers being created and added tot he list of containers has a button that fires a “self.close” when clicked. Since it’s within container, my array at the window/page level is not aware of it being closed.

The containers being added dynamically are basically a db record in a friendly display format. I append the containers to simulate a listbox look and feel. Since listboxes do not support “merged cells” to provide a multi line per record look (at least not that I am aware of).
row1 |cell|cell|cell|
row2 |*cell|

What is the best method to remove the container in the list with the appearance of having a “delete” per line. (make sense?). My first assumption would be to reference top down from the “page.webview.linecontainer”. While trying to be as OO as I can understand, this doesn’t seem like the OO way to go.

Steve,
Thanks! I will take a look!

Correction - I had two arrays going. One for the data and another for the containers. UGH!

Time to dismantle and see what all is going on.

At any rate, if you need a reference to the container, you need some way to reference it. Personally, I tend to use a dictionary, but since the OP described something closer to an array, it is just as good.

I now have one array storing my containers and it appears I am back to the beginning. If I have 7 elements to my array and the user clicks the “remove” for element 4, I can remove the #4 element but I still have an empty space where the container was. If I issue a “refresh” to rebuild the list it works, but the open event of the container fires the open event that resets data values on the container.

I realize in my initial I didn’t provide every little detail. At this point, I am looking at options. I have also started a desktop app to see if I can get it to work as intended then see what is required to get the web version running.

You cannot simply let the user close the container and hope it will remove the corresponding array slot. That responsibility falls on you.

You could have a method that is called in the container close event such as

for i as integer = myContainers.ubound-1 downto 0 if mycontainers(i) = self myContainers.remove(i) exit end if next

Understood and what you typed last makes better sense. I will tinker more.

Thanks to You and Steve!