[Pas2js] Modern UI for pas2js

[Michael Van Canneyt]

On Wed, 20 Feb 2019, warleyalex via Pas2js wrote:

> I recreated/translated an old project "Project ATM for pas2js"
> LIVE PREVIEW: https://pas2js.github.io/master/projATM/www/index.html
> use the PIN = 1234 
>
> This is really a simple app! Really, I'm interested in doing it with Lazarus
> this designer entirely, and get minimum/lower file JS footprint.
>
> Gentlemen, how to you see the method of drawing UI in Lazarus? 
>
> Basically, there are 2 ways to create a modern UI in Lazarus.
>
> 1. components /UI/Frameworks based on "custom paint"
> 2. implement basic CSS drawing and positioning around LCL
>
> a long time ago I tried the second option. And it's quite easy to implement
> basic drawing using CSS. But there are too many challenges for me. And I
> think this concept to design UI is wrong. I sincerely don't the TMS Core
> approach. I always prefer handwritting HTML and CSS approach to design
> complex apps.

I understand that some people like this. It is also more in line with modern
frameworks like Angular/React/Vue. That is why I am working on

a) A templating engine for the client part. Something like

    MyComponent:=LoadComponent(GetElementByID('mycontainer'),'component.html','component.js');

    should be easily doable.
    I think a 'component' (in the sense of webcomponent) can correspond to a combination of a unit and a html template.

b) integrating cef in the IDE designer using the custom form designer.

>
> ---------
> OFFTOPIC: Please  implement the "Multi line strings" feature, which can be
> quite useful when you have multi-line string content, a long format string,
> a snippet of CSS or HTML etc. Something like the syntax of Prism/Oxygen:
>
> var s := #"
>   Lorem ipsum 'dolor' sit amet, consectetur adipiscing elit.
>   Duis l'ipsum odio, pretium ""hendrerit"" varius sed,
>   aliquet vitae elit.
>   Sed eu libero nec nisl ""malesuada"" dignissim.
> ";

This will not happen.

>
> or feature like  {$INCLUDE 'page1.html'} to include a file as a string it
> would be nice addiction.

But this can be done. There is even a feature request in FPC for it, with a
patch. {$INCLUDESTRING 'page.html'}

Michael.