How to make my own dialog component from Firemonkey TPopUp? - delphi

Question

[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.

Answer 1

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;