When I have looked at Pacman demo and inside some other demos, I have sadly found out, that HTMl code contain code to create some buttons, and when some HTMl element is selected, Javascript react on it, so Pascal source contain The appropriate code.
Is it possible to use webwidgets.pas unit to create GUi elements such as. Combobox, rfadio button, checkbox, ETC? Or I would also had to create those elements first inside .html code and react on its events from Pascal source? Or webwidget unit can be also used to create GUi elements on WEB page with no need to add new data to .html file? So everything can be done directly from .pas or .lpr sources?

Thank you very much for yours answer.

You can do both.

Or webwidget unit can be also used to create GUi elements on WEB page with no need to add new data to .html file? So everything can be done directly from .pas or .lpr sources?

You can do both.

FMyPage:=TWebPage.Create(Self);
FMyButton:=TButtonWidget.Create(Self);
FMyButton.Parent:=FMyPage;
FMyButton.Text:='Click me';

Or you can put the page and button in the HTML like this:

<div id="mydivid">
<button id="mybuttonid" type="button" class="btn btn-primary">Click me</button> </div>

and do

FMyPage:=TWebPage.Create(Self);
FMyPage.ElementID:='mydivid'; // Some div
FMyButton:=TButtonWidget.Create(Self);
FMyButton.ElementID:='mybuttonid';

The end effect is the same.

Michael.

Oh good example and thank you. My goal is to directly add Webvidgets with no need to add The data to .html. But please, if you would have some time. COuld you send Me The whole source code? I have tried to add it but I Am getting errors. And Public command which declare
FMyPage:=TWebPage;
do not work.
So yours other code do not work for Me. Yours Pascal knowledge is outstanding, but my are not so good.
Thank you very much for yours patience. It could be next demo for Webvidgets not only test demos, but demo, which will show button with text. Is it also possible to create editable input boxes with webelemnts, which can recieve input? When I will have button, input boxes which could have some label so user will know which data should user enter, it will be excellent. And I will create case blocks of if /then block without issues.

Here is my wrong code.

program Project1;
{$mode objfpc}
uses
  browserapp, JS, Classes, SysUtils, Web, webwidget;
type
  TMyApplication = class(TBrowserApplication)
    procedure doRun; override;
  end;
procedure TMyApplication.doRun;
begin
  FMyPage:=TWebPage.Create(Self);
FMyButton:=TButtonWidget.Create(Self);
FMyButton.Parent:=FMyPage;
FMyButton.Text:='Start The code';
  Terminate;
end;
var
  Application : TMyApplication;
begin
  Application:=TMyApplication.Create(nil);
  Application.Initialize;
  Application.Run;
  Application.Free;
end.
I Am getting The following error
project1.lpr(17,3) Error: identifier not found "FMyPage"
But where to declare The variable FMyPage and which data type should I
assign it?

Le 24/08/2020 à 22:30, Mgr. Janusz Chmiel a écrit :

Very likely, you just need to declare it before the begin of the implementation method doRun:

procedure TMyApplication.doRun;
var
    FMyPage: TWebPage;
    FMyButton: TButtonWidget;
begin
      FMyPage:=TWebPage.Create(Self);
      FMyButton:=TButtonWidget.Create(Self);

Or better in the class declaration, because it's likely you'll need to access FMyPage in other methods of class TMyApplication :

type
   TMyApplication = class(TBrowserApplication)
     procedure doRun; override;
   private
     FMyPage: TWebPage;
     FMyButton: TButtonWidget;
   end;

Just for notice, I have a running page made with pas2js, but I'm not sure it can be useful to you because it's written in French and it uses canvas to display charts with ChartJS.

Running page: http://jsuzineau.github.io/pascal_o_r_mapping/jsFrequences/

pas2js source code:
https://github.com/jsuzineau/pascal_o_r_mapping/tree/TjsDataContexte/tools/jsFrequences (project in subdirectory pas2js)

aThank you for yours help.
I will do my best to deeply familiar with Pas2js units. It is truly revolution when creating WEB pages.

Thank you for yours very kind access to my plea. Unfortunately, I Am still getting error
Error: identifier not found "TWebPage
No matterwhen I add The line. If The line is located in The private session or if I add The var declaration after
procedure TMyApplication.doRun;
I only hope, that it is not necessary to manually register webwidget package. Because visual designer for Lazarus is not usable for me with screen reader. And if uses statement do not produce error, unit can be found, it should not be The problem.
The next possibility is, if The problem is not being caused by The fact, that TWebPage
data type is not declared in other unit than webwidgets. or there is other hydden problem.
I Am running latest Lazarus trunk and latest Pas2js trunk together. Sure, I have rebuilt Lazarus with special component .lpk package for Pas2js. Here is my current code.
program Project1;

{$mode objfpc}
uses
  browserapp, JS, Classes, SysUtils, Web, webwidget;
type
  TMyApplication = class(TBrowserApplication)
    procedure doRun; override;
     end;
procedure TMyApplication.doRun;
         var
    FMyPage: TWebPage;
    FMyButton: TButtonWidget;
begin
  FMyPage:=TWebPage.Create(Self);
FMyButton:=TButtonWidget.Create(Self);
FMyButton.Parent:=FMyPage;
FMyButton.Text:='Start The code';
  Terminate;
end;
var
  Application : TMyApplication;
begin
  Application:=TMyApplication.Create(nil);
  Application.Initialize;
  Application.Run;
  Application.Free;
end.

This code produces .js file without compilation errors. But unfortunately, WEB app contain only title Project1 and no button. Why button have not been created on The WEB page?

program project1;
{$mode objfpc}
uses
  browserapp, JS, Classes, SysUtils, Web, webwidget, htmlwidgets;
type
  TMyApplication = class(TBrowserApplication)
    procedure doRun; override;
       private
     FMyPage: TWebPage;
     FMyButton: TButtonWidget;
   end;
procedure TMyApplication.doRun;
begin
  FMyPage:=TWebPage.Create(Self);
FMyButton:=TButtonWidget.Create(Self);
FMyButton.Parent:=FMyPage;
FMyButton.Text:='Start The code';
  Terminate;
end;
var
  Application : TMyApplication;
begin
  Application:=TMyApplication.Create(nil);
  Application.Initialize;
  Application.Run;
  Application.Free;
end.

An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20200825/a7ed85b6/attachment.htm>

Dear MR SUZINEAU,
You have given Me perfect advice. Code can be compiled with no issues. But my screen reader even its build in OCR function from screen do not see The text of The button.
Please would you try, if this code produces button which you can see on The screen?
Or really, button is not presented?

program project1;
{$mode objfpc}
uses
  browserapp, JS, Classes, SysUtils, Web, webwidget, htmlwidgets;
type
  TMyApplication = class(TBrowserApplication)
    procedure doRun; override;
       public
     FMyPage: TWebPage;
     FMyButton: TButtonWidget;
   end;
procedure TMyApplication.doRun;
begin
  FMyPage:=TWebPage.Create(Self);
FMyButton:=TButtonWidget.Create(Self);
FMyButton.Parent:=FMyPage;
FMyButton.Text:='Start The code';
  Terminate;
end;
var
  Application : TMyApplication;
begin
  Application:=TMyApplication.Create(nil);
  Application.Initialize;
  Application.Run;
  Application.Free;
end.

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20200825/e21cdcea/attachment.htm>

An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20200825/0a17dab4/attachment.htm>

Yes, I have tried writeln statement aslo. What do you think, that do not work?
May be, that there must be other commands to produce WEB page with button. I only hope, that user do not have to create manually some HTMl code. If yes, it would be very sad for Me.

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20200825/547734e5/attachment.htm>

I think, that there is some hydden problem. Because compiler do not produce The error. So may be, that there must be other lines of code. But MR Canneyt have given Me advice, that I should use webwidgets units and he is even using those units for his professional commerical WEB apps. So. May be, that he combines HTMl tags inside HTML file with pascal source, or it is necessary to add other lines of code.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20200825/79e84bae/attachment.htm>

If somebody will have success when using Webwidgets and htmlwidgets to create GUI on WeB page with no need to add HTML tags manually to .html file, please send some little code here.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20200825/02aa21d7/attachment-0001.htm>

aBrowser Seamonkey console do not contain any Javascript based error. I Am still thinkink about htmlwidgets. There are some functions and procedures to overide some elements. Or may be, that JaJavascript code can not create WEBpage widgets?
I Am very curious.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20200825/c8ec1c81/attachment.htm>

Mgr. Janusz Chmiel wrote

If somebody will have success when using Webwidgets and htmlwidgets to create GUI on WeB page with no need to add HTML tags manually to .html file, please send some little code here.

You just need to add a call to
FMyPage.Refresh;
after you create the button.

When you create the various widgets, they exist only in memory, only when you call Refresh() is the HTML (re)created.

This allows you to create a complex structure, and when all property setting is done, call refresh on the top-level widget to create all have some demo programs for the widgets, but I didn't commit them yet because I wanted to include a demo for all widgets first. Unfortunately, I am currently too busy at work to finish the task, I expect to have time in october to finish all demos, but I will try to commit what is there this week still, so you have something to look at.

Michael.

Oh yes.
I will be patient and I Am very sorry that I have intruded all members of this mailing list so much. But I love Pascal so much and its procedural style is more than ideal for visually impaired programmers. One visually impaired man have been The first in our country, who have passed study of informatic sciences with Engineer title and he could achieve this thanks to Delphi, so thanks to Pascal.
Procedural structual language is more than ideal for visually impaireds. Because we can construct The code which is closed to The procedures and structual programming is I think very good for us. I have looked inside yours unit htmlwidgets and you have really created professional GUI toolkit. It is possible to add many Widgets including tables, checkbox and text. You are doing excellent job as A professional and you have even developing opensource solutions for you. Thank you for yours time and for yours advice.

Here is The code, but Browser still show empty page.

program project1;
{$mode objfpc}
uses
  browserapp, JS, Classes, SysUtils, Web, webwidget, htmlwidgets,
browserconsole;
type
  TMyApplication = class(TBrowserApplication)
    procedure doRun; override;
       public
     FMyPage: TWebPage;
     FMyButton: TButtonWidget;
   end;
procedure TMyApplication.doRun;
var
  datum: TDateTime;
begin
  FMyPage:=TWebPage.Create(Self);
FMyButton:=TButtonWidget.Create(Self);
FMyButton.Parent:=FMyPage;
FMyButton.Text:='Start The code';
  FMyPage.Refresh;
  Terminate;
end;
var
  Application : TMyApplication;
begin
  Application:=TMyApplication.Create(nil);
  Application.Initialize;
  Application.Run;
  Application.Free;
end.

FMyButton:=TButtonWidget.Create(FMyPage); // ???

Le 25/08/2020 à 21:18, Mgr. Janusz Chmiel a écrit :

Here is The code, but Browser still show empty page.

It's very funny.

I've just run the program with the debugger in the navigator (F12 key in Firefox), running step by step the program.

In fact the button is created ... but it disappears when running Terminate and Application.Free, which is logic, anyway.

Here is my test code, with Terminate and Application.Free commented.

program project1;
{$mode objfpc}
uses
     browserapp, JS, Classes, SysUtils, Web, webwidget, htmlwidgets;
type
  TMyApplication
  =
   class(TBrowserApplication)
     procedure doRun; override;
   end;
procedure TMyApplication.doRun;
var
    FMyPage: TWebPage;
    FMyButton: TButtonWidget;
begin
      WriteLn('TMyApplication.doRun;');
      FMyPage:=TWebPage.Create(Self);
      FMyPage.Parent:=TViewPort.Create(Nil);
      FMyButton:=TButtonWidget.Create(Self);
      FMyButton.Parent:=FMyPage;
      FMyButton.Text:='Start The code';
      FMyButton.Refresh;
      FMyPage.Refresh;
      //Terminate;
end;
var
    Application : TMyApplication;
begin
     Application:=TMyApplication.Create(nil);
     Application.Initialize;
     Application.Run;
     //Application.Free;
end.

Yes, in the browser, you may not free the application object.

Michael.

Do not free the application object, it will free your page as well, and destroy the html.

Michael.

Dear MR Van Canneyt and MR SUZINEAU,
Thank you for yours very positive access to my pleas. I can say viola! Because page really show button and it is perfectly screen reader accessible code. And really, thanks to htmlwidgets it is really possible to create GUI elements directly by using Pascal source code no need to add manually HTMl code to .html file. Very very well done. And I will be patiently waiting for AN demos because I must also learn how to react on click on object activation, there will be very probably click procedure inside htmlwidgets unit.

So thank you again.
As A visually impaired man with no sight at all, I have one important question.
Because I will not be able to specify width or height object properties, what will happen, if I would create for example 25 buttons. WWhen I will not specify number object position values. I know, that very probably, my code will not look very attractive for sighted WEB app audience. But important for Me is, if Java script code can not crash in this case. Important is, that screen reader can access HTMl objects which will be created by using htmlwidgets unit.