Recent

Author Topic: pas2js tutorial  (Read 10076 times)

ebelouet

  • Newbie
  • Posts: 1
pas2js tutorial
« on: March 17, 2019, 09:16:17 am »
Hi,

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

Sincerely
Eric

m.abudrais

  • Jr. Member
  • **
  • Posts: 52
Re: pas2js tutorial
« Reply #1 on: March 17, 2019, 04:11:57 pm »

tatamata

  • Hero Member
  • *****
  • Posts: 787
    • ZMSQL - SQL enhanced in-memory database
Re: pas2js tutorial
« Reply #2 on: March 19, 2019, 04:54:56 pm »
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

  • Hero Member
  • *****
  • Posts: 787
    • ZMSQL - SQL enhanced in-memory database
Re: pas2js tutorial
« Reply #3 on: May 08, 2020, 09:11:04 am »
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

  • Hero Member
  • *****
  • Posts: 5446
  • Compiler Developer
Re: pas2js tutorial
« Reply #4 on: May 08, 2020, 09:20:58 am »
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

  • Hero Member
  • *****
  • Posts: 787
    • ZMSQL - SQL enhanced in-memory database
Re: pas2js tutorial
« Reply #5 on: May 08, 2020, 11:21:21 am »
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.
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?
« Last Edit: May 08, 2020, 12:07:03 pm by tatamata »

PascalDragon

  • Hero Member
  • *****
  • Posts: 5446
  • Compiler Developer
Re: pas2js tutorial
« Reply #6 on: May 08, 2020, 03:02:36 pm »
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

  • Full Member
  • ***
  • Posts: 233
    • Highball Github
Re: pas2js tutorial
« Reply #7 on: May 08, 2020, 06:20:54 pm »
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.html#msg360179

tatamata

  • Hero Member
  • *****
  • Posts: 787
    • ZMSQL - SQL enhanced in-memory database
Re: pas2js tutorial
« Reply #8 on: May 19, 2020, 10:25:03 am »
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 :-[ )
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

  • Hero Member
  • *****
  • Posts: 5446
  • Compiler Developer
Re: pas2js tutorial
« Reply #9 on: May 19, 2020, 11:33:27 am »
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.

tatamata

  • Hero Member
  • *****
  • Posts: 787
    • ZMSQL - SQL enhanced in-memory database
Re: pas2js tutorial
« Reply #10 on: May 20, 2020, 09:02:11 am »
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.          
Code: Pascal  [Select][+][-]
  1. unit Unit1;
  2.  
  3. {$mode objfpc}
  4.  
  5. interface
  6.  
  7. uses
  8.   Forms, Interfaces,
  9.   JS, Classes, SysUtils, Graphics, Controls, Dialogs, WebCtrls;
  10.  
  11. type
  12.  
  13.   { TWForm1 }
  14.  
  15.   TWForm1 = class(TWForm)
  16.     procedure WButton1Click(Sender: TObject);
  17.   private
  18.  
  19.   public
  20.  
  21.   end;
  22.  
  23. var
  24.   WForm1: TWForm1;
  25.  
  26. implementation
  27.  
  28. {$R *.lfm}
  29.  
  30. { TWForm1 }
  31.  
  32. procedure TWForm1.WButton1Click(Sender: TObject);
  33. begin
  34.   showmessage('Blago meni ako ovo proradi!');
  35. end;
  36.  
  37. end.
  38.  
Code: Pascal  [Select][+][-]
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1">
  6.   <title>Project1</title>
  7.   <script src="project1.js"></script>
  8. </head>
  9. <body>
  10.   <script>
  11.  
  12.   alert("Zdravo 1!");
  13.  
  14.   rtl.run();
  15.  
  16.   alert("Zdravo 2!");
  17.  
  18.   </script>
  19.   <div id="pasjsconsole"></div>
  20.  
  21. </body>
  22. </html>
I get these two alerts, before and after rtl.run(), but there is no web form. What is wrong?

PascalDragon

  • Hero Member
  • *****
  • Posts: 5446
  • Compiler Developer
Re: pas2js tutorial
« Reply #11 on: May 20, 2020, 09:49:38 am »
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)

Thaddy

  • Hero Member
  • *****
  • Posts: 14205
  • Probably until I exterminate Putin.
Re: pas2js tutorial
« Reply #12 on: May 20, 2020, 10:14:53 am »
In Chromium, press F12.
Specialize a type, not a var.

tatamata

  • Hero Member
  • *****
  • Posts: 787
    • ZMSQL - SQL enhanced in-memory database
Re: pas2js tutorial
« Reply #13 on: May 20, 2020, 10:42:17 am »
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.  


tatamata

  • Hero Member
  • *****
  • Posts: 787
    • ZMSQL - SQL enhanced in-memory database
Re: pas2js tutorial
« Reply #14 on: May 20, 2020, 02:59:56 pm »
Dear PascalDragon, generated project1.js file also attached, if you wish to take a look.

 

TinyPortal © 2005-2018