5 Minute Snack: Understanding VCL, FMX and the option to use FNC from TMS Software

Component developers offer a wide range of components for the Visual Component Library (VCL) and FireMonkey (FMX). 

Most of their components are available for VCL and for FMX as well.  Looking at TMS Software that means, there is a mapping component giving developers access to Google Maps called “TMS VCL WebGMaps” for the VCL and its FMX ounterpart called “TMS FMX WebGMaps“.

This gives us the following matrix for the platforms supported by the components:

VCL WebGMaps	+
FMX WebGMaps	+	+	+	+

That means if you focus on Windows 32 and Windows 64 only, you most likely will pick from their VCL selection. However, if you also need other platforms, you might be using their FireMonkey component sets. 

Even though Embarcadero tries to keep the differences between VCL and FMX as little as possible, there are still subtle differences. Developing components for both of these frameworks puts the component developer in the situation to make the tough decisions how to make it as easy as possible for the Delphi developer using their components. They want to abstract from these issues as much as possible.

I will point out one of those pitfalls that I fell into a couple of days ago. I started developing a mapping application using the “TMS FMX WebGMaps” component set. Adding mapping to your application is really as easy as dropping the component onto your form and running the application. No source code is necessary. For the basic functionality you do not even need a developer API key from Google.

As it turned out, there was no need to develop for multiple platforms and as I personally still feel more comfortable in the “good old VCL” there was really no need to use FireMonkey. Thus, I switched over to a VCL Form Application and dropped the counterpart component for VCL on a form and ran the application only to find out that the map stayed empty. If I had read the documentation I knew what I did wrong. However, I just want to make one thing very clear:

Never assume that a component that is available for VCL and FMX behaves exactly the same way. The architecture of the framework might require the component developer to model subtle differences.

In this case, you have to “launch” the map manually to enable the VCL component. No problem, one line of code. After that point the components behave exactly the same way from a developer perspective. Same property names, same methods – everything.

Still, I asked myself why I made that mental mistake. The reason is rather simple. TMS offers components that are truly cross-platform and also “cross-framework”. Any FNC (Framework Neutral Component) component can be used with:

• Visual Component Library (VCL)
• FireMonkey (FMX)
• Lazarus Component Library (LCL)

Due to this freedom of choice, developers are able to develop applications for the following platforms using FNC:

• Windows 
• MacOS
• iOS
• Android
• Linux
• Raspberry Pi

From this listing it follows that a component will behave exactly the same way in any component library. There is no difference using the component in VCL, FMX or LCL – it is the same component afterall. Looking back at the mapping, these are two different components for different fameworks.

That is what makes FNC so powerful and also so very difficult to develop as you have to consider 3 different class libraries with 6 platforms — leave alone that both the VCL and FMX have multiple versions!  The VCL in Delphi XE2 is different compared to Delphi Berlin 10.1. 

Kudos to Bruno Fierens and his team of developers! I do not want to be in their shoes making changes to the components. 

Knowing FNC I made the mistake to expect that any FMX component must offer the same luxury to be used exactly the same way in VCL — if there is a counterpart component like it is the case with WebGMaps from TMS.

As an aside, FNC offers so far:

• grids,
• a planner,
• a rich text editor,
• tree view,
• PDF library
• page controls
• page panels
• multiple edits
• multiple lists
• several pickers
• charting
• and more.