Recent

Author Topic: pas2js tutorial  (Read 6427 times)

PascalDragon

  • Hero Member
  • *****
  • Posts: 2900
  • Compiler Developer
Re: pas2js tutorial
« Reply #15 on: May 20, 2020, 05:30:29 pm »
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

  • Hero Member
  • *****
  • Posts: 757
    • ZMSQL - SQL enhanced in-memory database
Re: pas2js tutorial
« Reply #16 on: May 21, 2020, 10:23:14 am »
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

  • Hero Member
  • *****
  • Posts: 2900
  • Compiler Developer
Re: pas2js tutorial
« Reply #17 on: May 21, 2020, 12:30:36 pm »
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 :P ).

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

  • Hero Member
  • *****
  • Posts: 757
    • ZMSQL - SQL enhanced in-memory database
Re: pas2js tutorial
« Reply #18 on: May 22, 2020, 06:04:54 pm »
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

  • New member
  • *
  • Posts: 6
Re: pas2js tutorial
« Reply #19 on: November 14, 2020, 03:58:32 am »

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

  • Hero Member
  • *****
  • Posts: 2900
  • Compiler Developer
Re: pas2js tutorial
« Reply #20 on: November 14, 2020, 05:30:01 pm »
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

  • New Member
  • *
  • Posts: 13
Re: pas2js tutorial
« Reply #21 on: December 17, 2020, 01:23:22 pm »
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
« Last Edit: December 22, 2020, 10:32:41 am by sameer »

krolikbest

  • Full Member
  • ***
  • Posts: 155
Re: pas2js tutorial
« Reply #22 on: February 06, 2021, 11:16:35 pm »
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,
« Last Edit: February 07, 2021, 05:58:39 pm by krolikbest »

christchurchuser

  • Newbie
  • Posts: 3
Re: pas2js tutorial
« Reply #23 on: February 18, 2021, 06:13:55 pm »
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

  • Hero Member
  • *****
  • Posts: 2900
  • Compiler Developer
Re: pas2js tutorial
« Reply #24 on: February 19, 2021, 04:09:29 pm »
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).

 

TinyPortal © 2005-2018