Blog

All Blog Posts  |  Next Post  |  Previous Post

Introducing FNC and TTMSFNCChart

Thursday, January 21, 2016

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.

Bruno Fierens




This blog post has received 21 comments.


1. Thursday, January 21, 2016 at 4:16:22 PM

Hi Bruno,

wow!! This is a great news

For me this is the future. In this new "era" the device should no longer be the "problem".

write once...run everywhere (or almost ;-))

Claudio Piffer


2. Thursday, January 21, 2016 at 5:11:00 PM

That sounds pretty cool.
Lazarus is still lacking of good data grid. With a good data grid, I think lazarus has all componets which are needed to develop modern business applications.

* Reporting (FastReport)
* Database Connectiions (ZeosDB, DevArt)
* Client/Server Framework (mORMot, RemObejcts DataAbstract)
* Charts (TMS)
* Grids (???)

markus_ja


3. Thursday, January 21, 2016 at 5:19:30 PM

Wow, great!
I really like it!



Stefano Monterisi


4. Thursday, January 21, 2016 at 5:20:35 PM

This is great, I''ve been hoping for TMS support for linux/rapberry pi forever on the FPC. This is a great step!

Mike Sum.


5. Thursday, January 21, 2016 at 6:17:07 PM

Stay tuned for more!

Bruno Fierens


6. Thursday, January 21, 2016 at 6:32:01 PM

The uncertain future of Delphi on one side, a broader OS support (with Lazarus) on the other side, make this announcement a very exiting!

Currently I use DevExpress, if/when a roughly equivalent set of NF components will be available I will seriously consider the switch.


Guido Aspeszani


7. Thursday, January 21, 2016 at 7:39:17 PM

This seems very interesting :)

VAN LANDEGHEM Hugues


8. Thursday, January 21, 2016 at 7:53:35 PM

If the base framework were open source this could be very interesting.

Leonardo Herrera


9. Thursday, January 21, 2016 at 8:57:22 PM

FreePascal already supports a dot in the unit name.
Check out 3.0.0 version.

Marcos Douglas


10. Thursday, January 21, 2016 at 9:54:59 PM

Interesting. But we did not want to set the requirement to be 3.0 yet.

Bruno Fierens


11. Friday, January 22, 2016 at 1:29:57 AM

Certainly an interesting idea and I''d support it. But it would also add another level of abstraction on top of existing frameworks and dependence on other frameworks that could be risky and costly to maintain. Just think about Firemonkey''s performance and end-user acceptance issues.

I believe that you would enjoy better sales emulating VCL on other platforms so existing applications would more easily port from Windows VCL to Mac OS X, iOS and Android. The mCL and iCL products suggest you might already be closer to such a goal.


Navid Madani


12. Friday, January 22, 2016 at 10:14:25 AM

Wow ! I''m definitely staying tuned for more !

Carre Stephane


13. Friday, January 22, 2016 at 10:28:21 AM

As ever TMS is doing their ultimate. This is THE development for the future. We will test it of course and keep all of our readers informed, I think this is the step to the next generation of software developmentā€¦GREAT and INSPIRING!

Detlef Overbeek


14. Friday, January 22, 2016 at 2:00:56 PM

This is great! I think the adoption rate for freepascal would explode if there was a decent cross platform set of gui controls

Margerum Michael


15. Friday, January 22, 2016 at 2:25:13 PM

Too bad there is still no real way to pass an array of data.
Don''t get it why. Since the array is already assigned and filled, passing the reference and the number of points should be enough, knowing the data type, to use it immediately without the need for a GetPoint call crawling everything down.

GetPoint could be nice when needing to pre-process the data though.

sjordi


16. Tuesday, January 26, 2016 at 11:10:08 AM

The next update will have a method: AddPointArray()

Bruno Fierens


17. Wednesday, January 27, 2016 at 2:46:52 AM

I''m getting pretty exasperated with FMX on Windows and have been looking at moving back to the VCL. One thing I need is a good virtual grid and ironically the TMS FMX grid is the best I''ve found so far - any near term plans for an FNC grid like the FMX one?

Bob

Robert Devine


18. Friday, January 29, 2016 at 8:55:12 PM

LCL have modern architecture and it will control future market of Delphi Like Languages,

this would be an initial step and TMS would continue this approach .

availability of TMS component can made lazarus a serious development tool.

Ryan Samiee


19. Saturday, January 30, 2016 at 8:19:40 PM

waw , really very interesting , but Bruno may i ask you a question :

will this be a framework for other ( any ) component developing or only for the TMS components ?

as i''m a delphi component developer i''m really interested in this framework if the above question is right .


many thanks

randydom


20. Sunday, January 31, 2016 at 9:05:33 AM

We had not thought (yet) about making this a sort of open framework, but this is a good idea and worth exploring.

Bruno Fierens


21. Saturday, February 20, 2016 at 10:45:53 AM

Awesome, if you guy''s manage to create framework independent components I will buy a lifetime license! Top priority Grids!

OwlHat




Add a new comment

You will receive a confirmation mail with a link to validate your comment, please use a valid email address.
All fields are required.



All Blog Posts  |  Next Post  |  Previous Post