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;

  WEBLib.Controls,
  WEBLib.TMSFNCCustomControl,
  WEBLib.TMSFNCGraphics,
  WEBLib.TMSFNCTypes,
  WEBLib.TMSFNCGraphicsTypes;

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;

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;