Bayesean Blog - Desktop, Mobile and IOT Developer Blog


Delphi FMX Form Docking

Posted on 5th Jan 2018 in Delphi FMX


FMXDocking55.png

Background

When working with mobile applications, trying to place all your code on one form can become cumbersome. So to overcome this you will need to create forms and dock forms onto a main form permanently or temporarily. If you believed that FMX form Docking is the same as VCL, then this blog will help you to make the new implementation easier because the FMX method is a lot different from the VCL method.

IDE

Tokyo 10.2 used, this should be backwards compatible to Post XE4 versions.

Scope

Dock different forms to a specific tab-item in the tab-control of a form and free them when required.

Requirements

Standard FMX Library.

 Difficulty level - Low.

Method

How does it work?

The Form to be ‘Docked to’ must have a Tlayout or Tpanel or similar which becomes the Parent object to be docked to.

The Form to be ‘Dockedfrom’ must have a Tlayout or Tpanel or similar which becomes the Child of the Parent.

All the children ( Tedits, Tbuttons,Tlabels, etc) of the ‘DockedFrom’ form become the children of the Parent and are added in the order in which they were created at design time.

So if you will be reusing the ‘Dockedto’  as the parent to add and remove different forms,

a new step will need to be added else further docking will result in the loaded form’s children being overlaid on each other resulting in an unusable mess.

Lets name the ‘Dockedto’  Tlayout object as DockedLayout  and we will refer to it as this.

Before loading a form to the DockedLayout, we need to check if an existing form has been loaded. These would be children of the DockedLayout. We use the method ‘Childrencount ‘ and check if the count is greater than 0. If true then the docked children are removed.

The principle for removing the children is LIFO - Last in first out and the child items are removed one at a time from the Dockedlayout.

To remove the Children we need to call the correct method for the platform to free each child.

So we use If Def’s to call different methods for freeing the children for the different Platforms.

To remove Android or IOS children, the disposeof method is used and for Windows, the free method will remove the child.

Now that the previous forms children have been freed, can we now create the form and add.

To add, make the ‘dockedfrom’form’s Tlayout that contains its children, the dockedlayout’s children.

We now have a docked method implementation that works on Android, Windows and IOS.

firsttab31.png

Lets take a look at the downloadable example code used for docking a Salesform to the Main Form :-

procedure Tfmmain.SalesClick(Sender: TObject);
var
i:integer;
childform:Tfmsales; // sets a child form of the form Sales
          begin
  DockLayout.ClipChildren:= true;

   if DockLayout.childrencount > 0 then
  begin
    for i := (DockLayout.childrencount - 1) downto 0 do
    begin
{$IF DEFINED(IOS) or DEFINED(ANDROID)}
      DockLayout.Children.items[i].Disposeof; // frees any children if already set
{$ELSE}  // Windows
      DockLayout.Children.items[i].Free; // frees any children if already set
{$ENDIF}
    end;      //frees the existing loaded form
  end;
     label3.Text:= '0';
     childform:= Tfmsales.Create(self);   //Creates the childform.
     childform.layoutsales.Parent:= Self.DockLayout;  //set childform to the parent
     tabcontrol1.activetab:= tabitem2;
     label3.text:=DockLayout.childrencount.tostring;
end;

 The two different Docked Forms…

salestag28.png

 

custtag0.png 

Nice n' easy once you understand the Parent / Child relationship.

Download the code from Github here...

Download Code

Happy Coding


Be the First to Comment...

Add a Comment

9+5

Recent News

Delphi VCL Buttons in DBGrid
Two Helper Apps for Delphi LibUSB
Delphi Libusb Library Introduction
Delphi Object directly to a Json string in a REST Client
Delphi using Environment Variables in your App
Delphi FMX Leaflet Plotter using OSM Maps
C2PAS32 Convertor Application
C to Delphi Open Source Convertors Shootout

Categories

Bootstrap 4
Delphi VCL
Delphi FMX
Ajax
Bootstrap 3
CSS
XE4>Delphi > XE4
Delphi < XE4

Archives

October 2018

Delphi VCL Buttons in DBGrid
Two Helper Apps for Delphi LibUSB

September 2018

Delphi Libusb Library Introduction

August 2018

Delphi Object directly to a Json string in a REST Client
Delphi using Environment Variables in your App

July 2018

Delphi FMX Leaflet Plotter using OSM Maps

June 2018

C2PAS32 Convertor Application
C to Delphi Open Source Convertors Shootout
Delphi command-line programs with DOSCommand

May 2018

Delphi PDF Embedded viewer with PDF.js

March 2018

Delphi FMX - Changing TCharacter to TCharHelper
Make Your Delphi App POP using Javascript!

January 2018

Delphi FMX Dashboard using Chart.JS
Delphi FMX Form Docking

December 2017

PHP Slim REST Server & Delphi Auth Part 5

November 2017

Delphi FMX REST Client App Part 4

October 2017

Delphi VCL REST Pricing Client App Part 3

September 2017

Delphi REST VCL Client Basic Auth Part 2B

August 2017

Delphi REST Client Part 2A
PHP PDO REST Server Part 1

July 2017

PHP REST Server and Delphi Client Intro

June 2017

Delphi SQLite Encryptor-Decryptor Tool
Updating Applications Manifest using Delphi

May 2017

Create a Visual IP Address Geolocation with PHP

March 2017

PHP Downloader using Countdown timer
PHP File Downloader from a Inbox Selection

February 2017

Javascript Image-File Uploader with ThumbViewer

January 2017

Morris Charts and PHP-PDO

December 2016

CSS to create a functional Toggle Button