Cross platform applications are written against a framework named FMX. (Formerly FireMonkey, FMX=FireMonkey X-platform). FireMonkey platform itself is flexible, customizable and multi-platform, all components behave the same.
Components in FireMonkey are containers, it means you can embed any component inside any other component. Component’s look and feel can be changed and reused using Styles.
FireMonkey leverages the graphics processing unit (GPU) in modern desktop and mobile devices to create visually engaging applications on multiple platforms, targeting the entire range from the personal to the enterprise.
FireMonkey is vector-based while the VCL is raster-based.
The FMX framework does not depend on the Win32 API and its controls, but instead, actually opens up a rendering context using OpenGL or DirectX, and renders controls directly to that API. In this way, visual controls become cross platform. The FMX framework has mirror controls for the vast majority of VCL controls which ship with Delphi, for example, VCL and FMX both have a TEdit control, they both have a TButton control, and so on..
Firemonkey Coordinate System
In the Form Designer, the origin of the coordinate system is the top-left, extending to the bottom-right.
- The Positionproperty of a 2D control is a TPosition with X and Y properties. The separate Width and Height properties represent its size.
- 3D objects use a TPosition3Dwith an additional Z property, with positive values pointing into the screen (X goes to the left and Y points down, so this follows the “right-hand rule”); and a Depth Together, the position and size define one kind of bounding box that describes a control: its content box.
FireMonkey Controls Have Owners, Parents, and Children
FireMonkey allows any control to be the parent of another. This ability to build composite controls turns the smaller set of controls it includes into a much more robust set of controls.
When creating controls through code, set the Parent property to the form or the appropriate parent control.
The Position of a child is relative to its Parent. If the coordinates are zero, the child starts at the same top-left as the parent.
Parentage is not restricted to container-like controls. Also, the ClipChildren property defaults to False. This enables ad-hoc collections of related controls without requiring a formal container. For example, a TLabel can be a child of the TEdit it describes. The label can have a negative position, placing it above or before the control. Moving the TEdit moves both together. TLayout can be used as an otherwise featureless container to arrange other controls.
In addition to a shared coordinate space, child objects share other attributes like visibility, opacity, rotation, and scale. Changing these attributes of the parent affects all the children in that sub-tree.
Aligning with Margins and Padding
A control’s Align property determines its participation in automatic positioning and/or sizing along its parent’s four sides or center, both initially and as the parent is resized. It defaults to alNone, so that no such automatic calculations are performed: the control stays where it is.
Padding sets aside space on the interior of the parent’s content box.
More accurately, what is automatically positioned is not the control’s content box, but rather its layout box. The difference between the two is the control’s Margins. Margins set aside space on the exterior of the control’s content box. As the size of Margins increases, the size of the layout box stays the same, and the content box shrinks if it is constrained.
Layouts
FireMonkey layouts are containers for other graphical objects that can be used to build complex interfaces with visual appeal.
The available layouts can be found in the Tool Palette, under the Layouts category.
Kinds of Layouts
Simple Container
TLayout.
A simple container is not visible at run time and can be used to group other controls to be manipulated as a whole.
Scaled Layout
TScaledLayout.
A scaled layout is a container that offers the possibility to scale a group of graphical objects according to the physical dimensions of the layout. The child controls stretch along with the layout when the layout is resized. TScaledLayout keeps its original size through the OriginalWidth and OriginalHeight properties.
Scroll Layout
TScrollBox
A scroll layout offers the possibility to scroll groups of graphical objects. You can use scroll boxes to create scrolling areas within a form. These areas are known as views. Views are common in commercial word-processor, spreadsheet, and project management applications.
Layouts with Predefined Arrangement
FireMonkey provides the TFlowLayout, TGridLayout, and TGridPanelLayout layouts that automatically implement predefined arrangements of child controls in grid-like panels.
TFlowLayout
TFlowLayout arranges its child controls as if they were words in a paragraph.
When using a TFlowLayout, the child controls are arranged and displayed in the layout following the order in which they were added to the layout. To start displaying child controls in a new line, add a TFlowLayoutBreak. The resulting behaviour is like the one obtained adding a new line to a text paragraph. TFlowLayout follows a set of rules to arrange its children.
TGridLayout
TGridLayout arranges child controls in a grid of equally sized cells.
When using TGridLayout, the child controls are resized to fit the sizes specified through the ItemHeight and ItemWidth properties. The Height and Width properties for child controls are automatically set, and explicitly changing their value has no effect.
TGridPanelLayout
TGridPanelLayout arranges child controls in a grid panel.
Each child control is placed within a cell on a grid panel. Unlike TGridLayout, you can manually resize and align child controls placed inside cells on TGridPanelLayout.
Features
Graphics
FireMonkey uses hardware acceleration when available on Windows, macOS, iOS, and Android. Direct2D or OpenGL can be used on Windows Vista, Windows 7 and Windows 8. On Windows platforms where Direct2D is not available (Windows XP for example) it falls back to GDI+. OpenGL is used on macOS. OpenGL ES is used on iOS and Android.
Styles
All controls in FireMonkey are styleable via the styling system. This is accomplished by attaching a TStyleBook to the form, and a style is loaded and applied to the form.
Platform Services
FireMonkey uses a set of services to provide a loosely coupled way of accessing platform-specific features independent of the platform. This also shows up as platform default behaviors.
Comparison between VCL and FMX
VCL has a respectable set of containers and alignments, but FireMonkey has many, many more, and again they are much more flexible. FireMonkey uses a single-precision floating-point number instead of an integer in laying out the controls. Much higher precision, but typically subpixel precision doesn’t buy you much. Where it does make a difference is when you scale on FireMonkey since it supports multiple pixel densities.
Conclusion
Use VCL when you are only targeting Windows and don’t need the 3D, effects or flexibility of FireMonkey. Use FireMonkey when you are going multiplatform, or you want new some of FireMonkey’s flexibility especially when working around graphics.
References:
https://en.wikipedia.org/wiki/FireMonkey