From michael at freepascal.org Sat May 21 22:45:49 2022 From: michael at freepascal.org (Michael Van Canneyt) Date: Sat, 21 May 2022 22:45:49 +0200 (CEST) Subject: [Pas2js] Design-time features for pas2js Message-ID: 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. From pascaldragon at googlemail.com Tue May 24 07:24:48 2022 From: pascaldragon at googlemail.com (Sven Barth) Date: Tue, 24 May 2022 07:24:48 +0200 Subject: [Pas2js] Design-time features for pas2js In-Reply-To: References: Message-ID: Am 21.05.2022 um 22:45 schrieb Michael Van Canneyt: > I've committed initial design-time support for pas2js. Great work, will have to play around with this a bit when I find the time (ha, good one... -.-). > I've created some 10+ demos that show how to work with this: > > https://www.freepascal.org/~michael/pas2js-demos/design/ Are you aware that the country examples display some entries with "?" replacement characters? E.g. "?land Islands (AX)", "C?te d'Ivoire (CI)" or "Cura?ao (CW)"? At least on Windows with Firefox 100. Regards, Sven From michael at freepascal.org Tue May 24 07:27:10 2022 From: michael at freepascal.org (Michael Van Canneyt) Date: Tue, 24 May 2022 07:27:10 +0200 (CEST) Subject: [Pas2js] Design-time features for pas2js In-Reply-To: References: Message-ID: On Tue, 24 May 2022, Sven Barth via Pas2js wrote: > Am 21.05.2022 um 22:45 schrieb Michael Van Canneyt: >> I've committed initial design-time support for pas2js. > > Great work, will have to play around with this a bit when I find the > time (ha, good one... -.-). > >> I've created some 10+ demos that show how to work with this: >> >> https://www.freepascal.org/~michael/pas2js-demos/design/ > > Are you aware that the country examples display some entries with "?" > replacement characters? E.g. "?land Islands (AX)", "C?te d'Ivoire (CI)" > or "Cura?ao (CW)"? At least on Windows with Firefox 100. No, I was not aware. I will check this. Probably a code page issue. Thanks for pointing it out ! Michael. From mr.highball at hotmail.com Tue May 24 16:05:14 2022 From: mr.highball at hotmail.com (mister highball) Date: Tue, 24 May 2022 14:05:14 +0000 Subject: [Pas2js] Pas2js Digest, Vol 47, Issue 2 In-Reply-To: References: Message-ID: Great work ? I this will tie a lot of things together for web development -------------- next part -------------- An HTML attachment was scrubbed... URL: From emin.borbor at gmail.com Thu May 26 16:06:12 2022 From: emin.borbor at gmail.com (Emin Borbor) Date: Thu, 26 May 2022 17:06:12 +0300 Subject: [Pas2js] uncaught EAccessViolation during compiling typescript converted unit Message-ID: Hi, I converted a Typescript definition using the latest dts2pas from trunk. When I try to compile the generated unit I get the following message bug: uncaught EAccessViolation: Access violation EAccessViolation: Access violation Compilation aborted Since it is a relatively large interface, I don't know how to debug the Pas2js compiler itself to find what is wrong. I would appreciate any advice. This is the converted unit from tabulator-tables/index.d.ts: https://www.dropbox.com/s/ydbiiy5ni17ilkr/libtabulatorjs.pas?dl=1 -------------- next part -------------- An HTML attachment was scrubbed... URL: From michael at freepascal.org Fri May 27 10:08:02 2022 From: michael at freepascal.org (Michael Van Canneyt) Date: Fri, 27 May 2022 10:08:02 +0200 (CEST) Subject: [Pas2js] uncaught EAccessViolation during compiling typescript converted unit In-Reply-To: References: Message-ID: On Thu, 26 May 2022, Emin Borbor wrote: > Hi, > I converted a Typescript definition using the latest dts2pas from trunk. > When I try to compile the generated unit I get the following message > > bug: uncaught EAccessViolation: Access violation > EAccessViolation: Access violation > Compilation aborted > > Since it is a relatively large interface, I don't know how to debug the > Pas2js compiler itself to find what is wrong. I would appreciate any advice. > > This is the converted unit from tabulator-tables/index.d.ts: > > https://www.dropbox.com/s/ydbiiy5ni17ilkr/libtabulatorjs.pas?dl=1 > The problem is this: TTabulator_download = Procedure (downloadType : jsvalue; fileName : string; params : TTabulator.TDownloadOptions; filter : TTabulator.TRowRangeLookup); At this point, TTabulator is not yet defined fully and pas2js seems not to handle this case correctly, it should give an 'identifier not found' error. If you debug it, you indeed see that the crash happens in the resolver. The solution is 2-fold: - Move the definitions of the local types TDownloadOptions etc. forward - Remove the TTabulator. in front of the type names. Unfortunately, Typescript still allows so much variation in the declarations that dts2pas cannot always generate a correct pascal declaration. Michael. From nc-gaertnma at netcologne.de Fri May 27 11:46:02 2022 From: nc-gaertnma at netcologne.de (Mattias Gaertner) Date: Fri, 27 May 2022 11:46:02 +0200 Subject: [Pas2js] uncaught EAccessViolation during compiling typescript converted unit In-Reply-To: References: Message-ID: <20220527114602.571ac7b8@limapholos> On Fri, 27 May 2022 10:08:02 +0200 (CEST) Michael Van Canneyt wrote: >[...] > The problem is this: > > TTabulator_download = Procedure (downloadType : jsvalue; fileName : > string; params : TTabulator.TDownloadOptions; filter : > TTabulator.TRowRangeLookup); > > At this point, TTabulator is not yet defined fully and pas2js seems > not to handle this case correctly, it should give an 'identifier not > found' error. Fixed. Mattias