Guide (request) to create new component for WebCore Delphi (and have it in the pallette)

WEB TMS WEB Core
1

I manage to add some properties to some components successfully in Visual Studio Code, so I have now my own version of WebEdit, WebLabel, and others. Also added properties to some FNC components like checkbox and others. These modified components appear in the VSC Form Designer component palette and work as expected, drag and drop to a form.
It was a straightforward process and since everything is WebLib (meaning nothing is VCL) in VSC, I have no doubt of what to do if I need to port another in VSC.

Now I want to do the same in Delphi 11.2. I have tried a number of things and failed but I realized that I need some sort of guide to have the steps done correctly.
For starters, why is there a "core source" and "component library source" folders in the components like QRcode for VSC, and how do I determine the right structures, includes, Etc. for my modified components to appear in the Delphi palette and load, work correctly?

I can add properties at runtime, but I need them in the palette for dragging and dropping in a form.

I guess there should be a guide somewhere, or a working example of a single component with new properties to appear in the palette. Any help is well received.

Have Delphi Alexandria 11.2 and soon upgrading to 11.3.

2

I'm sure someone from TMS will be along shortly, but in the interim, a couple of tidbits for you.

  • The "component library source" content is used by the Delphi IDE to help with code completion and that kind of thing. The "core source" content is used when the code is actually compiled (transpiled) into a final JavaScript file. There are therefore lots of method definitions that are empty if they are not needed by one of those environments, so don't be alarmed if you go looking :smile:

  • Creating components in the Delphi IDE generally needs to follow Delphi conventions as it is not at all the same as VSC. I'm not an expert at either one by any means, but here's a blog post showing how to do it on the Delphi side.

3

As a starter:

In Delphi, there is a need for a design-time stub component used from the Delphi IDE form designer and the runtime component. The design-time stub components are in the "Component Library Source" folder while the runtime component source code is in the "Core Source" folder.
In VSC, the designer is a webview, hence, runtime & designtime code are the same. You should be able to use the same code in Core Source folder as you used in VSC and what you need to do is add the design-time stub class in Component Library Source and register it with the IDE.

4

Thank you Bruno. Will read it to continue this development.

5

Thanks Andrew. For delphi VCL components I don't have questions, but since WebCore is a different kind of project am sure there are some rules to follow. And FNC are one and the other at the same time (like the movie)

6

Keep in mind that a TMS WEB Core project in Delphi is very similar to a VCL project in Delphi. Instead of a VCL TForm, we have a TWebForm. And components in the component palette can't of course be used interchangeably between the two - separate components are needed (as is done with FNC). To create and register a component in the Delphi IDE, and to also have custom properties and events in the Delphi Object Inspector when you drop such a component on the form, thus requires very similar steps, whether it is a VCL component or a TMS WEB Core component.

Bruno's links have some great examples of how to do this. My link was for how to do this to create a new TMS WEB Core component that was a wrapper for a JavaScript FlatPickr datetime control. Lots of material for you!

7

Sure, thanks Andrew. Will study the materials.

8

Here again, reporting that I checked out the reference materials provided and I managed to port my WebCore and FNC from Visual Studio Core to Delphi 11.2.
With the WebCore components it was a breeze. With the FNC ones, however, it was a bit tricky to find which units to add in Uses on the component unit and Requires on the package.
In any case, it was possible with a bit of understanding that the design part is separate from the Web Core runtime part.
I have been adding properties to delphi components since Delphi1 (For windows 3.1, way back in 95) but this design and runtime separation with Web Core was a new thing to digest. Haven't put too much attention to it until now.

I still have to use VSC for working my Mac-Only projects, but the experience gained is valuable.

Thanks!

2 Likes