Overview
TeeTree’s FireMonkey (FMX) version enables true cross-platform development, allowing you to create tree diagrams that run on Windows, macOS, iOS, Android, and Linux using a single codebase.
The FMX version of TeeTree supports all FireMonkey target platforms:
Windows (32-bit and 64-bit)
macOS (32-bit, 64-bit, and ARM64)
iOS (Simulator and Device, 32-bit and 64-bit)
Android (ARM 32-bit and 64-bit)
Linux (64-bit)
Installation
Unit References
For FMX applications, include the FMX-specific units:
uses
System.SysUtils, System.Types, System.UITypes, System.Classes,
System.Variants, FMX.Types, FMX.Controls, FMX.Forms, FMX.Dialogs,
FMX.Layouts, FMX.StdCtrls, FMX.Objects,
FMXTee.Tree, FMXTee.Procs, FMXTee.Canvas;
Notice the FMXTee.Tree unit instead of TeeTree - this is the FireMonkey version.
Component Placement
Adding TTree to FMX forms:
Create a new FireMonkey application
Open the Tool Palette
Find the TeeTree tab
Drag TTree component onto your form
The component will automatically adapt to the target platform
FMX-Specific Features
FMX uses GPU-accelerated rendering on all platforms:
Vector graphics with anti-aliasing
Hardware acceleration via DirectX, Metal, or OpenGL
High DPI support automatic
Retina display support on iOS/macOS
FMX-Specific Constants
const
TeeDefaultBoxSize = 5 ; // FMX uses slightly larger default
// FMX color constants
clWhite = TAlphaColors.White;
clBlack = TAlphaColors.Black;
clGray = TAlphaColors.Gray;
// File extension for FMX
TreeMsg_TeeExtension = 'ttx' ;
TeeMsg_TreeFiles = 'TeeTree v2 FMX files (*.ttx)|*.ttx' ;
Creating Your First FMX Tree
Mobile Application unit Unit_FMX_Mobile_Tree;
interface
uses
System.SysUtils, System.Types, System.UITypes, System.Classes,
FMX.Types, FMX.Controls, FMX.Forms, FMX.StdCtrls,
FMXTee.Tree, FMXTee.Procs;
type
TMobileTreeForm = class (TForm)
procedure FormCreate (Sender: TObject);
private
Tree1: TTree;
procedure PopulateTree ;
end ;
implementation
procedure TMobileTreeForm.FormCreate (Sender: TObject);
begin
// Create tree at runtime
Tree1 := TTree.Create(Self);
Tree1.Parent := Self;
Tree1.Align := TAlignLayout.Client;
PopulateTree;
end ;
procedure TMobileTreeForm.PopulateTree ;
var
Root: TTreeNodeShape;
begin
Root := Tree1. Add ( 'Mobile Root' );
Root.AddChild( 'Touch-enabled' );
Root.AddChild( 'Gesture support' );
Root.AddChild( 'Cross-platform' );
Root.Expanded := True ;
end ;
Desktop Application procedure TFireMonkey_TeeTree_Form.FormCreate (Sender: TObject);
begin
// Create tree component
Tree1 := TTree.Create(Self);
Tree1.Parent := Self;
Tree1.Align := TAlignLayout.Client;
// Add nodes
with Tree1. Add ( 'Desktop' ) do
begin
AddChild( 'Windows' );
AddChild( 'macOS' );
AddChild( 'Linux' );
Expanded := True ;
end ;
end ;
Touch and Gesture Support
procedure TForm1.EnableTouchSupport ;
begin
// FMX automatically handles touch events
Tree1.Touch.InteractiveGestures := [TInteractiveGesture.Zoom,
TInteractiveGesture.Pan];
end ;
procedure TForm1.Tree1Gesture (Sender: TObject;
const EventInfo: TGestureEventInfo; var Handled: Boolean );
begin
case EventInfo.GestureID of
igiZoom:
begin
// Handle pinch zoom
Tree1.Zoom := Tree1.Zoom * ( 1 + EventInfo.Distance / 100 );
Handled := True ;
end ;
igiPan:
begin
// Handle pan/scroll
Tree1.ScrollBy(Round(EventInfo.Location.X),
Round(EventInfo.Location.Y));
Handled := True ;
end ;
end ;
end ;
Mobile UI Considerations
Touch-Friendly Sizing
Desktop Optimization
procedure TForm1.SetupMobileUI ;
begin
// Larger touch targets for mobile
Tree1.Selected.HandleSize := 10 ; // Bigger than desktop
// Adjust node sizes
Tree1.Roots[ 0 ].Height := 60 ; // Larger tap area
Tree1.Roots[ 0 ].Font.Size := 16 ; // Readable on mobile
// Spacing for touch
with Tree1.GlobalFormat.ChildManager as TTreeExplorerAlignChild do
begin
HorizMargin := 30 ;
VertMargin := 20 ;
end ;
end ;
Color System
Alpha Channel Support
FMX uses RGBA colors with alpha transparency:
procedure TForm1.SetupFMXColors ;
begin
// Using TAlphaColors
Tree1.Color := TAlphaColors.White;
// Semi-transparent nodes
Tree1.Roots[ 0 ].Brush.Color := MakeColor(TAlphaColors.Blue, 128 );
// Transparency property (0-100)
Tree1.Roots[ 0 ].Transparency := 50 ;
// Gradient with alpha
with Tree1.Roots[ 0 ].Gradient do
begin
Visible := True ;
StartColor := TAlphaColors.Skyblue;
EndColor := MakeColor(TAlphaColors.Navy, 200 );
end ;
end ;
Conditional Compilation
procedure TForm1.PlatformSpecificCode ;
begin
{$IFDEF ANDROID}
// Android-specific code
Tree1.Font.Size := 14 ;
{$ENDIF}
{$IFDEF IOS}
// iOS-specific code
Tree1.Font.Family := 'Helvetica Neue' ;
{$ENDIF}
{$IFDEF MSWINDOWS}
// Windows-specific code
Tree1.Font.Family := 'Segoe UI' ;
{$ENDIF}
{$IFDEF MACOS}
// macOS-specific code
Tree1.Font.Family := 'San Francisco' ;
{$ENDIF}
end ;
Printing on FMX
Printing is not available on Android and iOS due to platform limitations.
procedure TForm1.PrintTree ;
begin
{$IFNDEF ANDROID}
{$IF DEFINED(MSWINDOWS) OR DEFINED(MACOS)}
// Printing only on desktop platforms
Tree1.Print;
{$ENDIF}
{$ENDIF}
end ;
FMX Styling
Style Books
Apply FMX styles to TeeTree:
procedure TForm1.ApplyStyle ;
begin
// Load style book
StyleBook1.LoadFromFile( 'MyStyle.style' );
Self.StyleBook := StyleBook1;
// Tree adapts to style automatically
Tree1.StyleLookup := 'treestyle' ;
end ;
Custom FMX Styles
procedure TForm1.CustomizeAppearance ;
begin
// Bevels work differently in FMX
Tree1.BevelOuter := TPanelBevel.None;
Tree1.BevelInner := TPanelBevel.None;
// Effects (FMX-specific)
with Tree1 do
begin
// Shadow effect
// Note: Effects are applied via TEffect descendants
end ;
end ;
Optimization Tips
Mobile devices have limited resources. Optimize for performance:
Limit the number of visible nodes
Use virtual mode for large datasets
Disable animations if needed
Reduce transparency effects
procedure TForm1.OptimizeForMobile ;
begin
// Reduce animation overhead
TeeTreeAnimatedScroll := False ;
// Disable shadows on mobile
{$IFDEF ANDROID}
Tree1.Roots[ 0 ].Shadow.Visible := False ;
{$ENDIF}
// Simpler graphics
Tree1.AntiAlias := False ; // Faster rendering
// Virtual mode for large trees
Tree1.VirtualMode := True ;
end ;
Layout and Scaling
Multi-Resolution Support
procedure TForm1.SetupMultiResolution ;
begin
// Auto-scale for different DPI
Tree1.Align := TAlignLayout.Client;
// Use relative sizing
Tree1.Margins.Left := 10 ;
Tree1.Margins.Top := 10 ;
Tree1.Margins.Right := 10 ;
Tree1.Margins.Bottom := 10 ;
// Font scaling
Tree1.Font.Size := 14 ; // FMX auto-scales
end ;
Event Handling in FMX
Mouse vs Touch Events
procedure TForm1.Tree1ClickShape (Sender: TTreeNodeShape;
Button: TMouseButton; Shift: TShiftState; X, Y: Integer );
begin
// Works for both mouse and touch
ShowMessage( 'Node clicked: ' + Sender.Text[ 0 ]);
end ;
procedure TForm1.HandleSingleClick (X, Y: Single );
var
Node: TTreeNodeShape;
begin
// FMX uses Single (float) coordinates
Node := Tree1.Shapes.Clicked(Round(X), Round(Y));
if Assigned(Node) then
Node.Selected := True ;
end ;
uses
System.IOUtils;
procedure TForm1.SaveLoadTree ;
var
FileName: string ;
begin
// Use TPath for cross-platform paths
FileName := TPath.Combine(TPath.GetDocumentsPath, 'mytree.ttx' );
// Save
Tree1.SaveToFile(FileName);
// Load
Tree1.LoadFromFile(FileName);
end ;
Deployment Considerations
iOS Deployment
// Note: No special code needed
// TeeTree automatically adapts to iOS
Android Deployment
// Permissions in AndroidManifest.xml if saving files:
// <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
macOS App Store
// Ensure sandbox compatibility
// Use app container paths for file operations
Common FMX Patterns
Responsive Layout
procedure TForm1.SetupResponsiveLayout ;
begin
// Adapt to orientation changes
Tree1.Align := TAlignLayout.Client;
// Different layouts for portrait/landscape
if Width > Height then
begin
// Landscape
Tree1.GlobalFormat.ChildManager.HorizMargin := 30 ;
end
else
begin
// Portrait
Tree1.GlobalFormat.ChildManager.HorizMargin := 15 ;
end ;
end ;
uses
FMX.DialogService;
procedure TForm1.ShowPlatformDialog ;
begin
TDialogService.ShowMessage( 'Node selected: ' +
Tree1.Selected.First.Text[ 0 ]);
end ;
Advantages of FMX
Single codebase for all platforms
Modern GPU-accelerated graphics
Touch and gesture support built-in
Vector graphics with anti-aliasing
Automatic DPI scaling
Native look and feel on each platform
Limitations
Some features are desktop-only:
Printing (Windows/macOS only)
Clipboard metafile (Windows only)
Some custom cursor types
See Also