pas2js tutorial

[PascalDragon]

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.

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][+][-]

1. program project1;
2.  
3. {$mode objfpc}
4.  
5. uses
6.   Forms, Interfaces,
7.   browserconsole, JS, Classes, SysUtils, Web, Unit1, Unit2;
8.  
9. begin
10.   Application.Initialize;
11.   Application.CreateForm(TWForm, WForm1);
12.   WForm1.Show;
13.   Application.Run;
14. 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][+][-]

1. object WForm1: TWForm1
2.   Left = 793
3.   Height = 240
4.   Top = 427
5.   Width = 320
6.   AlphaBlend = False
7.   AlphaBlendValue = 255
8.   Caption = 'WForm1'
9.   ClientHeight = 240
10.   ClientWidth = 320
11.   object WLabel1: TWLabel
12.     Left = 59
13.     Height = 17
14.     Top = 37
15.     Width = 65
16.     AutoSize = False
17.     Caption = 'WLabel1'
18.     ParentColor = False
19.   end
20.   object WButton1: TWButton
21.     Left = 141
22.     Height = 25
23.     Top = 107
24.     Width = 75
25.     Caption = 'WButton1'
26.     TabOrder = 0
27.     OnClick = WButton1Click
28.   end
29. end
30.  

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][+][-]

1. type
2.  
3.   { TWForm1 }
4.  
5.   TWForm1 = class(TWForm)
6.     WLabel1: TWLabel1;
7.     WButton1: TWButton1;
8.     procedure WButton1Click(Sender: TObject);
9.   private
10.  
11.   public
12.  
13.   end;

[tatamata]

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]

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]

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]

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]

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).

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][+][-]

1. Application.CreateForm(TWForm, WForm1);

should in fact be

Code: Pascal  [Select][+][-]

1. Application.CreateForm(TWForm1, WForm1);

I've now cleared up that part in the ReadMe (at least I hope it's clearer now).

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.

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]

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]

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][+][-]

1. TJSConsole = class external name 'Console'  (TJSObject)
2.   Public
3.     procedure assert(anAssertion : string; Obj1 : JSValue); varargs;
4.     Procedure clear;  
5.     procedure count; overload;
6.     procedure count(aCounter : String);
7.     procedure debug(Obj1 : JSValue); //varargs of JSValue;  [color=red]I commented this[/color]
8.     procedure error(Obj1 : JSValue); //varargs of JSValue;   [color=red] And this[/color]
9.     procedure group; overload;
10.     procedure group(aLabel : String); overload;
11.     procedure groupCollapsed; overload;
12.     procedure groupCollapsed(aLabel : String);overload;
13.     procedure groupEnd;
14.     procedure info(Obj1 : JSValue); //varargs of JSValue; [color=red]And this[/color]
15.     procedure log(Obj1 : JSValue); //varargs of JSValue;  [color=red]And this[/color]              
16. .
17. .
18. .
19.  

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][+][-]

1. procedure TWForm1.WButton1Click(Sender: TObject);
2. begin
3.   WMemo1.Lines.Add('ddddd');
4. end;  
5.  

doesn't seem to execute.
---
Update to WMemo1, this however works

Code: Pascal  [Select][+][-]

1. procedure TWForm1.WButton1Click(Sender: TObject);
2. begin
3.   wmemo1.clear;
4.   wmemo1.BeginUpdate;
5.   wmemo1.Lines.add('fff');
6.   wmemo1.EndUpdate;
7. end;
8.  

I keep my fingers crossed for pas2js!

Regards,

[christchurchuser]

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]

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.

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).