Hello,
I've committed initial design-time support for pas2js.
What does this mean ? This is not (yet) full-blown WYSIWYG support for creating webpages.
But you can create event handlers, use TDatasets visually etc, like you would for a normal application.
I've created some 10+ demos that show how to work with this:
https://www.freepascal.org/~michael/pas2js-demos/design/
For many (but not all) examples you can download the sources straight from the demo.
Of course, all demos have been checked in in GIT - under demo/design.
To work with them in design-time, you need the latest lazarus sources, and you must install the components/pas2js/components/pas2jscomponents.lpk package.
Once you do this, there is a new file type 'HTML Fragment', this is your 'Form' or 'Frame'.
It works by what I term a 'HTML-First' design:
It supposes a single-page application, which loads a html fragment into the main HTML page, under a HTML element you can specify (the "body" element by default).
This HTML fragment can be loaded from a HTML file at runtime, specified in the 'form' itself, or loaded from a central HTML template manager class. The form has a .lfm file associated with it, which is included in the browser and used to load your form - just as in a native IDE.
There are no 'controls' which you drop on the 'page'. Instead, all controls are in the HTML you created. This design allows you to use all the power of CSS to lay-out your page.
How then do you interact with the HTML if there are no controls to attach events to ?
A central component on the component palette is the THTMLElementActions component. This is modeled after the TActionList you can find in the LCL
- but it is not 100% the same. In this component you can add an action for each HTML element that has an ID (a wizard will scan the HTML and extract all IDS for you).
You can also use CSS selectors for targeting multiple action acts as a kind of mediator between the HTML and your code: you can attach event handlers to the various elements in the HTML page (every element with an ID), and allows you to get/set values for inputs. DB-Aware actions exist too: they couple a dataset to the HTML input elements.
The other components are based on the 'webwidgets' package which exists since quite some time, in which some fixes have been done to correct some issues when streaming the components.
In the company I work for, we've been working like this in Delphi with TMS Web core, and I can say that productivity does not suffer at all with this approach. (in fact, due to superior editing capabilities of Lazarus, the coding works even faster :-)).
I've started a WIKI page in the FPC Wiki:
https://wiki.freepascal.org/pas2js_designtime
This (both the components and the WIKI page) is a work in progress.
Enjoy,
Michael.