Trouble adding menu items in a project I am converting from VCL to WEB Core

I has successfully added some menu items to the Web Core version I am working one, but now when I try to add 2 more menus with sub menus, when I click on the little MainMenu1 box in the Design tab, it brings up the VCL Menu Designer, and any menu items I add to that do not show up when I run the project.

What am I doing wrong? I'm in a time bind! Thanks in advance for your help.

Are you just using the regular TWebMainMenu ? Did you make any changes to the new menu items? Not much else to check I don't think. Be sure you're reloading the page after making changes (Ctrl+F5 for example in desktop browsers).

Here is what the project currently looks like, before AND after attempts:

I had made these 3 menus the other day. Each has multiple sub-menu items. I am trying to add 2 more menus, named "Test" and "Help" I was able to get just the top items for these 2 new menus in, so it looks like this:

But when I try to add sub-menu items to either, it shows me THIS:

... and when I compile, I just see the first picture I showed above. I am very new to WEB CORE, but a longtime Delphi user since Delphi 1. I am using Delphi 10.1 Berlin. Here is a wider view that includes the Object Inspector:

Aren't I supposed to just enter WEB CORE or FNC items?
Any suggestions?

It looks like you're doing it right. Just editing menus as we've done for decades, nothing too complicated.

The reason I suggested the Ctrl+F5 to refresh the browser is that sometimes the browser caches the javascript code that is generated. So you're busy making changes but nothing seems to be happening. Checking with a different browser also helps in terms of your sanity, if this is happening. If you're using Chrome, hit F12 to bring up the developer console, and then long-press on the refresh button at the top-left to get to the "Empty Cache and Hard Reload" option.

Is there any other indication that your project is being updated when you run it each time? Like if you change the caption temporarily on "Find All Devices" do you see the new caption? It's a silly thing I know, but sometimes these things are indeed silly.

Other things to check... Hmmm... Some obvious ones, like the menu items and submenu items being set to 'visible' and 'enabled'.

And the top-level menu appears when you have a menu but no submenus, but disappears when you add in the submenus? Is that what you're describing?

Screencap of creating main menu

Found so far:

  • Menu items are indeed set to 'visible' and 'enabled'.|
  • When I tried changing Find All Devices button caption to Find All Devices? , when I ran it, it still showed Find All Devices
  • Changing default browser from Firefox to Chrome, and using Ctrl+F5 to refresh the browser, made no improvement or change of any kind
  • "Hit F12 to bring up the developer console, and then long-press on the refresh button at the top-left to get to the "Empty Cache and Hard Reload" option" makes no change in Find All Devices button

"And the top-level menu appears when you have a menu but no submenus, but disappears when you add in the submenus? Is that what you're describing?"
No, not exactly. The File, Program, and Options menus, that I had started with, do indeed show their submenus. The Test and Help menus do not show at all when I run. In the Design view in Delphi, the submenus of Help do show up in the IDE, but not in the run. The "Test" menu shows up in the design view, but it has no sub-menus. No "Test" at all when running,

Ah, so it sounds like we're wrestling with a project that isn't being updated then?

By default, this all works normally quite well. So somewhere along the line, I'm guessing something might have changed. When you run the app (hit F9 from within Delphi) what happens? In the link I sent, you should see how it normally just loads up a browser (Chrome in my case) and then shows a link to the TMS WEB Core-supplied web server, which serves up a page like this:

http://localhost:8000/Project1/Project1.html

Is this the kind of thing that you're seeing? Maybe with a different project name if you've given your project a different name of course. The key bit is that it should be referencing http://localhost:8000 so that it is using the TMS WEB Core webserver and not some other location. That's the default port that it is running on, so if you've not changed it, it should still be there.

When you run the app, there is also the option for whether it is in Debug mode or Release mode, and it should create all the necessary files in either the <project dir>/TMSWeb/Debug or <project dir>/TMSWeb/Release folder. So you can check in there and see if the files are actually being updated.

If you're using a link that points elsewhere (maybe you have another webserver you're testing with) then these files will need to be copied over each time you make a change for the other webserver to see the new updates.

You said:
"When you run the app (hit F9 from within Delphi) what happens? In the link I sent, you should see how it normally just loads up a browser (Chrome in my case) and then shows a link to the TMS WEB Core-supplied web server, which serves up a page like this:

http://localhost:8000/Project1/Project1.html :"

I see:

So yeah, the localhost thing is there.

A key difference is that you created a set of menus all in one shot, like I had done when creating the 3 menu items that show up. That worked FINE.

But after that, I realized I needed to add those 2 extra menus, "Test" and "Help" LATER and THAT second pass is what is failing.

I am not trying to do anything fancy with a link that points elsewhere -- at least, not to my knowledge.

I have tried runs in both Debug and Release mode, with no difference.

Yes, I get that the menus were updated after the fact. But that really shouldn't matter if you're just editing them the same way. I tested that a bunch of times at the outset but couldn't get it to misbehave as you're seeing here. The fact that your Find All Devices didn't update with a ? at the end is the clue that something is very likely amiss with how your files are being updated.

Can you look in the project folder at either the Debug or Release folders (whichever mode you're in - preferably debug at this stage) and see what is going on? Presumably, you'll see a WebC_UI_0.html file and at least one JavaScript file with the same name that gets updated whenever you run the application.

If you right-click on the app itself in the browser and "view source" you should see the same JavaScript file being loaded. Depending on the type of project you created initially, it might look something like

<script src="WebC_UI_0.js" type="text/javascript"></script>

What I'm thinking has happened is that the files are somehow being put somewhere else or aren't ending up here for some reason, or that something was renamed so it is loading a JS file all the time, but not the one that is current.

That can happen if your Project.html file was updated to point at a specific JavaScript file instead of the one generated by the project, for example. Or if your TMS WEB Core settings were changed to output the target files in a different directory at some point. In which case the web browser will keep showing you the same version of the app over and over again. Which sounds like what is happening?

Here is what the directory C:\BL_WEB_Core\WebCore_Host\Host_1\TMSWeb\Debug\ looks like:

The 5/6/2022 html file might be suspicious. Here is a comparison of these 2 files (Beyond Compare):

Here is a wider view of my Delphi project:

This is my first WEB CORE project, which is a consulting job to see if WEB CORE can convert my big VCL Bootloader PC program into a web app. I had first made just the main user interface on 5/26/2022, and then copied that into another directory so I add more code to the UI. I had decided that I ought to port the About box of the VCL program into this WEB CORE app, naively thinking this would be straightforward.

It should all be straightforward. That's one of the great things about TMS WEB Core. You're up and running in a pure HTML/JS environment in a few minutes, using decades of Delphi to back you up. It's really quite fantastic in the grand scheme of things, given that HTML and JS were barely a thing when Delphi first came out of course.

So. Back to your problem. Let's have a look at your project source. If you right-click on the "WebC_UI_0.web" link in the project pane on the right, and select View Source (waaay down the list), have a look at what that is doing. Maybe it is loading up WC_UI.pas first instead of your updated WebC_UI form?

program WebC_UI_0;

uses
Vcl.Forms,
WEBLib.Forms,
WC_UI_0 in 'WC_UI_0.pas' {MainForm: TWebForm} {.html},
Unit1 in 'Unit1.pas' {Form1: TWebForm} {
.html};

{$R *.res}

begin
Application.Initialize;
Application.MainFormOnTaskbar := True;
Application.CreateForm(TMainForm, MainForm);
Application.CreateForm(TForm1, Form1);
Application.Run;
end.

There you go!

Go to the Project/Options Menu and then find Application/Forms. And get rid of anything you don't want to see.

Basically, it isn't starting with your updated app but is instead starting from somewhere else. I think?

Will do, but is it acceptable to enter items using the VCL Menu Designer? I get confused about what can and cannot be converted automatically from VCL to WEB Core. Sometimes I get a message that you can only enter WEB items, and sometimes there is no message.

Yes, the VCL menu designer is fine. There are lots of supports for using Delphi-native things within TMS WEB Core, like that. Generally, TMS WEB Core uses TWebForm and a VCL app uses a TForm. TMS WEB Core uses TWebXXXX components and these are functionally equivalent in most cases to their VCL counterparts. But you can't just drop a regular VCL component on a TWebForm, and vice versa. You can use things like the Object Inspector in the same way though, so editing components is often the same process. Menus work this way. So do various database objects and so on. It is a very similar experience. You just can't (yet?) import a VCL form and have it converted to a TMS WEB Core form. Would be nice in some respects but they are very different things behind the scenes.

Blockquote

Form1 isn't supposed to be in this project. It is the About box from the VCL project I am trying to convert to WEB:

Alright, you can either move it over to "Available" instead of "AutoCreate" or just remove it from your project entirely (right-click on it in the Project Manager view and select "remove from project").

I tried both, and neither one made any difference.

Hmmm... Could I interest you in uploading the project? Just zip up the project folder? I'm 100% sure it is something trivial, just that it is hard to tell where the "make it work" switch is when there are so many potential places for it. Which sounds bad, but really it isn't.

It's bigger than 4 MB, so it is getting refused.

Try Release mode?