Introducing FNC and TTMSFNCChart

As we have been developing UI VCL framework components since 1995 and FireMonkey framework components since 2011, we have recently been doing extensive research on approaches to create visual UI components that would simultanously support the VCL framework and the FireMonkey framework. As a result of this research, we came to the conclusion that the approach for VCL and FMX can also be easily applied to LCL, the component framework that comes with Lazarus.

Doing so offers a number of advantages both for users of the components and the developers of the components. With respect to using the components, the user can seemingly exchange code between a VCL project and an FMX project as the interface and class name of the component is 100% identical. When porting from VCL to FMX or vice versa all code can be shared as-is. Just like you'd write the code in VCL Edit.Text := 'Hello world', you can in exactly the same way do this with a FireMonkey TEdit or LCL TEdit. As with the result of this approach, the UI components also become usable with the LCL framework in Lazarus, this means that writing Pascal based GUI apps with these components also becomes possible for additional operating systems supported by Lazarus/FPC, i.e. Linux and its variants like Raspbian. Also for the development of the components, there are a number of advantages. With a sufficiently abstract layer in place, the component developer can focus on the component UI look & feel and behavior rather than with the particuliarities of each underlying framework. Support and maintance for highly complex components means managing a single code base as opposed to maintaining 3 code bases. This leads to faster development and support and ultimately to more stable code accross 3 frameworks.

For the result achieved, we came up with the name FNC components, which stands for Framework Neutral Components. As a proof of concept, we have now released our first FNC component TTMSFNCChart that supports a mind boggling array of frameworks and operating systems: VCL Win32/Win64 from Windows XP to Windows 10, FMX Win32/Win64, MacOS-X, iOS, Android, LCL Win32/Win64, Mac OS-X, iOS, Android, numerous Linux variants including Raspbian. Oh, and there is an extra benefit, the component is not only usable from Delphi or FreePascal but also from C++Builder. The feature set of the TTMSFNCChart is more or less identical to our FMX chart that includes line,bar, XY-line, XY-scatter, area, stacked bar, stacked area, digital line, pie, spider and donut charts with highly customizable legends, X-axis, Y-axis etc...

You can see the TTMSFNCChart initialized with 100% identical code on a couple of operating systems:

var
  i,j: integer;
  rng: array[0..2] of integer;
const
  val: array[1..12] of integer = (15,23,10,5,3,14,33,11,8,19,9,22);
begin
  Caption := 'TMS FNC Chart Demo';

  TMSFNCChart1.Width := 600;
  TMSFNCChart1.Height := 500;

  TMSFNCChart1.BeginUpdate;

  TMSFNCChart1.Title.Text := 'TMS FNC Chart : sales/month';
  TMSFNCChart1.Title.Font.Name := 'Helvetica';
  TMSFNCChart1.Title.Font.Style := [TFontStyle.fsBold];
  TMSFNCChart1.Title.Font.Size := 14;
  TMSFNCChart1.Title.Font.Color := gcBlue;

  TMSFNCChart1.Series[0].ChartType := ctLine;
  TMSFNCChart1.Series[1].ChartType := ctArea;
  TMSFNCChart1.Series[2].ChartType := ctBar;

  for j := 0 to 2 do
  begin
    TMSFNCChart1.Series[j].Points.Clear;
    TMSFNCChart1.Series[j].AutoXRange := arCommon;
    TMSFNCChart1.Series[j].Mode := smStatistical;
    TMSFNCChart1.Series[j].XValues.Angle := -90;
    TMSFNCChart1.Series[j].XValues.Title.Text := 'Months';
    TMSFNCChart1.Series[j].YValues.Title.Text := 'Units';
  end;

  TMSFNCChart1.Legend.Font.Size := 14;
  TMSFNCChart1.Series[0].LegendText := 'Retail';
  TMSFNCChart1.Series[1].LegendText := 'Consumer';
  TMSFNCChart1.Series[2].LegendText := 'B2B';
  TMSFNCChart1.Series[0].Markers.Shape := msSquare;
  TMSFNCChart1.Series[2].Markers.Visible := false;

  rng[0] := 70;
  rng[1] := 10;
  rng[2] := 40;

  for i := 1 to 12 do
    for j := 0 to 2 do
    begin
      TMSFNCChart1.Series[j].AddPoint(rng[j]+val[i], FormatSettings.LongMonthNames[i]);
    end;

  TMSFNCChart1.EndUpdate;
end;

The only difference in the project are references to units. For VCL, the unit namespaces are VCL.TMSFNC*, for FMX it is FMX.TMSFNC* and for LCL it is LCLTMSFNC* (as sadly FreePascal doesn't support a dot in the unit names)

Below are a number of screenshots of the chart running in a myriad of operating systems with exactly the same code:


TTMSFNCChart on iOS with FMX framework



TTMSFNCChart on Mac OS-X with FMX framework



TTMSFNCChart on Raspbian with LCL framework



TTMSFNCChart on Ubuntu with LCL framework



TTMSFNCChart on Windows with VCL framework

With this first proof of concept product ready now, we are eager to learn about your interest in this type of components and what other UI components you want to see us developing for FNC. We are curious to see your results bringing Pascal code bases to an amazing and vast number of operating systems and devices.