<html><head></head><body><div class="ydpd47863yahoo-style-wrap" style="font-family: times new roman, new york, times, serif; font-size: 13px;"><div></div>
<div dir="ltr" data-setdir="false"><div><div>Hi Michael</div><div><br></div><div>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).</div><div><br></div><div>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.</div><div><br></div><div>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.</div><div><br></div><div dir="ltr" data-setdir="false">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)</div><div><br></div><div>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?</div><div><br></div><div>Regards Steve</div><div><br></div></div><br></div><div><br></div>
</div><div id="ydpf9ec7802yahoo_quoted_6159981486" class="ydpf9ec7802yahoo_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> 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>