FireMonkey Library

Despite a few articles about mobile apps development I have written, I have yet to explain the purpose of FireMonkey library (also known under abbreviations FMX or FM).

What is FireMonkey

FireMonkey is an application platform (components library) which was added by Embarcadero company to its tool for the first time in XE2 version. It’s an alternative for popular VLC which is solely used for a quick apps development for Windows and therefore it’s pretty dependent on services provided by OS.

The main reason for adding FireMonkey into tools was the desire to offer developers possibility to develop apps for different devices and different OS. FireMonkey library is written in Object Pascal programming language and libraries of used OS are used for accessing the hardware. Windows have GDI+/Direct2D, Max OS X has OpenGL and iOS has OpenGL_ES. Majority of visual objects of library are based on “CustomDraw” principle which does the drawing on the hardware level. Around 80% - 90% of code is independent on the OS.

FireMonkey uses the power of graphical processors as much as possible in order to not slow the applications because of usage of own UI elements. All operations working with graphics run on a thread and CPU power is available for app’s logic. Using GPU (apart from higher speed) adds an access to many graphical functions which can be used for smarter and better looking UI.

Caution

FireMonkey and VCL (Visual Component Library) aren’t compatible and cannot be combined within a single module. Several differences in their inner implementation are the cause of this.

Supported platforms

• Windows 32-bit (Intel)
• Windows 64-bit (Intel)
• Mac OS X (Intel)
• iOS (ARM) + iOS Simulator (Intel)
• Android (ARM) + Android Emulator
• Android (Intel, along with usage of libhoudini)

Main differences between FMX and VCL

Usage of a vector graphics

VCL uses bitmap graphics which is based on a description of every single point, also called a pixel. On the other hand, most of visual objects in FireMonkey consist of simple shapes of a vector graphics, such as rectangle, curve, circle and others. Because a vector graphics is based on a mathematical description, it allows user to change the scale without any problems which is priceless in the era of display of different sizes and resolutions.

Dimensions and positioning of elements

In case of setting height, width or distance from the border of the form in VLC, we have to use Integer data type. Should we not use it, an error message will arise.

FireMonkey in this case prospers from using a vector graphics. Not just it allows using Float data type, but instead of a set value, you can use animations (they are labeled by a film strip in Objects Inspector).

Colours coding

FireMonkey is used for developing graphical applications. Therefore the support for working with colours is essential. The biggest difference in colours usage is usage of “Alpha Channel” (or, in other words, transparency).

All parameters which are accessible during the design phase can be set in a code as well. It’s important here to take into account the differences between VCL and FireMonkey. The most important ones are colours coding and a different naming of colours constants.

VCL Library

uses VCL.Graphics;

var barva: TColor;
barva := clRed;
barva := 255;
barva := rgb(255, 0, 0);
barva := $0000FF;

FMX Library

uses System.UIConsts;

var barva: TAlphaColor;

barva := claRed;
barva := $00FF0000;
barva := TAlphaColorRec.Red;
barva := TAlphaColors.Red;

Fonts usage

The font size in VLC is determined in points. There are 72 points per an inch. The font sizes in FireMonkey are determined in DIP (Device Independent Pixel). There are 96 pixels per an inch. A text of same font size will be smaller in FireMonkey.

Relation ancestor/parent

VLC limits the option to set the object as owner only for containers like are components of classes TForm, TFrame, TPanel or TDataModule. FireMonkey is more open in this and basically every object can be an owner of any other object. Implementation can be done not just from a code, but visually as well (in “Structure Window”).

About the Author