I already did this with WebCore and FNC components in Visual Studio Code and it is working.
For my Delphi projects I managed to customize the WebCore components but I see am not clear how to customize the FNC components for Web.
Do I have to create the Core Source and the Component Library Source Packages?
OR
Do I have to go about and just create a custom FNC component (add properties, etc) without any web core source and will it work?
To better understand what you are trying to achieve, please explain what exact steps you take in Visual Studio Code?
The goal achieved in visual studio code is to add properties that I can modify at runtime and at design time, for the following components:
TwebEdit, TWebCheckbox, TWebMemo, TwebComboBox, TDateTimePicker, TTMSFNCedit, TTMSFNCCheckbox.
The properties are based on my intended use, like JDclientGroup, JDregexType and others.
The checkbox components also needed some procedures to prevent modification while keeping them enabled, because a property "read only " was not available in the original components.
The method as any new OP component is to create a unit, add the new component class based on an existing one, like TCheckBoxJD = class(TWebCheckBox), add private, protected, public and published properties, and have a register procedure for them to appear on the form designer.
This was done with the help of TMS team, including Bruno and You at some point, am sure.
In visual studio code, I placed all the components I needed in a single .pas file (meaning webcore and FNC), and it compiles and installs to WebCore. All my customized components work 100% at design time in VSC and at runtime in the resulting compiled code.
When I tried in Delphi, Bruno explained that there is the "Core Source" that Webcore will compile to javascript, and there is the "component library source". The pascal stub is for the delphi designer as I understood.
In the end, my WebCore custom components for delphi work quite well using the approach in the previous paragraph. I removed my FNC custom components because it didn't work with them in it.
Now the goal is to customize the FNC components I need , this time in Delphi.
Not sure what exactly your question is.
If you write FNC components, at design-time the VCL FNC component is used and at run-time the WEBLib. version of the FNC component. So, by writing for FNC, you automatically have with the VCL version the design-time code for TMS WEB Core too.
Well the question was (since I tried and didn't work) if I have to create the pair of "core source" and "component library source" when customizing an FNC component that I intend to use for web and desktop or if I only need to create a new class as I would do with any other regular Delphi component.
Not really, as I explained the VCL variant of the FNC control functions like the 'Core Source' version for use at design-time.
See the structure of the FNC source code now, where you have VCL.FNCUnit.pas, FMX.FNCUnit.pas and WEBLib.FNCUnit.pas
You will want at minimum to have the VCL.FNCUnit.pas and WEBLib.FNCUnit.pas and VCL.FNCUnit.pas will be used at design-time and WEBLib.FNCUnit.pas will be used to compile for runtime.
Am completely lost here. I didn't find the files you mention anywhere on my computer.
I managed to create the component with my new properties and it works for VCL.
It is on a folder /components/jdcomp/jdfnc/component Library Source.
It registers correctly into the delphi designer for desktop applications.
However, the moment I add anything starting with WebLib in the uses, the project does fails with "canvas does not allow drawing". It works again removing the weblib references.
Then I tried to create another package in /components/jdcomp/jdfnc/core source trying to replicate what I did with the webcore components, this time not referencing vcl but weblib in the uses. Same thing.
I realized that am doing guesswork. Is there a basic guide? ideally including any simple component like the FNCedit,to be used as a sample and see what files are required, which uses goes into each one? I searched everywhere in the documentation and there is nothing that I can use as a guideline to modify an FNC component like FNCedit and add simple properties, and have it appear in a desktop pallete and web pallete in the designer.
I have no idea what code you used that is causing the "Canvas does not allow drawing". I'm guessing you just invoke drawing code from an inappropriate place.
I suggest to always first test the control at runtime before setting it up to be used at design time.
Here is an example of an FNC based custom control that can be used in a TMS WEB Core application. At runtime, this same code can be used in a VCL application.
fnccalculator.zip (7.5 KB)
Thanks for the sample code. Will check it later.
As for the canvas error, here is the project and screenshot. It seems that adding weblib in the uses causes the problem I don't understand.
Hopefully with your sample code will have a better idea on how to structure the FNC component.
Thanks,
JD
component Library Source.zip (4.2 KB)
A couple of remarks:
- I'm not sure why you need to add both VCL.TMSFNCEdit and WebLib.TMSFNCEdit. Using VCL.TMSFNCEdit should be sufficient
- Your package has no dependency to TMSWEBCorePkgLibDXE14. This should be added
- You should add to the uses list WEBLib.Controls and with that the attribute [ComponentPlatforms(TMSWebPlatform)] for the TJDFNCEdit class. This is need to make the component visible on the tool palette when a TMS WEB Core form is open in the designer.
Great, thank you .
The plain truth of why I was adding the WebLib.TMSFNCEdit because I was guessing why the component didn't appear in the Web project palette.
I followed your tips and now it compiled and the component appears in the palette. For a normal VCL windows test application, the component is in the palette and the application compiles and runs.
For the WebCore test, I modified the app sent here before, my JDFNC component now does appear in the palette, so I added a regular FNC Edit and my JDFNC edit.
However, it does not compile, with the error "[Error] JDFNCEdit.pas(10): identifier not found "TMSWebPlatform" ".
Something is still missing. I tested some things in the uses clause, with no success.
Am attaching the test project and the component project, surely you can spot what is missing.
Thanks,
JDFNCcomponents.zip (4.2 KB)
editPasswordTest.zip (7.8 KB)
What you created is the designtime unit
The equivalent unit must exist in the path of the pas2js compiler (see how this is done with Component Library Source and Core Source folders for the framework itself)
(or you could put the attribute in a define $IFNDEF PAS2JS)
So, from what I understand, for FNC components in Delphi there must be also the separate design time (in Component Library Source) and the runtime (in Core Source) as in the regular components...
For my regular WebCore components I did that. For some reason I thought that FNC components did not need that separate code. Will try that next.
Thanks,
Well it finally worked on Desktop and Web. The same code can be used on Visual Studio Code on Mac and Windows, of course changing the VLC to WebLib in the uses clause. Sure it will work on Linux.
Am adding here the design time and runtime sources for delphi in case someone can use it or if you want to add it to the examples somewhere.
Thanks
JDFNCcomponents.zip (10.1 KB)
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.