[Pas2js] Pas2JS-Widgets with LFM streaming

[Michael Van Canneyt]

On Fri, 26 Jul 2019, Sven Barth via Pas2js wrote:

> Hello together!
>
> I've experimented a bit with Pas2JS and the Pas2JS-Widgets by heliosroots ( 
> https://github.com/heliosroots/Pas2JS_Widget/tree/master ) and implemented 
> loading of unmodified LFM files. It's a bit cumbersome for now, cause it 
> needs changes in the project's HTML source as well as the main project file 
> for each form added, but as a proof of concept it works. I've attached the 
> patch that needs to be applied to the Pas2JS-Widget master.

Impressive :-)

>
> To use it you proceed as follows:
> - make sure you have installed Pas2JSDsgn (from Pas2JS) and 
> Pas2JS_Designer_Package (from Pas2JS-Widgets)
> - make sure you at least once opened Pas2JS_RTL (from Pas2JS) and 
> Pas2JS_Widget (from Pas2JS-Widgets)
> - create a new "Web Browser Application"
> - add Pas2JS_RTL and Pas2JS_Widget as requirements
> - add new forms using New -> Module -> Web Form (Pas2JS)
> - remove the overridden Loaded method from any forms
> - replace the main program's code with this (of course adjust the form/unit 
> names to your needs):
>
> === code begin ===
>
> program tp2j;
>
> {$mode objfpc}
>
> uses
>   Forms, FormLoader, Interfaces, Unit1;
>
> procedure DoInit(aData: TObject);
> begin
>   Application.Initialize;
>   Application.CreateForm(TWForm1, WForm1);
>   Application.Run;
> end;
>
> begin
>   LoadForms([TWForm1], @DoInit, Nil);
> end.
>
> === code end ===

I think you can avoid this change by checking the 
'Run rtl when all page resources are fully loaded' 
options when creating your project.

This will change the script tag to
   window.addEventListener("load", rtl.run);
so the program only runs when all forms are actually loaded, avoiding the
need to wait for the load.

The changes to the html could be implemented without too much effort in the IDE package.

Another approach would be to simply embed the .lfm in the html page in a
script tag.

>
> - add a script tag in front of the project's script tag in the HTML file:   
> <script src="unit1.lfm" type="application/x-lazarus-form" 
> id="TWForm1.lfm"></script>
> - play around with the form (add components (from the Pas2JS component tab 
> only!), add events, etc.)
> - before compiling make sure that the project *does not* contain a 
> requirement of Pas2JS_Designer_Package (the IDE currently adds this when 
> adding a component)
> - make sure that the *.LFM files are at the same location as the *.JS file
> - load your application in the browser -> you should now see your form
>
> A screenshot showing the resulting browser and the IDE is attached. :)

Nice job :-)

>
> This can obviously be further improved:
> - adding support also for frames and data modules
> - caching the converted object stream (so that it doesn't need to be 
> converted for each creation of a form)
> - add some way of asynchronous loading?

There is the dynload unit which can help in this.

Nice ! slowly we go ahead. And more surprises are still coming... :-)

Michael.