[Pas2js] The way forward: Exit the VCL/LCL, enter the DOM
Stephen Wright
stephenmichaelwright at yahoo.co.uk
Wed Aug 7 17:03:42 CEST 2019
Hi Michael
I agree with your suggested approach and am happy to contribute to the project particularly if I can refactor some of my existing XComponant/XIDE code to fit in with your plans. To show our current status I have put a demonstrator XIDE project for Chrome here (https://www.dropbox.com/s/rx3ykvap427gqal/XIDEMain.html?dl=1).
Opening this web page you will see our IDE with a project in the layout panel in the centre. This project illustrates the use of Table, SVG and GPU components together with associated buttons and labels all positioned in the UI using HTML “reactive design” flexbox components. Hit “Run Mode” on the top menu bar to run the project, then change a value in the table and hit the recalculate button to see the scatter plot refresh and the GPU calculate a regression depth plot.
You may be particularly interested in the CSS style rule generation process. To use it just drag a style rule from style resources to style designer then drag appropriate targets and target properties. Target property values are set by selecting from the drop down option list below the style designer tree.
This illustrates LFM type data storage and Object Inspection as well as how we have pre-digested a simplified subset of HTML / SVG / GPU / CSS into drag and drop resource/instance tree format in order to minimise the instillation and learning curve for non specialist users. (This allows projects developed with this subset to run in FPC desktop mode as well as in Chrome with Pas2JS but still allows full access to the full set of HTML/CSS/SVG capability if this desktop mode is not required)
I suspect your target audience is professional developers. Using a tree based editor like ours could perhaps form an entry-level option for the full system you envisage?
Regards Steve
On Monday, 5 August 2019, 11:00:12 BST, <pas2js-request at lists.freepascal.org> wrote:
Send Pas2js mailing list submissions to
pas2js at lists.freepascal.org
To subscribe or unsubscribe via the World Wide Web, visit
https://lists.freepascal.org/cgi-bin/mailman/listinfo/pas2js
or, via email, send a message with subject or body 'help' to
pas2js-request at lists.freepascal.org
You can reach the person managing the list at
pas2js-owner at lists.freepascal.org
When replying, please edit your Subject line so it is more specific
than "Re: Contents of Pas2js digest..."
Today's Topics:
1. The way forward: Exit the VCL/LCL, enter the DOM
(Michael Van Canneyt)
2. Re: The way forward: Exit the VCL/LCL, enter the DOM (cbsistem)
3. Re: CrossMonkey: Build native desktop, mobile and web app
with same UI and same codebase (Renaud GHIA)
----------------------------------------------------------------------
Message: 1
Date: Mon, 5 Aug 2019 00:24:39 +0200 (CEST)
From: Michael Van Canneyt <michael at freepascal.org>
To: pas2js discussions <pas2js at lists.freepascal.org>
Subject: [Pas2js] The way forward: Exit the VCL/LCL, enter the DOM
Message-ID: <alpine.DEB.2.21.1908042348140.831 at home>
Content-Type: text/plain; format=flowed; charset=US-ASCII
Hello,
I have just committed some proof of concept that I have been working on
lately. Please bear with me for a long mail !
Current attempts at widget sets focus on getting the VCL/LCL in the browser.
I think this is good as a first step, and TMS Web Core has proved it is
possible to do great thigs. But it is limiting: it is desktop programming,
ported to the browser.
To boot, to see the actual result, you must start the program in the browser,
when it would be much better to see the application as rendered in the IDE:
True RAD and WYSIWYG.
The LCL and VCL miss out on a lot of things that are possible with HTML and
CSS.
I believe that we should instead embrace the DOM and CSS, and not stick
to mimicking a desktop concept started in the 90-ies. Get rid of Top,Left,
Width and Height. Use the power of CSS styles instead.
At the same time, current Web&Mobile programming IMHO is still missing some RAD
concepts that we love dearly. The 2-Way tools concepts introduced by Delphi and VB
are still not really available in Web. Definitely not for Pascal.
Therefor I created a start for what I think is the way forward.
There are 2 parts to this.
The first part is a widget set.
-------------------------------
In pas2js SVN, packages/webwidgets there is a very basic set of widgets.
It is just a start. But it lays the foundation of what I think should be the
road forward: combining RAD and HTML/CSS. It is a thin layer over HTML templates.
You can manipulate classes, Styles and the dataset functionality in HTML 5.
You have access to all events, and it will accept
procedure OnClick(var message); message 'onclick';
using the dispatch mechanism, just as for native applications !
Besides the basic widgets, it also shows how to do complex widgets.
It also shows that you can create unit-tested widget-sets: since they are
rendered in the browser, it is easy to widget test them.
(for example a TemplateWidget: pluck some html from internet, stick it in the Template
Tstrings oproperty, and it will be rendered)
This is web, so better look for yourself:
Demo at: https://www.freepascal.org/~michael/designdemo/designdemo.html
Zip at: https://www.freepascal.org/~michael/designdemo/designdemo.zip
It mimics a 'component palette' and a 'form'. You can click a button, and
click somewhere in the form, it will add the widget. You can reorder
widgets, reparent them etc. (JQuery UI Sortable is used for this).
The last but one button (looks like a 'target') is a "container": just a
div, which can be used for layouting.
The last button (with the Elephant) demonstrates the template widget:
it has the JumboTron (hence the elephant) sample demo of Bootstrap in it's
template. best drop first a container and in the container the jumbotron.
(it's style settings are such that it takes all place)
The demo is not yet perfect, it is a proof of concept.
All this is embryonal, I intend to further the development of the widgets,
as none of the other approaches I have seen will offer the same flexibility
as this approach. (I must say projJ from WarleyAlex comes closest, in fact !)
The second part is: RAD.
------------------------
How do we integrate this in the IDE ? Be it Lazarus or Delphi.
We could program a Javascript and HTML rendering engine and create a
component.
This is a lot of work, and fortunately not necessary: it exists.
We can embed the browser in the IDE !
Downside is: communication with the browser is asynchronous.
A way around this is needed. I created one possible solution.
So, the second demo is:
You can have the same demo as above, but as a desktop application:
See:
https://www.freepascal.org/~michael/designdemo/nativedesigner-win32.zip
https://www.freepascal.org/~michael/designdemo/nativedesigner-linux.zip
The browser used is Chromium on Windows (CEF4Delphi) and WebKit on linux.
(The latter can be found on https://github.com/sysrpl/Lazarus.WebBrowser)
Both work exactly the same.
Open the application on windows. You'll see the same toolbar with buttons,
but this is a native toolbar, not part of the browser.
(there is the same application for linux)
If you press the first 'go' button, a same page as the one above will be opened,
but in an embedded browser window. (you can see the pages in the directory
designdemo when unpacking).
But the buttons to add widgets will not be part of the webpage !
Instead, the webpage communicates with the native application.
You can click a button and add a widget in the 'page',
just as you do in the 100% webversion. (it's the same source, BTW)
The native application has a small internal webserver, which serves the
files, and which has a small REST server for IDE 'commands'. The browser
polls the server for commands (in a later stage we'd probably want
websockets for this).
The tab 'log' contains the log of communications of the webbrowser.
When you select an element in the browser, the browser will notify the
native application, and it sends the current properties of the widget to the
native application (so later on we can show it in an Object Inspector).
You can see the notification in the log.
If it creates a new widget, it also notifies the native application.
(it also appears in the log)
It looks like this:
----
Browser created widget of class TContainerWidget, name TContainerWidget10
Internal server request received: /IDE/Action/1/2
Browser selected widget of class TContainerWidget, name TContainerWidget10
Selected widget state:
object TContainerWidget10: TContainerWidget
ParentID = 'designpage'
ElementID = 'ww-21'
Classes = 'ui-sortable designerActive'
Styles = <
item
Name = 'min-width'
Value = '32px'
Priority = spNone
end
item
Name = 'min-height'
Value = '12px'
Priority = spNone
end
item
Name = 'width'
Value = '50%'
Priority = spNone
end
item
Name = 'height'
Value = '50%'
Priority = spNone
end>
StyleRefresh = srOnElementID
end
Internal server request received: /IDE/Command/1/
----
Everyone will recognize the DFM/LFM format :)
Now, if you close the application and restart it
(beware: it sometimes hangs, and you must kill it with the task manager,
I still need to look at that. something with the internal webserver :(),
Then you can press the second 'Go' button..
Then the application will load the same webpage in your system default browser.
It then shows/does the exact same thing, and communicates in the
exact same way, but it is now designing in the browser...
The idea is now to embed this in an IDE and couple this to the component
pallette and object inspector in the IDE. There are of course still
architectural decisions to be made, but this shows that such an approach
could work.
This is all just a proof of concept and embryonal but I honestly believe this is the way to go :)
All is of course available for you to check out and committed in pas2js SVN:
packages/webwidget
demo/webwidget
Enjoy, and comments, ideas - but mostly help - welcome !
Michael.
------------------------------
Message: 2
Date: Sun, 4 Aug 2019 19:33:27 -0700 (MST)
From: cbsistem <cbsistem at yahoo.com.br>
To: pas2js at lists.freepascal.org
Subject: Re: [Pas2js] The way forward: Exit the VCL/LCL, enter the DOM
Message-ID: <1564972407989-0.post at n8.nabble.com>
Content-Type: text/plain; charset=us-ascii
I believe in this proposal. see this already rendering inside the Lazarus /
Delphi IDE
https://youtu.be/uYR02jxLFAA
I will look at your project and see if I integrate with the IDE
Cristiano Barbosa
-----
Cristiano Barbosa
--
Sent from: http://pas2js.38893.n8.nabble.com/
------------------------------
Message: 3
Date: Sun, 4 Aug 2019 20:40:07 +0200
From: Renaud GHIA <rghia at tixeo.com>
To: Michael Van Canneyt <michael at freepascal.org>
Cc: pas2js at lists.freepascal.org
Subject: Re: [Pas2js] CrossMonkey: Build native desktop, mobile and
web app with same UI and same codebase
Message-ID:
<CACEVS0=ZognbohsiLNF6D=S3XFxWdKfAgHkndrskt0L1Wwvuaw at mail.gmail.com>
Content-Type: text/plain; charset="utf-8"
There is not the delphi html library. I cannot provide the sources due to
licencing.
Renaud
Le dim. 4 août 2019 à 09:03, Michael Van Canneyt <michael at freepascal.org> a
écrit :
>
>
> On Sat, 3 Aug 2019, Renaud GHIA wrote:
>
> > I just want to share this new project.
> >
> > https://gitlab.com/CrossMaker/CrossMonkey
> > <https://gitlab.com/CrossMaker/CrossMonkey>
> >
> > The goal is to be able create a native desktop, mobile application and
> web
> > application with the same user interface and code.
> >
> > For now, it's only in proof of concept state but it can be very easily
> > extended.
> >
> > Anyone interested can participate.
>
> There are a lot of sources missing, I think:
>
> htutils,
> hthints,
> htcanvas,
> htmlcomp,
> htmldraw,
> htsvg,
> htcanvaslazarus,
> htdefscriptadapter,
> htcanvasdx,
>
> To all: you need a gitlab account to access these sources. Original poster
> is not subscribed to the list, so put him in CC when replying.
>
> Michael.
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20190804/6f4fbcad/attachment-0001.html>
------------------------------
Subject: Digest Footer
_______________________________________________
Pas2js maillist - Pas2js at lists.freepascal.org
https://lists.freepascal.org/cgi-bin/mailman/listinfo/pas2js
------------------------------
End of Pas2js Digest, Vol 20, Issue 4
*************************************
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20190807/e9f06f7a/attachment-0001.html>
More information about the Pas2js
mailing list