Hi,
I’m trying to work out what is the standard way (if one exists) to structure a multiple page web app.
In other frameworks such as Django, Laravel etc, I would create an HTML template which pulled in a header subtemplate and footer subtemplate and then each page would inherit from this master template and inject the contents into a “page content” subtemplate placeholder between the header and footer.
This is what I have considered doing with my web app - one main web page and then a HomePageContainer with home page stuff, an AboutPageContainer etc etc
Or is it better to have one WebPage instance per actual page, and just replicate the header and footer as containers in each? The downside to this of course is if the header or footer need to change size, I’d have to go into each page and make sure that they all did the same.
I’m very new to Xojo Web so I’m not sure which of the above is the right way, and whether there are any underlying overheads for doing it one way over the other.
Either approach can ultimately work. I can endorse the approach of using one main web page with separate containers.
One of the considerations is definitely your target audience. As an example, we developed a Web App in the original Web Framework, which is still running. By using this approach (single web page, multiple containers), we able to get a consistent look across multiple browsers and devices. We picked a fixed size “Main Window”, that worked well on iPad screens and larger. It has held up pretty well over the years.
As part of developing that solution, we learned a lot about Xojo WebContainers, especially dynamically embedding WebContainers, and the AddHandler functionality.
If you only have a few pages and the header and footer are basically the same on all of them, then I would create separate web pages. Then create a container for the header and container for the footer and place them on each page. On your header, you can change something like the page name for each page by using the opening event.
If you have a lot of pages, a single page with a dynamically embedded container may be better. Also, it is sometimes easier to use a container for positioning things. So even if you have separate web pages for each logical page in your web app, you may end up having a container for each page too.
Thanks for the thoughts, much appreciated. I’ll try both ways and see which works best for me.