[Pas2js] htmlwidgets based source codes plea

[Michael Van Canneyt]

On Sat, 29 Aug 2020, Mgr. Janusz Chmiel wrote:

> Dear specialists here,
> 	I would like to learn new techniques based on reactions of widget
> content changes. Does somebody of us have some free or opensource source
> which uses htmlwidgets unit? My goal is to learn where to add if then
> condition block, how to react on widgets changes.
> Today I have found out, that simply adding if then condition which will
> monitor widget for text value do not work. It is not simply possible to add
> this condition block after last line related to GUI creation. 
> I would had to monitor key presses or if there is An function or procedure
> to monitor input editable field for changes.
> The similar problem is how to detect if somebody have clicked on specific
> button.

The TWebWidget class has event handlers for all HTML event types. They work
as in Delphi or Lazarus, except the signature is different.

So, simplified:

TMyClass = Class(TComponent)
   Frm : TWebPage;
   Btn : TButtonWidget;
   Procedure DoClick(Sender: TObject; Event: TJSEvent);
   Procedure CreateButton;
end;

Procedure TMyClass.CreateButton;

begin
   Frm:=TWebPage.Create(Self);
   Btn:=TButtonWidget.Create(Self);
   Btn.Parent:=Frm;
   Btn.OnClick:=@DoClick;
   Btn.Text:='Click me';
   Frm.Refresh;
end;


Procedure TMyClass.DoClick(Sender: TObject; aEvent : TJSEvent);

begin
   window.alert('You clicked a button with text '+TButtonWidget(Sender).Text);
end;

To monitor for changes in an input, the procedure is exactly the same, except the event
is called OnChange.

Michael.