Web App using all web containers

I am trying to create a webapp that uses one main page, and everything else will be pages that are really webcontainers.
I would like the webcontainers to behave themselves, be able to be opened/closed or hidden, whatever is best, along with being sized and aligned properly.
I have a “header” and “footer” on my page, so I want to containers to not interfere with them.
I understand the basics of how to do this, but really don’t want to “reinvent the wheel” unless I have to.

Does anyone out there have a basic demo app or app they could share that’s doing basically what I’m needing that would be willing to share with me, for free, or a reasonable cost to save me the time, and frustration of creating something myself? Maybe I’m just being lazy, but it seems much better if someone already has a proven technique for doing this, that it would make sense to use it.

I would love for it all to resize properly if possible. I do own Rubber Views but have not tried incorporating it into my app until my app is more stable.

I used Xojo many years ago, but not for web, so much is new to me, like locking/unlocking the controls, so be gentle.


Just out of curiosity, why are you trying to do this?

Technically a web app is already a single page and the content is loaded into separate divs and shown/hidden automatically for you, so unless you’ve got a really good reason…

If all you are trying to do is maintain a header and footer, I suggest making those into containers and placing them on every page. I think you’ll get the most bang for the buck that way.

I am trying to do it so that if I change the header or footer, I don’t have to make the change on 20-30 pages. In addition I would like to eventually be able to dynamically put some webcontainers on the left and/or right of certain pages, and was thinking that by dynamically adding/removing webcontainers that would be the best.

I’m open to suggestions, and if I’m going about it the wrong way, I’m willing to rethink it.

Right. Just make the header & footer into containers and place those on every page. Then when you change them, they’ll automatically update everywhere they’re used.

The problems with dynamically adding and removing web containers are that they’re slower than just showing a page, and you’ve got to be very careful about closing them when you’re done with them, lest the browser run out of ram.

I forgot about the headers/footer changing throughout. Thanks for reminding me.
They are containers now.

Okay, I will see what others say here, but I have one big vote for pages and not just containers.

I’ve switched to containers after starting with pages and now I’m using only containers in one single page.
Working with containers isn’t difficult.
I find this approach simpler to manage when compared to building different pages.

My application requires an header, a footer and a variable central area.
Using a single page you can treat each area of the page as self contained and persistent objects.
If you switch to a multipage design you must handle the data persistence to other entities outside each area.
This can be seen as a limited design but for me this choice works fine.

Another plus is that you can “cache” containers simply setting them as invisible and back visible again speeding up the page update time.

In Practice, WebContainers or Pages are about just the same. Whatever works for you.

To Greg:

It would be very useful to have a “best practice” or a “do/don’t” guide about web applications.
In some cases I’m feeling like an explorer…

I would like to continue to try to use one main webpage, and the rest webcontainers. It would give me the flexibility that I would like.

My main issue that is left is that I have a main webpage, call it webpage1, and many containers. I know how to open and close the containers, but wondering how I should really control it.

For example, I have webpage1, it opens a container that has a bunch of buttons on it for a menu. The user clicks on the button for say editing a vehicle code, and I open another container, but I want the menu container to be gone for now. Later then the user exits the vehicle code lookup and edit form, I want the menu to come back. The menu might even have an item to go to another menu on it.

I am not understanding the best way to maintain/monitor and control those webcontainers which are really like pages.

My original thought was setting something that indicated what webcontainer should be open, then opening the webpage1 again and displaying it, but it seems strange to do it that way. I am by no means a Xojo expert, and Xojo web is new to me.

If there is a decent way of doing this, please let me know.

I learn best from examples, but I’m open to whatever makes sense.


In general you must do some planning on how to organize the parts of your page and the interaction between them.
In the application there must be something that coordinates the interactions between the various parts and keep track of the flow of informations.

The simple part is how to open, hide, close (and so on) the various container.
For example to hide a container simply set its visibility to false and back to true when teh container must show up again.

In your description you want to open a container for editing some values and at the same time hide an existing container: you can use the close event of the editing container to show up again the previous container.
If you planned to put this logic in the first container, use AddHandler to set a method of the first container to handle the close event of the edit container.

I’m repeating myself: the important part is the initial planning about the interaction of the various parts and what entity is the one coordinating the interaction between these parts.


I think your problem is the use of “IMPLICIT INSTANCE” ON at your Webpages. Turn it off.

There is tutorial from @Bob Keeney , which explain it.

Thanks, I’ll take a look and see if I can find the tutorial.