In November 2016, I created a presentation for Embarcadero CodeRage about creating FNC custom controls. You can find this presentation including its source code here:
https://community.embarcadero.com/blogs/entry/developing-user-interface-controls-for-both-vcl-and-fmx-with-bruno-fierens
Unless you have been living under a rock the past 2 weeks, you have most certainly seen we have recently introduced the technology preview of TMS WEB Core and with that also the news that the TMS FNC framework is now also web-enabled. So, I thought it was a good moment to revisit this November 2016 CodeRage presentation and see how applicable it still is for creating custom TMS FNC UI controls, but this time for using this in the web!
The good news is that this took me less than 10 minutes to get the original custom TMS FNC UI control I created for VCL, FMX and LCL now also working for the web.
So, what did I have to do?
I started from the unit VCL.TMSFNCFancyTrackbar that contained the source code for the VCL variant of the FNC Fancy trackbar control. I renamed this file VCL.TMSFNCFancyTrackbar to WEBLib.TMSFNCFancyTrackBar.pas as WEBLIB is the prefix for the namespace for the web variant of the FNC controls. Further, for this small test, I manually renamed the unit references in the uses list in WEBLib.TMSFNCFancyTrackBar.pas.
VCL.Controls, VCL.TMSFNCCustomControl, VCL.TMSFNCGraphics, VCL.TMSFNCTypes, VCL.TMSFNCGraphicsTypes;
to
WEBLib.Controls, WEBLib.TMSFNCCustomControl, WEBLib.TMSFNCGraphics, WEBLib.TMSFNCTypes, WEBLib.TMSFNCGraphicsTypes;
I did not touch any other part of the code. Next, I copied the code to instantiate this custom control TTMSFNCFancyTrackBar from the test project to the TMS WEB Core test project:
begin
tb := TTMSFNCFancyTrackBar.Create(Self);
tb.Parent := Self;
tb.Width := 600;
tb.Height := 200;
tb.Slider.LoadFromFile('slider.png');
tb.Thumb.LoadFromFile('thumb.png');
end;
As I knew my app was going to need a PNG file for the trackbar background and the trackbar thumb, I copied the PNG files to the folder where the web application is deployed and from where its files are being served to the browser. 5 minutes later, the web application was running and resulted in:
So, a kind of half working trackbar. The tickmarks are displayed and the position value as well but my trackbar background and trackbar thumb were missing.
Then it dawned on me that the most likely reason of the issue was that my custom control didn’t have OnChange handlers for the TTMSFNCBitmap classes that were used as class properties to hold the trackbar background and thumb. When using the code in a native client application, the loading of the images from file is instant and thus, when the native app starts, the images are loaded and being used immediately to paint the control. So, I had never noticed this before.
In the web this is different. Under the hood, we have implemented TMSFNCBitmap.LoadFromFile() via asynchronous loading of the image file via an XMLHttpRequest() object. This means there is no instant synchronous loading and therefore it means that I need to signal the custom control to refresh itself when the images are loaded. This is achieved by assigning an event handler to the TTMSFNCBitmap.OnChange event and from there, Invalidate the control.
TTMSFNCFancyTrackBar = class(TTMSFNCCustomControl)
…
protected
procedure ImageChanged(Sender: TObject);
…
end;
procedure TTMSFNCFancyTrackBar.ImageChanged(Sender: TObject);
begin
Invalidate;
end;
constructor TTMSFNCFancyTrackBar.Create(AOwner: TComponent);
begin
inherited;
FThumb := TTMSFNCBitmap.Create;
FSlider := TTMSFNCBitmap.Create;
FThumb.OnChange := ImageChanged;
FSlider.OnChange := ImageChanged;
…
end;
With this inplace, the TTMSFNCFancyTrackbar custom control looks 100% identical to the native versions created earlier for VCL, FMX and LCL applications:
and yes, also the interaction with keyboard and mouse work fine.
If you already embarked on creating custom FNC controls, this means there is excellent news. With little or no effort, you will be able to use these custom FNC UI controls also in your web applications created with TMS WEB Core!
The full source code of the web version of the TTMSFNCFancyTrackbar can be downloaded here but you can as well easily play with it directly from your browser in this demo app: http://www.tmssoftware.biz/tmsweb/demos/tmsweb_customcontrol/
Well, this is just one approach for creating custom UI controls for TMS WEB Core. This approach offers you to create controls pretty much with the same UI control model as you could from Delphi 1. In another upcoming blog article, we’ll present an entirely different way for creating custom UI controls where the control will be fully built-up from HTML elements!
Get started today: Technical previews of TMS WEB Core, TMS FNC UI web-enabled controls, web-enabled TMS XData, the first parts under the TMS RADical WEB umbrella are exclusively available now for all active TMS-ALL-ACCESS customers.
