pas2js tutorial
lazarus / 38-Networking and Web Programming

----------------------------------------------------------------------
ebelouet · 2019-03-17 08:16

Hi,

I search a tutorial to make frist program with Pas2Js and lazarus 2.0

Sincerely
Eric

----------------------------------------------------------------------
m.abudrais · 2019-03-17 15:11

look here http://wiki.freepascal.org/lazarus_pas2js_integration

----------------------------------------------------------------------
tatamata · 2019-03-19 15:54

Not much in wiki.
What are plans of Lazarus development team regarding pas2js widgets?
Can we expect something similar to TMS Web Core in foreseeable future
or this is not in current focus?

----------------------------------------------------------------------
tatamata · 2020-05-08 07:11

https://wiki.freepascal.org/pas2js_widgetsets is a very sad page...
I am wondering why creating pas2js widgetsets for RAD development is
not top priority for Lazarus core developers?
If done, it would be such a Renaissance of Lazarus/Freepascal...but it
seems nobody cares. Why?
TMS WebCore shown the path, but it is commercial and quite expensive.
Why there is no traction to create an open-source free alternative?

----------------------------------------------------------------------
PascalDragon · 2020-05-08 07:20

It's not mentioned on the Wiki (yet), but I've done a fork of the
widgetset started by Heliosroots and improved it further. Though it's
still a work in progress.

----------------------------------------------------------------------
tatamata · 2020-05-08 09:21

Quote from: PascalDragon on May 08, 2020, 09:20:58 amIt's not
mentioned on the Wiki (yet), but I've done a fork of the widgetset
started by Heliosroots and improved it further. Though it's still a
work in progress.
Nice, I justed installed it and try to compile simple project.
However, I get error: "Fatal: parameter -gl: unknown parameter "-gl".
Use -h for help." What does it mean?

----------------------------------------------------------------------
PascalDragon · 2020-05-08 13:02

Did you start a "Web Browser Application"?

Also you should make sure that you're using pas2js trunk. I don't know
if the latest release works (I have not yet tested it  )

----------------------------------------------------------------------
mr-highball · 2020-05-08 16:20

I've started my own framework for building UI's with pas2js. Still
real early but maybe you can see how I did some things in source to
get a head start.

This post has the github link and a quick sample,
https://forum.lazarus.freepascal.org/index.php/topic,49572.msg360179.h
tml#msg360179

----------------------------------------------------------------------
tatamata · 2020-05-19 08:25

Quote from: PascalDragon on May 08, 2020, 03:02:36 pmDid you start a
"Web Browser Application"?

Also you should make sure that you're using pas2js trunk. I don't know
if the latest release works (I have not yet tested it  )
Yes, but I always get this -gl error. Actually, the error is raised
when I try to compile Pas2js_Designer_Package. This happens even if I
remove -gl option under options of the package and try to recompile.
I don't know.
Could you provide your package with pas2js included, as "all in one"
package?

----------------------------------------------------------------------
PascalDragon · 2020-05-19 09:33

Quote from: tatamata on May 19, 2020, 10:25:03 amYes, but I always get
this -gl error. Actually, the error is raised when I try to compile
Pas2js_Designer_Package. This happens even if I remove -gl option
under options of the package and try to recompile.

You need to install that package, not compile it. If you compile it
from within a project that uses pas2js the package will be compiled
with that as well, but that package is supposed to be compiled with
FPC for inclusion with Lazarus.

----------------------------------------------------------------------
tatamata · 2020-05-20 07:02

Quote from: PascalDragon on May 19, 2020, 11:33:27 amQuote from:
tatamata on May 19, 2020, 10:25:03 amYes, but I always get this -gl
error. Actually, the error is raised when I try to compile
Pas2js_Designer_Package. This happens even if I remove -gl option
under options of the package and try to recompile.

You need to install that package, not compile it. If you compile it
from within a project that uses pas2js the package will be compiled
with that as well, but that package is supposed to be compiled with
FPC for inclusion with Lazarus.
Hi PascalDragon, ok, I got it, now it compiles, however no form is
shown in web browser, what am I missing?
In IDE options, path of pas2js.exe: C:\Users\HT-
ICT\Downloads\fpcupdeluxe\fpc\bin\x86_64-win64\pas2js.exe
In IDE options, path of simpleserver: C:\Users\HT-
ICT\Downloads\fpcupdeluxe\fpc\bin\x86_64-win64\compileserver.exe
In project options, I added other unit files:
..\..\Downloads\fpcupdeluxe\lazarus\components\Pas2JS_Widget-
master\pas2js\compiler\utils\pas2js\dist (this is trunk pas2js)
Custom compiler options: -Jeutf-8 -Jirtl.js -Jc -Jminclude -JRjs
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i program
project1; {$mode objfpc} uses  Forms, Interfaces,  browserconsole, JS,
Classes, SysUtils, Web, Unit1, Unit2; begin  Application.Initialize; 
Application.CreateForm(TWForm, WForm1);  WForm1.Show; 
Application.Run;end.           Code: Pascal
 [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i unit
Unit1; {$mode objfpc} interface uses  Forms, Interfaces,  JS, Classes,
SysUtils, Graphics, Controls, Dialogs, WebCtrls; type   { TWForm1 }  
TWForm1 = class(TWForm)    procedure WButton1Click(Sender: TObject); 
private   public   end; var  WForm1: TWForm1; implementation {$R
*.lfm} { TWForm1 } procedure TWForm1.WButton1Click(Sender:
TObject);begin  showmessage('Blago meni ako ovo
proradi!');end; end. Code: Pascal  [Select][+][-]window.onload =
function(){var x1 = document.getElementById("main_content_section");
if (x1) { var x = document.getElementsByClassName("geshi");for (var i
= 0; i <!doctype html><html lang="en"><head>  <meta http-
equiv="Content-type" content="text/html; charset=utf-8">  <meta
name="viewport" content="width=device-width, initial-scale=1"> 
<title>Project1</title>  <script
src="project1.js"></script></head><body>  <script>   alert("Zdravo
1!");   rtl.run();   alert("Zdravo 2!");   </script>  <div
id="pasjsconsole"></div> </body></html>I get these two alerts, before
and after rtl.run(), but there is no web form. What is wrong?

----------------------------------------------------------------------
PascalDragon · 2020-05-20 07:49

Quote from: tatamata on May 20, 2020, 09:02:11 amQuote from:
PascalDragon on May 19, 2020, 11:33:27 amQuote from: tatamata on May
19, 2020, 10:25:03 amYes, but I always get this -gl error. Actually,
the error is raised when I try to compile Pas2js_Designer_Package.
This happens even if I remove -gl option under options of the package
and try to recompile.

You need to install that package, not compile it. If you compile it
from within a project that uses pas2js the package will be compiled
with that as well, but that package is supposed to be compiled with
FPC for inclusion with Lazarus.
Hi PascalDragon, ok, I got it, now it compiles, however no form is
shown in web browser, what am I missing?
In IDE options, path of pas2js.exe: C:\Users\HT-
ICT\Downloads\fpcupdeluxe\fpc\bin\x86_64-win64\pas2js.exe
In IDE options, path of simpleserver: C:\Users\HT-
ICT\Downloads\fpcupdeluxe\fpc\bin\x86_64-win64\compileserver.exe
In project options, I added other unit files:
..\..\Downloads\fpcupdeluxe\lazarus\components\Pas2JS_Widget-
master\pas2js\compiler\utils\pas2js\dist (this is trunk pas2js)
Custom compiler options: -Jeutf-8 -Jirtl.js -Jc -Jminclude -JRjs
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i program
project1; {$mode objfpc} uses  Forms, Interfaces,  browserconsole, JS,
Classes, SysUtils, Web, Unit1, Unit2; begin  Application.Initialize; 
Application.CreateForm(TWForm, WForm1);  WForm1.Show; 
Application.Run;end.          
You don't need the WForm1.Show here.

Would you also provide the contents of the LFM file, please? And the
output of your browser's console? (In Firefox you can get it using
Ctrl+Shift+I and then going to the Console tab, in Chromium based
browsers it will be similar; reload the site to make sure that it
captures everything)

----------------------------------------------------------------------
Thaddy · 2020-05-20 08:14

In Chromium, press F12.

----------------------------------------------------------------------
tatamata · 2020-05-20 08:42

Quote from: PascalDragon on May 20, 2020, 09:49:38 amQuote from:
tatamata on May 20, 2020, 09:02:11 amQuote from: PascalDragon on May
19, 2020, 11:33:27 amQuote from: tatamata on May 19, 2020, 10:25:03
amYes, but I always get this -gl error. Actually, the error is raised
when I try to compile Pas2js_Designer_Package. This happens even if I
remove -gl option under options of the package and try to recompile.

You need to install that package, not compile it. If you compile it
from within a project that uses pas2js the package will be compiled
with that as well, but that package is supposed to be compiled with
FPC for inclusion with Lazarus.
Hi PascalDragon, ok, I got it, now it compiles, however no form is
shown in web browser, what am I missing?
In IDE options, path of pas2js.exe: C:\Users\HT-
ICT\Downloads\fpcupdeluxe\fpc\bin\x86_64-win64\pas2js.exe
In IDE options, path of simpleserver: C:\Users\HT-
ICT\Downloads\fpcupdeluxe\fpc\bin\x86_64-win64\compileserver.exe
In project options, I added other unit files:
..\..\Downloads\fpcupdeluxe\lazarus\components\Pas2JS_Widget-
master\pas2js\compiler\utils\pas2js\dist (this is trunk pas2js)
Custom compiler options: -Jeutf-8 -Jirtl.js -Jc -Jminclude -JRjs
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i program
project1; {$mode objfpc} uses  Forms, Interfaces,  browserconsole, JS,
Classes, SysUtils, Web, Unit1, Unit2; begin  Application.Initialize; 
Application.CreateForm(TWForm, WForm1);  WForm1.Show; 
Application.Run;end.          
You don't need the WForm1.Show here.

Would you also provide the contents of the LFM file, please? And the
output of your browser's console? (In Firefox you can get it using
Ctrl+Shift+I and then going to the Console tab, in Chromium based
browsers it will be similar; reload the site to make sure that it
captures everything)
In web console (Firefox):
unreachable code after return statement
system.pas:895:23
unreachable code after return statement
system.pas:1060:2

system.pas attached

unit1.lfm content:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i object
WForm1: TWForm1  Left = 793  Height = 240  Top = 427  Width = 320 
AlphaBlend = False  AlphaBlendValue = 255  Caption = 'WForm1' 
ClientHeight = 240  ClientWidth = 320  object WLabel1: TWLabel    Left
= 59    Height = 17    Top = 37    Width = 65    AutoSize = False   
Caption = 'WLabel1'    ParentColor = False  end  object WButton1:
TWButton    Left = 141    Height = 25    Top = 107    Width = 75   
Caption = 'WButton1'    TabOrder = 0    OnClick = WButton1Click 
endend

----------------------------------------------------------------------
tatamata · 2020-05-20 12:59

Dear PascalDragon, generated project1.js file also attached, if you
wish to take a look.

----------------------------------------------------------------------
PascalDragon · 2020-05-20 15:30

Quote from: tatamata on May 20, 2020, 10:42:17 amQuote from:
PascalDragon on May 20, 2020, 09:49:38 amQuote from: tatamata on May
20, 2020, 09:02:11 amQuote from: PascalDragon on May 19, 2020,
11:33:27 amQuote from: tatamata on May 19, 2020, 10:25:03 amYes, but I
always get this -gl error. Actually, the error is raised when I try to
compile Pas2js_Designer_Package. This happens even if I remove -gl
option under options of the package and try to recompile.

You need to install that package, not compile it. If you compile it
from within a project that uses pas2js the package will be compiled
with that as well, but that package is supposed to be compiled with
FPC for inclusion with Lazarus.
Hi PascalDragon, ok, I got it, now it compiles, however no form is
shown in web browser, what am I missing?
In IDE options, path of pas2js.exe: C:\Users\HT-
ICT\Downloads\fpcupdeluxe\fpc\bin\x86_64-win64\pas2js.exe
In IDE options, path of simpleserver: C:\Users\HT-
ICT\Downloads\fpcupdeluxe\fpc\bin\x86_64-win64\compileserver.exe
In project options, I added other unit files:
..\..\Downloads\fpcupdeluxe\lazarus\components\Pas2JS_Widget-
master\pas2js\compiler\utils\pas2js\dist (this is trunk pas2js)
Custom compiler options: -Jeutf-8 -Jirtl.js -Jc -Jminclude -JRjs
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i program
project1; {$mode objfpc} uses  Forms, Interfaces,  browserconsole, JS,
Classes, SysUtils, Web, Unit1, Unit2; begin  Application.Initialize; 
Application.CreateForm(TWForm, WForm1);  WForm1.Show; 
Application.Run;end.          
You don't need the WForm1.Show here.

Would you also provide the contents of the LFM file, please? And the
output of your browser's console? (In Firefox you can get it using
Ctrl+Shift+I and then going to the Console tab, in Chromium based
browsers it will be similar; reload the site to make sure that it
captures everything)
In web console (Firefox):
unreachable code after return statement
system.pas:895:23
unreachable code after return statement
system.pas:1060:2

system.pas attached

unit1.lfm content:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i object
WForm1: TWForm1  Left = 793  Height = 240  Top = 427  Width = 320 
AlphaBlend = False  AlphaBlendValue = 255  Caption = 'WForm1' 
ClientHeight = 240  ClientWidth = 320  object WLabel1: TWLabel    Left
= 59    Height = 17    Top = 37    Width = 65    AutoSize = False   
Caption = 'WLabel1'    ParentColor = False  end  object WButton1:
TWButton    Left = 141    Height = 25    Top = 107    Width = 75   
Caption = 'WButton1'    TabOrder = 0    OnClick = WButton1Click 
endend 
I can only take an in depth look tomorrow, but as a quick idea, would
you please make sure that your declaration of TWForm1 contains
declarations for the label and the button? Like this:

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i type   {
TWForm1 }   TWForm1 = class(TWForm)    WLabel1: TWLabel1;    WButton1:
TWButton1;    procedure WButton1Click(Sender: TObject);  private  
public   end;

----------------------------------------------------------------------
tatamata · 2020-05-21 08:23

No, it did not contain button and label declaration. if I add it
manually, the "unreachable code after return statement" error
regarding system.pas remains.
Created new web form, this time button and label are automatically
included. However the error still remains.

----------------------------------------------------------------------
PascalDragon · 2020-05-21 10:30

I've now tried this myself with Lazarus 2.0.6 (2.0.8 should be the
same, I hope) and as a result I've updated the README.md a bit as well
as fixed a bug in ShowMessage (though the resulting dialogs look
rather ugly now that I looked at them  ).

Following these instructions I was able to get a working form. If you
still can't get it working, please provide an archive of your project
(containing any *.pas, *.lfm, *.lpr, *.lpi and *.html file).

The “Unreachable code” warning is inside the RTL of pas2js and
unrelated to the problem at hand.

----------------------------------------------------------------------
tatamata · 2020-05-22 16:04

Hi PascalDragon, I have tried from scratch, but get the same result -
everything compiles, but whe I run, no web form is shown, only empty
page...
The zipped project is attached (project1.js and project1.js.map files
are excluded due to big size).

----------------------------------------------------------------------
Bazic · 2020-11-14 02:58

Are there any further successes?

I tried also today with fresh trunk of pas2js and fresh WCL copy.
I have sligtlly different error: Caught unknown exception type :
Cannot read property 'InheritsFrom' of null
And of course form is not visible.
Previously I had even complaints about missing form's Width & Height
propertes - so I deleted them from .lfm file.

----------------------------------------------------------------------
PascalDragon · 2020-11-14 16:30

Quote from: tatamata on May 22, 2020, 06:04:54 pmHi PascalDragon, I
have tried from scratch, but get the same result - everything
compiles, but whe I run, no web form is shown, only empty page...
The zipped project is attached (project1.js and project1.js.map files
are excluded due to big size).

I'm sorry that it took me so long to get back to this. Your code has a
small mistake: in your main program file the line

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i
Application.CreateForm(TWForm, WForm1);
should in fact be

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i
Application.CreateForm(TWForm1, WForm1);
I've now cleared up that part in the ReadMe (at least I hope it's
clearer now).

Quote from: Bazic on November 14, 2020, 03:58:32 amAre there any
further successes?

I tried also today with fresh trunk of pas2js and fresh WCL copy.
I have sligtlly different error: Caught unknown exception type :
Cannot read property 'InheritsFrom' of null
And of course form is not visible.
Previously I had even complaints about missing form's Width & Height
propertes - so I deleted them from .lfm file.
Did you follow the instructions in the README.md? I've just created a
new application with a form and a button and it works without a
problem.

----------------------------------------------------------------------
sameer · 2020-12-17 12:23

I am also facing same issue as described by @Bazic.

I am using Pas2js 2.0 RC3.

@pascaldragon : pls tell us which version of pas2js you're using. If
possible pls upload a example project.

Thanks.

Edit

----------------------------------------------------------------------
krolikbest · 2021-02-06 22:16

Hi,
it seems that I encountered the same problem as my predecessors
(Bazis, sameer). I followed this
https://github.com/pascaldragon/Pas2JS_Widget. I use Lazarus 2.0.10
(installed as fpcupdeluxe), win7 64bit. I tried with pas2js 2.0.0 and
2.0.0 RC8.
Additionally: I set wform1 with button but I was unable to set OnClick
event - Error "Unable to create new method. Please fix the error shown
in the message window..". Well, in message window i didn't see any
error.
Any workaround or suggestion would be appreciated.

Regards,

--------------
Next day

Ok, in the Web unit there is
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i TJSConsole
= class external name 'Console'  (TJSObject)  Public    procedure
assert(anAssertion : string; Obj1 : JSValue); varargs;    Procedure
clear;      procedure count; overload;    procedure count(aCounter :
String);    procedure debug(Obj1 : JSValue); //varargs of JSValue;
 [color=red]I commented this[/color]    procedure error(Obj1 :
JSValue); //varargs of JSValue;   [color=red] And this[/color]   
procedure group; overload;    procedure group(aLabel : String);
overload;    procedure groupCollapsed; overload;    procedure
groupCollapsed(aLabel : String);overload;    procedure groupEnd;   
procedure info(Obj1 : JSValue); //varargs of JSValue; [color=red]And
this[/color]    procedure log(Obj1 : JSValue); //varargs of JSValue;
 [color=red]And this[/color]              ... and I commented "varargs
of JSValue". I don't know why, but after that I was able to create
OnClick event and run it. But having on the WForm1 WMemo1 this code
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
TWForm1.WButton1Click(Sender: TObject);begin 
WMemo1.Lines.Add('ddddd');end;   doesn't seem to execute.
---
Update to WMemo1, this however works
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
TWForm1.WButton1Click(Sender: TObject);begin  wmemo1.clear; 
wmemo1.BeginUpdate;  wmemo1.Lines.add('fff');  wmemo1.EndUpdate;end;
 I keep my fingers crossed for pas2js!

Regards,

----------------------------------------------------------------------
christchurchuser · 2021-02-18 17:13

Was having a similar problem, after much head scratching and re-
installing, I found:-

When Designing :- you need the WCLDsgn Package as a requirement.
When Compiling :- you need WCL Package as a requirement.

They are mutually exclusive, you need to have the one loaded as a
requirement for the process (design or compile) you want to undertake.

Maybe pascaldragon could comment, when he gets a moment.

KUbuntu 20.04
Lazarus 2.0.10
FPC 3.2.0
Pas2js 2.0.0 RC8

----------------------------------------------------------------------
PascalDragon · 2021-02-19 15:09

Quote from: christchurchuser on February 18, 2021, 06:13:55 pmWas
having a similar problem, after much head scratching and re-
installing, I found:-

When Designing :- you need the WCLDsgn Package as a requirement.
When Compiling :- you need WCL Package as a requirement.

They are mutually exclusive, you need to have the one loaded as a
requirement for the process (design or compile) you want to undertake.
You should never need WCLDsgn as a project requirement. You need to
install that one in the IDE. As a requirement only WCL (in addition to
maybe pas2js_rtl) is required.

Though it could be that this only works correctly in Lazarus 2.1 (I
have not tested that in 2.0 for quite some time).