[Pas2js] Design-time features for pas2js

[Michael Van Canneyt]

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 elements at once.

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