Problem Initializing web form

Helo,
This probably has to do with async creation, but I am new to web programming.

How do I initialize Form members when creating Web Forms. I want to inject an interface.

type
IViewModelMain = interface
['{48B17B44-9FE7-4A02-9F16-D3852042B3BC}']
procedure SayHello;
end;

type
TViewModelMain = class(TInterfacedObject, IViewModelMain)
public
procedure SayHello;
end;

procedure TViewModelMain.SayHello;
begin
console.Log('Hello World');
end;

type
TfrmMain = class(TWebForm)
lblHeader: TWebLabel;
btnHello: TWebButton;
procedure WebFormCreate(Sender: TObject);
procedure btnHelloClick(Sender: TObject);
procedure WebFormShow(Sender: TObject);
private
ViewModel : IViewModelMain;
procedure InitView;
end;

procedure TfrmMain.InitView;
begin
console.Log('TfrmMain.InitView');
ViewModel := TViewModelMain.Create;
end;

procedure TfrmMain.btnHelloClick(Sender: TObject);
begin
// InitView; // <- Initialized
ViewModel.SayHello;
end;

If I add the InitView to the btnClik it works, but trying to add before in Create or Show methods does not.

Thanks in advance

You have more details about "it does not work"?
As far as I see, this should be unrelated to web and when you create the interfaced object in the context of the Pascal form class, when the Pascal form class is created, you should be able to create this interfaced class as member of this Pascal form class.

I get this error if I do not call InitView in the button click event:
View.Main.pas:57 Uncaught TypeError: Cannot read properties of null (reading 'SayHello')
at Object.btnHelloClick (View.Main.pas:57:12)
at Object.cb [as FOnClick] (rtl.js:254:1)
at Object.Click (WEBLib.Controls.pas:1854:5)
at Object.Click (WEBLib.StdCtrls.pas:3673:3)
at Object.HandleDoClick (WEBLib.Controls.pas:3925:5)
at HTMLButtonElement.cb (rtl.js:250:1)

I will eventually access a REST server from the interface to populate the Web form. I'm new to Web Core so I wanted to start by simply adding an interface to the form that would write "Hello World" to the console.

I create an interface:

unit Int.Main;
{$M+}

interface

type
IViewModelMain = interface
['{48B17B44-9FE7-4A02-9F16-D3852042B3BC}']
procedure SayHello;
end;

implementation

end.

and a class:

unit ViewModel.Main;

interface

uses
Int.Main
;

type
TViewModelMain = class(TInterfacedObject, IViewModelMain)
public
procedure SayHello;
end;

implementation

uses
Web
;

procedure TViewModelMain.SayHello;
begin
console.Log('Hello World');
end;

end.

I have a web form with a button and a field FViewModel that is IViewModel interface.. I added an initialization method InitView to Create the ViewModel interface and assign it to the field. I tried calling the IInitView from the forms Create and Show methods, but get the above error.I added console logging to both the Create and Show methods but there is no logging when I run the app, and I get the above error.

If I add the InitView method to the OnClick handler it logs the event and the interface call to SayHello. Here is the Form code:

unit View.Main;

interface

uses
Int.Main,
System.SysUtils,
System.Classes,
js,
web,
WEBLib.Graphics,
WEBLib.Controls,
WEBLib.Forms,
WEBLib.Dialogs,
WEBLib.Menus,
WEBLib.StdCtrls,
Vcl.Controls,
Vcl.StdCtrls;

type
TfrmMain = class(TWebForm)
lblHeader: TWebLabel;
btnHello: TWebButton;
procedure WebFormCreate(Sender: TObject);
procedure btnHelloClick(Sender: TObject);
procedure WebFormShow(Sender: TObject);
private
ViewModel : IViewModelMain;
procedure InitView;
end;

var
frmMain: TfrmMain;

implementation

{$R *.dfm}

uses
ViewModel.Main;

procedure TfrmMain.WebFormCreate(Sender: TObject);
begin
console.Log('TfrmMain.WebFormCreate');
InitView; // <- Not Initialized
end;

procedure TfrmMain.InitView;
begin
console.Log('TfrmMain.InitView');
ViewModel := TViewModelMain.Create;
end;

procedure TfrmMain.btnHelloClick(Sender: TObject);
begin
// InitView; // <- Initialized
ViewModel.SayHello;
end;

procedure TfrmMain.WebFormShow(Sender: TObject);
begin
console.Log('TfrmMain.WebFormShow');
InitView; // <- Not Initialized
end;

end.

I started from your first post information and built a test app but this works as expected. I can't see an issue.
Project3.zip (5.5 KB)

So, please compare your project to this example that works fine.

I must have a problem with my install. I also had a label on the form and had a very difficult time setting any of it's properties, name, alignment.. Eah time I set a property the cursor would spin for about 15sec then Delphi would close. Even when that would not happen after setting a property, the object inspector would switch to the Form and I found myself editing the form's properties instead of the label.

On the project you provided I tried changing the name of the button and was not able to do so, Delphi closed after changing the name property in the Object inspector. I tried 4 times with the same result.

On my project I tried restarting Delphi and the computer. Nothing changed. I will try reinstalling Web Core next.

I have Delphi and Web Core installed on my main computer and on a VW, both running Windows 11. My main computer has Web Core 2.7.1.0 installed and the VM has 2.7.2.0 installed. Delphi closes on both systems when trying to change the button name in the Object Inspector.

BTW your project worked fine! I even extracted out the interface and class and it still worked. It was when I considered changing the default button name that problems started.

More details: I can change other properties of the button, Caption, Align, Font size, but when I do the Object Inspector switches to the Form and the Button is not available in the Object Inspector drop down list. If I select the form and then try the drop down again it is there. Still, changing the name closes the IDE.

Do you have another machine where you can test this?
I cannot reproduce this (tested on two machines, with both web form designer and classic form designer) and I have never received any similar problem report from other users.

Tried it on my laptop with same results, must be something with my setup. Ditched Delphi and switched to VS Code and Web Core, it's working just fine. I miss MMX and code formatting. There is a formatter but requires other installed extensions and I've lost too much time to work on installs.

You were probably able to reproduce the project in 5 min or less, as was I, however I spent 2 days reading doc's, code and trying everything I could think of only to find the problem was in my install. I should have figured that by the IDE closing, I just thought it wasn't stable yet.

I truly appreciate your attention to this; I was ready to throw in the towel on any Delphi Web development.

1 Like