<html><head></head><body><div class="ydpcfda9505yahoo-style-wrap" style="font-family: times new roman, new york, times, serif; font-size: 13px;"><div></div>
<div dir="ltr" data-setdir="false">In "<span style="color: rgb(38, 40, 42); font-family: Helvetica Neue, Helvetica, Arial, sans-serif;">The way forward: Exit the VCL/LCL, enter the DOM"</span><br></div><div dir="ltr" data-setdir="false"><span><span style="color: rgb(38, 40, 42); font-family: Helvetica Neue, Helvetica, Arial, sans-serif;">Michael </span></span>suggested using Chromium on Windows and WebKit on Linux.</div><div dir="ltr" data-setdir="false"><div><div dir="ltr" data-setdir="false"><br></div><div dir="ltr" data-setdir="false"><span><span style="color: rgb(0, 0, 0); font-family: times new roman, new york, times, serif;">This is not an area I am familiar with but </span></span>I see that the <span><span style="color: rgb(0, 0, 0); font-family: times new roman, new york, times, serif;">QT5 Web engine is Chromium based and wonder if it might be an option for Linux.</span></span></div><div dir="ltr" data-setdir="false">If so this might simplify keeping Linux and Windows versions in line?</div><div dir="ltr" data-setdir="false"><br></div><div dir="ltr" data-setdir="false"> Any thoughts?</div><div dir="ltr" data-setdir="false"><br></div><div dir="ltr" data-setdir="false">Regards Steve</div><div dir="ltr"><br style="font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"></div></div><br></div><div><br></div>
</div><div id="ydp7f7cc92byahoo_quoted_5608706642" class="ydp7f7cc92byahoo_quoted">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;color:#26282a;">
<div>
On Monday, 5 August 2019, 11:00:12 BST, pas2js-request@lists.freepascal.org <pas2js-request@lists.freepascal.org> wrote:
</div>
<div><br></div>
<div><br></div>
<div><div dir="ltr">Send Pas2js mailing list submissions to<br></div><div dir="ltr"> <a href="mailto:pas2js@lists.freepascal.org" rel="nofollow" target="_blank">pas2js@lists.freepascal.org</a><br></div><div dir="ltr"><br></div><div dir="ltr">To subscribe or unsubscribe via the World Wide Web, visit<br></div><div dir="ltr"> <a href="https://lists.freepascal.org/cgi-bin/mailman/listinfo/pas2js" rel="nofollow" target="_blank">https://lists.freepascal.org/cgi-bin/mailman/listinfo/pas2js</a><br></div><div dir="ltr">or, via email, send a message with subject or body 'help' to<br></div><div dir="ltr"> <a href="mailto:pas2js-request@lists.freepascal.org" rel="nofollow" target="_blank">pas2js-request@lists.freepascal.org</a><br></div><div dir="ltr"><br></div><div dir="ltr">You can reach the person managing the list at<br></div><div dir="ltr"> <a href="mailto:pas2js-owner@lists.freepascal.org" rel="nofollow" target="_blank">pas2js-owner@lists.freepascal.org</a><br></div><div dir="ltr"><br></div><div dir="ltr">When replying, please edit your Subject line so it is more specific<br></div><div dir="ltr">than "Re: Contents of Pas2js digest..."<br></div><div dir="ltr"><br></div><div dir="ltr"><br></div><div dir="ltr">Today's Topics:<br></div><div dir="ltr"><br></div><div dir="ltr"> 1. The way forward: Exit the VCL/LCL, enter the DOM<br></div><div dir="ltr"> (Michael Van Canneyt)<br></div><div dir="ltr"> 2. Re: The way forward: Exit the VCL/LCL, enter the DOM (cbsistem)<br></div><div dir="ltr"> 3. Re: CrossMonkey: Build native desktop, mobile and web app<br></div><div dir="ltr"> with same UI and same codebase (Renaud GHIA)<br></div><div dir="ltr"><br></div><div dir="ltr"><br></div><div dir="ltr">----------------------------------------------------------------------<br></div><div dir="ltr"><br></div><div dir="ltr">Message: 1<br></div><div dir="ltr">Date: Mon, 5 Aug 2019 00:24:39 +0200 (CEST)<br></div><div dir="ltr">From: Michael Van Canneyt <<a href="mailto:michael@freepascal.org" rel="nofollow" target="_blank">michael@freepascal.org</a>><br></div><div dir="ltr">To: pas2js discussions <<a href="mailto:pas2js@lists.freepascal.org" rel="nofollow" target="_blank">pas2js@lists.freepascal.org</a>><br></div><div dir="ltr">Subject: [Pas2js] The way forward: Exit the VCL/LCL, enter the DOM<br></div><div dir="ltr">Message-ID: <<a href="mailto:alpine.DEB.2.21.1908042348140.831@home" rel="nofollow" target="_blank">alpine.DEB.2.21.1908042348140.831@home</a>><br></div><div dir="ltr">Content-Type: text/plain; format=flowed; charset=US-ASCII<br></div><div dir="ltr"><br></div><div dir="ltr"><br></div><div dir="ltr">Hello,<br></div><div dir="ltr"><br></div><div dir="ltr">I have just committed some proof of concept that I have been working on<br></div><div dir="ltr">lately. Please bear with me for a long mail !<br></div><div dir="ltr"><br></div><div dir="ltr">Current attempts at widget sets focus on getting the VCL/LCL in the browser.<br></div><div dir="ltr">I think this is good as a first step, and TMS Web Core has proved it is<br></div><div dir="ltr">possible to do great thigs. But it is limiting: it is desktop programming,<br></div><div dir="ltr">ported to the browser.<br></div><div dir="ltr"><br></div><div dir="ltr">To boot, to see the actual result, you must start the program in the browser, <br></div><div dir="ltr">when it would be much better to see the application as rendered in the IDE:<br></div><div dir="ltr">True RAD and WYSIWYG.<br></div><div dir="ltr"><br></div><div dir="ltr">The LCL and VCL miss out on a lot of things that are possible with HTML and<br></div><div dir="ltr">CSS.<br></div><div dir="ltr"><br></div><div dir="ltr">I believe that we should instead embrace the DOM and CSS, and not stick<br></div><div dir="ltr">to mimicking a desktop concept started in the 90-ies. Get rid of Top,Left,<br></div><div dir="ltr">Width and Height. Use the power of CSS styles instead.<br></div><div dir="ltr"><br></div><div dir="ltr">At the same time, current Web&Mobile programming IMHO is still missing some RAD<br></div><div dir="ltr">concepts that we love dearly. The 2-Way tools concepts introduced by Delphi and VB<br></div><div dir="ltr">are still not really available in Web. Definitely not for Pascal.<br></div><div dir="ltr"><br></div><div dir="ltr">Therefor I created a start for what I think is the way forward.<br></div><div dir="ltr"><br></div><div dir="ltr">There are 2 parts to this.<br></div><div dir="ltr"><br></div><div dir="ltr">The first part is a widget set.<br></div><div dir="ltr">-------------------------------<br></div><div dir="ltr"><br></div><div dir="ltr">In pas2js SVN, packages/webwidgets there is a very basic set of widgets.<br></div><div dir="ltr">It is just a start. But it lays the foundation of what I think should be the<br></div><div dir="ltr">road forward: combining RAD and HTML/CSS. It is a thin layer over HTML templates.<br></div><div dir="ltr">You can manipulate classes, Styles and the dataset functionality in HTML 5.<br></div><div dir="ltr"><br></div><div dir="ltr">You have access to all events, and it will accept<br></div><div dir="ltr">procedure OnClick(var message); message 'onclick';<br></div><div dir="ltr">using the dispatch mechanism, just as for native applications !<br></div><div dir="ltr"><br></div><div dir="ltr">Besides the basic widgets, it also shows how to do complex widgets.<br></div><div dir="ltr">It also shows that you can create unit-tested widget-sets: since they are<br></div><div dir="ltr">rendered in the browser, it is easy to widget test them.<br></div><div dir="ltr"><br></div><div dir="ltr">(for example a TemplateWidget: pluck some html from internet, stick it in the Template<br></div><div dir="ltr">Tstrings oproperty, and it will be rendered)<br></div><div dir="ltr"><br></div><div dir="ltr">This is web, so better look for yourself:<br></div><div dir="ltr"><br></div><div dir="ltr">Demo at: <a href="https://www.freepascal.org/~michael/designdemo/designdemo.html" rel="nofollow" target="_blank">https://www.freepascal.org/~michael/designdemo/designdemo.html</a><br></div><div dir="ltr">Zip at: <a href="https://www.freepascal.org/~michael/designdemo/designdemo.zip" rel="nofollow" target="_blank">https://www.freepascal.org/~michael/designdemo/designdemo.zip</a><br></div><div dir="ltr"><br></div><div dir="ltr">It mimics a 'component palette' and a 'form'. You can click a button, and<br></div><div dir="ltr">click somewhere in the form, it will add the widget. You can reorder<br></div><div dir="ltr">widgets, reparent them etc. (JQuery UI Sortable is used for this).<br></div><div dir="ltr">The last but one button (looks like a 'target') is a "container": just a<br></div><div dir="ltr">div, which can be used for layouting.<br></div><div dir="ltr"><br></div><div dir="ltr">The last button (with the Elephant) demonstrates the template widget:<br></div><div dir="ltr">it has the JumboTron (hence the elephant) sample demo of Bootstrap in it's<br></div><div dir="ltr">template. best drop first a container and in the container the jumbotron.<br></div><div dir="ltr">(it's style settings are such that it takes all place)<br></div><div dir="ltr"><br></div><div dir="ltr">The demo is not yet perfect, it is a proof of concept.<br></div><div dir="ltr"><br></div><div dir="ltr">All this is embryonal, I intend to further the development of the widgets, <br></div><div dir="ltr">as none of the other approaches I have seen will offer the same flexibility <br></div><div dir="ltr">as this approach. (I must say projJ from WarleyAlex comes closest, in fact !)<br></div><div dir="ltr"><br></div><div dir="ltr">The second part is: RAD.<br></div><div dir="ltr">------------------------<br></div><div dir="ltr"><br></div><div dir="ltr">How do we integrate this in the IDE ? Be it Lazarus or Delphi.<br></div><div dir="ltr">We could program a Javascript and HTML rendering engine and create a<br></div><div dir="ltr">component.<br></div><div dir="ltr">This is a lot of work, and fortunately not necessary: it exists.<br></div><div dir="ltr">We can embed the browser in the IDE !<br></div><div dir="ltr"><br></div><div dir="ltr">Downside is: communication with the browser is asynchronous.<br></div><div dir="ltr">A way around this is needed. I created one possible solution.<br></div><div dir="ltr"><br></div><div dir="ltr">So, the second demo is: <br></div><div dir="ltr">You can have the same demo as above, but as a desktop application:<br></div><div dir="ltr"><br></div><div dir="ltr">See:<br></div><div dir="ltr"><a href="https://www.freepascal.org/~michael/designdemo/nativedesigner-win32.zip" rel="nofollow" target="_blank">https://www.freepascal.org/~michael/designdemo/nativedesigner-win32.zip</a><br></div><div dir="ltr"><a href="https://www.freepascal.org/~michael/designdemo/nativedesigner-linux.zip" rel="nofollow" target="_blank">https://www.freepascal.org/~michael/designdemo/nativedesigner-linux.zip</a><br></div><div dir="ltr"><br></div><div dir="ltr">The browser used is Chromium on Windows (CEF4Delphi) and WebKit on linux.<br></div><div dir="ltr">(The latter can be found on <a href="https://github.com/sysrpl/Lazarus.WebBrowser" rel="nofollow" target="_blank">https://github.com/sysrpl/Lazarus.WebBrowser</a>)<br></div><div dir="ltr"><br></div><div dir="ltr">Both work exactly the same.<br></div><div dir="ltr"><br></div><div dir="ltr">Open the application on windows. You'll see the same toolbar with buttons,<br></div><div dir="ltr">but this is a native toolbar, not part of the browser.<br></div><div dir="ltr">(there is the same application for linux)<br></div><div dir="ltr"><br></div><div dir="ltr">If you press the first 'go' button, a same page as the one above will be opened,<br></div><div dir="ltr">but in an embedded browser window. (you can see the pages in the directory<br></div><div dir="ltr">designdemo when unpacking).<br></div><div dir="ltr"><br></div><div dir="ltr">But the buttons to add widgets will not be part of the webpage !<br></div><div dir="ltr">Instead, the webpage communicates with the native application. <br></div><div dir="ltr">You can click a button and add a widget in the 'page', <br></div><div dir="ltr">just as you do in the 100% webversion. (it's the same source, BTW)<br></div><div dir="ltr"><br></div><div dir="ltr">The native application has a small internal webserver, which serves the<br></div><div dir="ltr">files, and which has a small REST server for IDE 'commands'. The browser<br></div><div dir="ltr">polls the server for commands (in a later stage we'd probably want<br></div><div dir="ltr">websockets for this).<br></div><div dir="ltr"><br></div><div dir="ltr">The tab 'log' contains the log of communications of the webbrowser.<br></div><div dir="ltr">When you select an element in the browser, the browser will notify the<br></div><div dir="ltr">native application, and it sends the current properties of the widget to the<br></div><div dir="ltr">native application (so later on we can show it in an Object Inspector).<br></div><div dir="ltr">You can see the notification in the log.<br></div><div dir="ltr"><br></div><div dir="ltr">If it creates a new widget, it also notifies the native application.<br></div><div dir="ltr">(it also appears in the log)<br></div><div dir="ltr"><br></div><div dir="ltr">It looks like this:<br></div><div dir="ltr">---- <br></div><div dir="ltr">Browser created widget of class TContainerWidget, name TContainerWidget10<br></div><div dir="ltr">Internal server request received: /IDE/Action/1/2<br></div><div dir="ltr">Browser selected widget of class TContainerWidget, name TContainerWidget10<br></div><div dir="ltr">Selected widget state: <br></div><div dir="ltr">object TContainerWidget10: TContainerWidget<br></div><div dir="ltr"> ParentID = 'designpage'<br></div><div dir="ltr"> ElementID = 'ww-21'<br></div><div dir="ltr"> Classes = 'ui-sortable designerActive'<br></div><div dir="ltr"> Styles = <<br></div><div dir="ltr"> item<br></div><div dir="ltr"> Name = 'min-width'<br></div><div dir="ltr"> Value = '32px'<br></div><div dir="ltr"> Priority = spNone<br></div><div dir="ltr"> end<br></div><div dir="ltr"> item<br></div><div dir="ltr"> Name = 'min-height'<br></div><div dir="ltr"> Value = '12px'<br></div><div dir="ltr"> Priority = spNone<br></div><div dir="ltr"> end<br></div><div dir="ltr"> item<br></div><div dir="ltr"> Name = 'width'<br></div><div dir="ltr"> Value = '50%'<br></div><div dir="ltr"> Priority = spNone<br></div><div dir="ltr"> end<br></div><div dir="ltr"> item<br></div><div dir="ltr"> Name = 'height'<br></div><div dir="ltr"> Value = '50%'<br></div><div dir="ltr"> Priority = spNone<br></div><div dir="ltr"> end><br></div><div dir="ltr"> StyleRefresh = srOnElementID<br></div><div dir="ltr">end<br></div><div dir="ltr">Internal server request received: /IDE/Command/1/<br></div><div dir="ltr">----<br></div><div dir="ltr"><br></div><div dir="ltr">Everyone will recognize the DFM/LFM format :)<br></div><div dir="ltr"><br></div><div dir="ltr">Now, if you close the application and restart it<br></div><div dir="ltr">(beware: it sometimes hangs, and you must kill it with the task manager, <br></div><div dir="ltr">I still need to look at that. something with the internal webserver :(), <br></div><div dir="ltr">Then you can press the second 'Go' button..<br></div><div dir="ltr"><br></div><div dir="ltr">Then the application will load the same webpage in your system default browser. <br></div><div dir="ltr">It then shows/does the exact same thing, and communicates in the<br></div><div dir="ltr">exact same way, but it is now designing in the browser...<br></div><div dir="ltr"><br></div><div dir="ltr">The idea is now to embed this in an IDE and couple this to the component<br></div><div dir="ltr">pallette and object inspector in the IDE. There are of course still<br></div><div dir="ltr">architectural decisions to be made, but this shows that such an approach<br></div><div dir="ltr">could work.<br></div><div dir="ltr"><br></div><div dir="ltr">This is all just a proof of concept and embryonal but I honestly believe this is the way to go :)<br></div><div dir="ltr"><br></div><div dir="ltr">All is of course available for you to check out and committed in pas2js SVN:<br></div><div dir="ltr"><br></div><div dir="ltr">packages/webwidget<br></div><div dir="ltr">demo/webwidget<br></div><div dir="ltr"><br></div><div dir="ltr">Enjoy, and comments, ideas - but mostly help - welcome !<br></div><div dir="ltr"><br></div><div dir="ltr">Michael.<br></div><div dir="ltr"><br></div><div dir="ltr"><br></div><div dir="ltr">------------------------------<br></div><div dir="ltr"><br></div><div dir="ltr">Message: 2<br></div><div dir="ltr">Date: Sun, 4 Aug 2019 19:33:27 -0700 (MST)<br></div><div dir="ltr">From: cbsistem <<a href="mailto:cbsistem@yahoo.com.br" rel="nofollow" target="_blank">cbsistem@yahoo.com.br</a>><br></div><div dir="ltr">To: <a href="mailto:pas2js@lists.freepascal.org" rel="nofollow" target="_blank">pas2js@lists.freepascal.org</a><br></div><div dir="ltr">Subject: Re: [Pas2js] The way forward: Exit the VCL/LCL, enter the DOM<br></div><div dir="ltr">Message-ID: <<a href="mailto:1564972407989-0.post@n8.nabble.com" rel="nofollow" target="_blank">1564972407989-0.post@n8.nabble.com</a>><br></div><div dir="ltr">Content-Type: text/plain; charset=us-ascii<br></div><div dir="ltr"><br></div><div dir="ltr">I believe in this proposal. see this already rendering inside the Lazarus /<br></div><div dir="ltr">Delphi IDE <br></div><div dir="ltr"><br></div><div dir="ltr"><a href="https://youtu.be/uYR02jxLFAA" rel="nofollow" target="_blank">https://youtu.be/uYR02jxLFAA</a><br></div><div dir="ltr"><br></div><div dir="ltr">I will look at your project and see if I integrate with the IDE<br></div><div dir="ltr"><br></div><div dir="ltr"><br></div><div dir="ltr">Cristiano Barbosa<br></div><div dir="ltr"><br></div><div dir="ltr"><br></div><div dir="ltr"><br></div><div dir="ltr">-----<br></div><div dir="ltr">Cristiano Barbosa<br></div><div dir="ltr">--<br></div><div dir="ltr">Sent from: <a href="http://pas2js.38893.n8.nabble.com/" rel="nofollow" target="_blank">http://pas2js.38893.n8.nabble.com/</a><br></div><div dir="ltr"><br></div><div dir="ltr"><br></div><div dir="ltr">------------------------------<br></div><div dir="ltr"><br></div><div dir="ltr">Message: 3<br></div><div dir="ltr">Date: Sun, 4 Aug 2019 20:40:07 +0200<br></div><div dir="ltr">From: Renaud GHIA <<a href="mailto:rghia@tixeo.com" rel="nofollow" target="_blank">rghia@tixeo.com</a>><br></div><div dir="ltr">To: Michael Van Canneyt <<a href="mailto:michael@freepascal.org" rel="nofollow" target="_blank">michael@freepascal.org</a>><br></div><div dir="ltr">Cc: <a href="mailto:pas2js@lists.freepascal.org" rel="nofollow" target="_blank">pas2js@lists.freepascal.org</a><br></div><div dir="ltr">Subject: Re: [Pas2js] CrossMonkey: Build native desktop, mobile and<br></div><div dir="ltr"> web app with same UI and same codebase<br></div><div dir="ltr">Message-ID:<br></div><div dir="ltr"> <CACEVS0=ZognbohsiLNF6D=<a href="mailto:S3XFxWdKfAgHkndrskt0L1Wwvuaw@mail.gmail.com" rel="nofollow" target="_blank">S3XFxWdKfAgHkndrskt0L1Wwvuaw@mail.gmail.com</a>><br></div><div dir="ltr">Content-Type: text/plain; charset="utf-8"<br></div><div dir="ltr"><br></div><div dir="ltr">There is not the delphi html library. I cannot provide the sources due to<br></div><div dir="ltr">licencing.<br></div><div dir="ltr"><br></div><div dir="ltr">Renaud<br></div><div dir="ltr"><br></div><div dir="ltr">Le dim. 4 août 2019 à 09:03, Michael Van Canneyt <<a href="mailto:michael@freepascal.org" rel="nofollow" target="_blank">michael@freepascal.org</a>> a<br></div><div dir="ltr">écrit :<br></div><div dir="ltr"><br></div><div dir="ltr">><br></div><div dir="ltr">><br></div><div dir="ltr">> On Sat, 3 Aug 2019, Renaud GHIA wrote:<br></div><div dir="ltr">><br></div><div dir="ltr">> > I just want to share this new project.<br></div><div dir="ltr">> ><br></div><div dir="ltr">> > <a href="https://gitlab.com/CrossMaker/CrossMonkey" rel="nofollow" target="_blank">https://gitlab.com/CrossMaker/CrossMonkey</a><br></div><div dir="ltr">> > <<a href="https://gitlab.com/CrossMaker/CrossMonkey" rel="nofollow" target="_blank">https://gitlab.com/CrossMaker/CrossMonkey</a>><br></div><div dir="ltr">> ><br></div><div dir="ltr">> > The goal is to be able create a native desktop, mobile application and<br></div><div dir="ltr">> web<br></div><div dir="ltr">> > application with the same user interface and code.<br></div><div dir="ltr">> ><br></div><div dir="ltr">> > For now, it's only in proof of concept state but it can be very easily<br></div><div dir="ltr">> > extended.<br></div><div dir="ltr">> ><br></div><div dir="ltr">> > Anyone interested can participate.<br></div><div dir="ltr">><br></div><div dir="ltr">> There are a lot of sources missing, I think:<br></div><div dir="ltr">><br></div><div dir="ltr">> htutils,<br></div><div dir="ltr">> hthints,<br></div><div dir="ltr">> htcanvas,<br></div><div dir="ltr">> htmlcomp,<br></div><div dir="ltr">> htmldraw,<br></div><div dir="ltr">> htsvg,<br></div><div dir="ltr">> htcanvaslazarus,<br></div><div dir="ltr">> htdefscriptadapter,<br></div><div dir="ltr">> htcanvasdx,<br></div><div dir="ltr">><br></div><div dir="ltr">> To all: you need a gitlab account to access these sources. Original poster<br></div><div dir="ltr">> is not subscribed to the list, so put him in CC when replying.<br></div><div dir="ltr">><br></div><div dir="ltr">> Michael.<br></div><div dir="ltr">><br></div><div dir="ltr">-------------- next part --------------<br></div><div dir="ltr">An HTML attachment was scrubbed...<br></div><div dir="ltr">URL: <<a href="http://lists.freepascal.org/pipermail/pas2js/attachments/20190804/6f4fbcad/attachment-0001.html" rel="nofollow" target="_blank">http://lists.freepascal.org/pipermail/pas2js/attachments/20190804/6f4fbcad/attachment-0001.html</a>><br></div><div dir="ltr"><br></div><div dir="ltr">------------------------------<br></div><div dir="ltr"><br></div><div dir="ltr">Subject: Digest Footer<br></div><div dir="ltr"><br></div><div dir="ltr">_______________________________________________<br></div><div dir="ltr">Pas2js maillist - <a href="mailto:Pas2js@lists.freepascal.org" rel="nofollow" target="_blank">Pas2js@lists.freepascal.org</a><br></div><div dir="ltr"><a href="https://lists.freepascal.org/cgi-bin/mailman/listinfo/pas2js" rel="nofollow" target="_blank">https://lists.freepascal.org/cgi-bin/mailman/listinfo/pas2js</a><br></div><div dir="ltr"><br></div><div dir="ltr"><br></div><div dir="ltr">------------------------------<br></div><div dir="ltr"><br></div><div dir="ltr">End of Pas2js Digest, Vol 20, Issue 4<br></div><div dir="ltr">*************************************<br></div></div>
</div>
</div></body></html>