Common Web App Idiom: left-hand panel with hierarchical menus

WEB TMS WEB Core
1

A lot of web apps today have a common design where the overall page structure is like a big “C” shape with panels at the top and bottom and a hierarchical menu in a panel on the left. When you click an item in the menu, the larger area within the “C” shape changes. There’s usually a “hamburger” icon (3 horiz bars) to show or hide the left-hand panel.

What’s the best way to implement this in WEB Core?

I’ve made a sample to play with with that uses a TMS FNC TreeView in the menu panel with the lines hidden

What’s the best way to manage the main part? Put a panel in there and then switch what’s displayed on it when each menu item is clicked? Or just load a separate panel into that area and set it to Align Client?

Is there a collection of common page designs like this somewhere that we can use to get started?

(Variations: Some make the left-hand panel fully left-aligned top-to-bottom and have the top and bottom panels to the right, and some put the top and bottom panels the full width and the menu panel is left-aligned between the top and bottom panels. Sometimes the top and/or bottom panels are fixed and only the middle part scrolls, and sometimes they scroll with the screen.)

2

Here’s my sample layout. When you click a link in the left-hand menu structure, it should display something different in the main area. What’s the best way to treat it? In the VCL world, it would be a tabbed notebook with the tabs hidden, which can be done here as well, or a TNotebook (if that’s its name) which is about the same but without the tabs.

But since this is a web app, maybe just a TWebBrowser that’s used to load up … what exactly? Different apps? Different pages in the same app?

As an aside, I’ve had several people suggest using a no-code app builder, but I really hate them because I’m so used to using a WYSIWYG UI builder that Delphi offers that I feel crippled having to type in directions to tell AI how to change the UI. AI is basically blind – it generates images by constructing some kind of cognitive model using different shapes and things, then it flattens everything out to a large array of pixels. You and I see objects on the screen, but it just sees pixels. “Move this box to the right” is meaningless to AI; it has to figure out which bunch of pixels you’re referring to and then do something with it. Delphi lets me click the box with my mouse and simply move it. People call what AI does “vibe coding”. I call it lunacy because it makes me mad!

I can work many times faster at UI design in Delphi as I can with any AI-based app builder I’ve tried so far.

Hey, AI guys: the 1990’s want their command-driven non-GUI interfaces back!

image
image1203×961 141 KB

3

I recommend to have a look at the TWebSideMenu demo included with TMS WEB Core in the demos folder under Demo\Basics\SideMenu

4

Thanks! That’s exactly what I was looking for.

However, it still doesn’t answer the other question of what to put in that space:

  • a PageControl with tabs hidden
  • a Panel (or several panels)
  • a Web Browser
  • something else
5

You see in the demo I pointed to that TWebPanels were used.
It might depend on your needs if this is what fits best or something else.

6

Yes, I saw that. They are very small panels, and you have a dozen or so of them on the Designer page. It’s unclear how big the runtime makes the attached ContentControl (ie, the Panel in this case).

I guess what I’m trying to get at is I’ve got a situation where there might be DOZENS of things here, more like several pages of material if they were a PDF file.

For my purposes it would be easier to simply use the outer ‘C’ frame with the Side Menu to select something, which in nearly all cases would be another WEB Core app, because they’re all independent apps that do different things.

Right now I’m prototyping with a bunch of “cards” on an HTML page created via CSS (Claude built it for me). You click one and it opens up a new web page.in the same browser window. There’s a ‘←- Go Back’ link at the top that can be clicked to go to the previous page. It’s a directory or catalog of things. It’s like in Windows where you have shortcut blocks all over the desktop and you double-click one to open it. Only in this case, it’s going to show a dynamically-generated web page (form) created by a little PHP file. I think it would be a stretch to call it a CMS, but that’s basically what it is. I’d really rather not use Wordpress.

There will be one or more fields at the top for input values, then you click a button and it generates a document and displays it in a

below the button that can be one to several pages long.

I’ve got a web app opening an embedded web page – possibly produced by another web app – and the user interacts with it.

It’s reminiscent of an MDI form.

I’m just not sure what the best way to implement it is, and am asking for suggestions.

In the VCL world, that could be a big TPanel that I’d embed another EXE into.

Can I embed a web app inside of an existing one?

I’ve seen all kinds of membership-type web sites that have this exact same design, but I don’t know how they’re structured internally or how they replace the inner part of that ‘C’ frame with one page after another that’s displayed when you click a link in the side-menu. Some are taller than the space allowed, so they scroll.

7

You could also open a subform at runtime.
See the demo under Demo\Basics\FormHosting how you can create a (sub)form at runtime and you could display this form at the right side of the WebSideMenu.