How to make my own dialog component from Firemonke

[Delphi XE5 Up2]

I am trying to use TPopUp to inherit and create a component, following the same idea as exposed on the Flyouts demo for the CalendarFlyout. I will be not using the Calendar, but I want that space free so that I can place any other FMX component that I want.

I have made the component using the new component wizard and added some controls:

unit PopupTest;

interface

uses
  System.SysUtils, System.Classes, FMX.Types, FMX.Controls,
  FMX.Layouts, FMX.StdCtrls;

type
  TPopupTest = class(TPopup)
  private
    FPanel        : TPanel;
    FLayoutButton : TLayout;
    FCloseButton  : TButton;
    FSaveButton   : TButton;
    FClientArea   : TLayout;
  protected
    procedure   OnClose(Sender: TObject);
    procedure   OnSave(Sender: TObject);
  public
    constructor Create(AOwner: TComponent); override;
    destructor  Destroy; override;
  published
    { Published declarations }
  end;

procedure Register;

implementation

procedure Register;
begin
  RegisterComponents('Samples', [TPopupTest]);
end;

{ TPopupTest }

constructor TPopupTest.Create(AOwner: TComponent);
begin
  inherited;

  FPanel                   := TPanel.Create(self);
  FPanel.Position.X        := 0;
  FPanel.Position.Y        := 0;
  FPanel.Margins.Left      := 10;
  FPanel.Margins.Right     := 10;
  FPanel.Margins.Top       := 10;
  FPanel.Margins.Bottom    := 10;
  FPanel.StyleLookup       := 'flyoutpanel';
  FPanel.Align             := TAlignLayout.alClient;
  FPanel.Visible           := True;

  FLayoutButton            := TLayout.Create(FPanel);
  FLayoutButton.Align      := TAlignLayout.alBottom;
  FLayoutButton.Height     := 22;

  FCloseButton             := TButton.Create(FLayoutButton);
  FCloseButton.Align       := TAlignLayout.alLeft;
  FCloseButton.StyleLookup := 'flyoutbutton';
  FCloseButton.Text        := 'Fechar';
  FCloseButton.OnClick     := OnClose;

  FSaveButton              := TButton.Create(FLayoutButton);
  FSaveButton.Align        := TAlignLayout.alLeft;
  FSaveButton.StyleLookup  := 'flyoutbutton';
  FSaveButton.Text         := 'Salvar';
  FSaveButton.OnClick      := OnSave;

  FClientArea              := TLayout.Create(FPanel);
  FClientArea.Align        := TAlignLayout.alClient;

  Width                    := 100;
  Height                   := 100;
end;

destructor TPopupTest.Destroy;
begin
  FClientArea.Free;
  FCloseButton.Free;
  FSaveButton.Free;
  FLayoutButton.Free;
  FPanel.Free;

  inherited;
end;

procedure TPopupTest.OnClose(Sender: TObject);
begin

end;

procedure TPopupTest.OnSave(Sender: TObject);
begin

end;

end.

I have made several tests and nothing appears, just the popup itself, nothing inside. I am using the MetropoliUI style and the Styles on the component for the inner controls are based on that style.

For simplicity I have remove everything else and compiled and tested.

I am using the TPopUp for several reasons, but the main one is that my "dialog" will be inserted on the form, and I will add to it some TEdits that will be connected by LiveBinding to the same DataSet etc on the form. So no need to create another form with everything else, and preserve all the context (at least I believe this is the right thing to do)

What I am looking for:

What is missing to make all the internal controls appear
How to make sure that the FClientArea, that is a TLayout will be available for the user to add other controls on it?

The final result would like this:

Where in the middle area is a TLayout where I could drop other controls like TEdit.

When you create the TPopupTest in your form you have to set the creator's owner to your Form, as well as the Parent.

Changing the Unit to something like this will make it appear but it's not exactly as you picture it, you will have to refine it a bit. Also my solution might not be the best but at least you will get to see something now.

constructor TPopupTest.Create(AOwner: TComponent);
var
PopPanel: TPanel;
PopLayout: TLayout;
PopClose: TButton;
PopSave: TButton;
PopClientArea: TLayout;
begin
  inherited;

  PopPanel                   := TPanel.Create(Owner);
  PopPanel.Position.X        := 0;
  PopPanel.Position.Y        := 0;
  PopPanel.Margins.Left      := 10;
  PopPanel.Margins.Right     := 10;
  PopPanel.Margins.Top       := 10;
  PopPanel.Margins.Bottom    := 10;
  PopPanel.StyleLookup       := 'flyoutpanel';
  PopPanel.Parent            := Owner as TFmxObject;
  PopPanel.Align             := TAlignLayout.alClient;
  PopPanel.Visible           := True;

  PopLayout            := TLayout.Create(Owner);
  PopLayout.Parent     := PopPanel;
  PopLayout.Align      := TAlignLayout.alBottom;
  PopLayout.Height     := 22;

  PopClose             := TButton.Create(Owner);
  PopClose.Parent      := PopLayout;
  PopClose.Align       := TAlignLayout.alLeft;
  PopClose.StyleLookup := 'flyoutbutton';
  PopClose.Text        := 'Fechar';
  PopClose.OnClick     := OnClose;

  PopSave              := TButton.Create(Owner);
  PopSave.Parent       := PopLayout;
  PopSave.Align        := TAlignLayout.alLeft;
  PopSave.StyleLookup  := 'flyoutbutton';
  PopSave.Text         := 'Salvar';
  PopSave.OnClick      := OnSave;

  PopClientArea              := TLayout.Create(Owner);
  PopClientArea.Parent       := PopPanel;
  PopClientArea.Align        := TAlignLayout.alClient;

  FPanel:= PopPanel;
  FLayoutButton:= PopLayout;
  FSaveButton:= PopSave;
  FCloseButton:= PopClose;
  FClientArea:= PopClientArea;

  Width                    := 100;
  Height                   := 100;
end;