Jump to content

FYI - TLayout - Beginner


Recommended Posts

I will be posting a number of examples on how to use the TLayout object. I will be using tags (e.g. layout, tlayout, beginner) so that you can find them easily enough in the future. 

Please be sure to read the Articles by @gabr42   http://smartmobilestudio.com/documentation/layout-manager

 

FYI - TLayout - Beginner - How to center a control on the form

k49di0.png

Code on GitHub

 

Link to post
Share on other sites

FYI - TLayout - Beginner - How to place a control on the left side of a form 

2hrn7ye.png

unit Form1;

interface

uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application, SmartCL.Layout,
  SmartCL.Controls.Panel;

type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
    fLayout: TLayout;
    fPanel: TW3Panel;
  protected
    procedure InitializeForm; override;
    procedure InitializeObject; override;
    procedure Resize; override;
  end;

implementation

{ TForm1 }

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
  fLayout:= Layout.Left(fPanel);
end;

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  fPanel:= TW3Panel.create(self);
  fPanel.Width:= 50;
end;
 
procedure TForm1.Resize;
begin
  inherited;
  if Assigned(fLayout) then
  begin
   fLayout.Resize(self);
  end;
end;
 
initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.

 

Link to post
Share on other sites

FYI - TLayout - Beginner - How to place a control on the left side of a form w/ Configs

NOTE: Notice that instead of assigning the width of the control in the "InitializeObject" method, I instead used the Layout Config as a parameter when creating the layout in the "InitializeForm" method. Notice how the margins affect the panel size

2e2lbw6.png

unit Form1;

interface

uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application, SmartCL.Layout,
  SmartCL.Controls.Panel;

type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
    fLayout: TLayout;
    fPanel: TW3Panel;
  protected
    procedure InitializeForm; override;
    procedure InitializeObject; override;
    procedure Resize; override;
  end;

implementation

{ TForm1 }

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
end;

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  fPanel:= TW3Panel.create(self);
  fLayout:= Layout.Left(Layout.Width(50).Margins(10), fPanel);
end;
 
procedure TForm1.Resize;
begin
  inherited;
  if Assigned(fLayout) then
  begin
   fLayout.Resize(self);
  end;
end;
 
initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.

Link to post
Share on other sites

FYI - TLayout - Beginner - How to place a control on the right side of a form

10rppmx.png

unit Form1;

interface

uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application, SmartCL.Layout,
  SmartCL.Controls.Panel;

type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
    fLayout: TLayout;
    fPanel: TW3Panel;
  protected
    procedure InitializeForm; override;
    procedure InitializeObject; override;
    procedure Resize; override;
  end;

implementation

{ TForm1 }

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
  fLayout:= Layout.Right(fPanel);
end;

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  fPanel:= TW3Panel.create(self);
  fPanel.Width:= 50;
end;
 
procedure TForm1.Resize;
begin
  inherited;
  if Assigned(fLayout) then
  begin
   fLayout.Resize(self);
  end;
end;
 
initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.
Link to post
Share on other sites

FYI - TLayout - Beginner - How to place a control on the right side of a form w/ Configs

NOTE: Notice that instead of assigning the width of the control in the "InitializeObject" method, I instead used the Layout Objects configs in the  "Resize" method. Notice how the margins affect the panel size

2ajcetc.png

unit Form1;

interface

uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application, SmartCL.Layout,
  SmartCL.Controls.Panel;

type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
    fLayout: TLayout;
    fPanel: TW3Panel;
  protected
    procedure InitializeForm; override;
    procedure InitializeObject; override;
    procedure Resize; override;
  end;

implementation

{ TForm1 }

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
end;

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  fPanel:= TW3Panel.create(self);
  fLayout:= Layout.Right(Layout.Width(50).Margins(10), fPanel);
end;
 
procedure TForm1.Resize;
begin
  inherited;
  if Assigned(fLayout) then
  begin
   fLayout.Resize(self);
  end;
end;
 
initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.

 

Link to post
Share on other sites

FYI - TLayout - Beginner - How to place a control on the form and fill the entire client area of the form

16c02nd.png

unit Form1;

interface

uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application, SmartCL.Layout,
  SmartCL.Controls.Panel;

type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
    fLayout: TLayout;
    fPanel: TW3Panel;
  protected
    procedure InitializeForm; override;
    procedure InitializeObject; override;
    procedure Resize; override;
  end;

implementation

{ TForm1 }

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
end;

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  fPanel:= TW3Panel.create(self);
  fLayout:= Layout.Client(fPanel);
end;
 
procedure TForm1.Resize;
begin
  inherited;
  if Assigned(fLayout) then
  begin
   fLayout.Resize(self);
  end;
end;
 
initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.

 

Link to post
Share on other sites

FYI - TLayout - Beginner - How to place a control on the form and fill the entire client area of the form w/Configs

aepmyb.png

unit Form1;

interface

uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application, SmartCL.Layout,
  SmartCL.Controls.Panel;

type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
    fLayout: TLayout;
    fPanel: TW3Panel;
  protected
    procedure InitializeForm; override;
    procedure InitializeObject; override;
    procedure Resize; override;
  end;

implementation

{ TForm1 }

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
end;

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  fPanel:= TW3Panel.create(self);
  fLayout:= Layout.Client(Layout.Margins(10), fPanel);
end;
 
procedure TForm1.Resize;
begin
  inherited;
  if Assigned(fLayout) then
  begin
   fLayout.Resize(self);
  end;
end;
 
initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.
Link to post
Share on other sites

FYI - TLayout - Beginner - How to place multiple controls on the form in Header & Footer positions

333wcht.png

unit Form1;

interface

uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application, SmartCL.Layout,
  SmartCL.Controls.Panel;

type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
    fLayout: TLayout;
    fHeader: TW3Panel;
    fFooter: TW3Panel;
  protected
    procedure InitializeForm; override;
    procedure InitializeObject; override;
    procedure Resize; override;
  end;

implementation

{ TForm1 }

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
end;

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  fHeader:= TW3Panel.create(self);
  fFooter:= TW3Panel.create(self);
  fLayout:= Layout.Client(
                          [Layout.Top(Layout.Height(50).Margins(10), fHeader),
                          Layout.Bottom(Layout.Height(50).Margins(10), fFooter)]
                          );
end;
 
procedure TForm1.Resize;
begin
  inherited;
  if Assigned(fLayout) then
  begin
   fLayout.Resize(self);
  end;

  //fPanel.SetBounds(0,0,width,height);
end;
 
initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.
Link to post
Share on other sites

FYI - TLayout - Beginner - How to place multiple controls on the form in Left Bar & Right Bar positions

2ynhr9e.png

unit Form1;

interface

uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application, SmartCL.Layout,
  SmartCL.Controls.Panel;

type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
    fLayout: TLayout;
    fLeftBar: TW3Panel;
    fRightBar: TW3Panel;
  protected
    procedure InitializeForm; override;
    procedure InitializeObject; override;
    procedure Resize; override;
  end;

implementation

{ TForm1 }

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
end;

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  fLeftBar:= TW3Panel.create(self);
  fRightBar:= TW3Panel.create(self);

  fLayout:= Layout.Client(Layout.Margins(10),
                          [Layout.Left(Layout.Width(100), fLeftBar),
                          Layout.Right(Layout.Width(100), fRightBar)]
                          );
end;
 
procedure TForm1.Resize;
begin
  inherited;
  if Assigned(fLayout) then
  begin
   fLayout.Resize(self);
  end;
end;
 
initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.

 

Link to post
Share on other sites

FYI - TLayout - Beginner - How to place multiple controls on the form in Header , Footer,  Body  positions

jqjalf.png

unit Form1;

interface

uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application, SmartCL.Layout,
  SmartCL.Controls.Panel;

type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
    fLayout: TLayout;
    fHeader: TW3Panel;
    fColumn: TW3Panel;
    fFooter: TW3Panel;
  protected
    procedure InitializeForm; override;
    procedure InitializeObject; override;
    procedure Resize; override;
  end;

implementation

{ TForm1 }

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
end;

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  fHeader:= TW3Panel.create(self);
  fColumn:= TW3Panel.create(self);
  fFooter:= TW3Panel.create(self);
  fLayout:= Layout.Client(Layout.Margins(10).Spacing(10),
                         [Layout.Top(Layout.Height(50), fHeader),
                         Layout.Client(fColumn),
                         Layout.Bottom(Layout.Height(50),fFooter)]
                         );
end;
 
procedure TForm1.Resize;
begin
  inherited;
  if Assigned(fLayout) then
  begin
   fLayout.Resize(self);
  end;
end;
 
initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.

 

Link to post
Share on other sites

FYI - TLayout - Beginner - How to place multiple controls on the form in Header , Footer,  Body,  RightBar  positions

2d8rytk.png

unit Form1;

interface

uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application, SmartCL.Layout,
  SmartCL.Controls.Panel;

type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
    fLayout: TLayout;
    fHeader: TW3Panel;
    fRightBar: TW3Panel;
    fBody: TW3Panel;
    fFooter: TW3Panel;
  protected
    procedure InitializeForm; override;
    procedure InitializeObject; override;
    procedure Resize; override;
  end;

implementation

{ TForm1 }

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
end;

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  fHeader:= TW3Panel.create(self);
  fRightBar:= TW3Panel.create(self);
  fBody:= TW3Panel.create(self);
  fFooter:= TW3Panel.create(self);

  fLayout:= Layout.Client(Layout.Margins(10).Spacing(10),
                        [Layout.Top(Layout.Height(50), fHeader),
                         Layout.Client(Layout.Spacing(10),[Layout.Client(fBody),Layout.Right(Layout.Width(75), fRightBar)]),
                         Layout.Bottom(Layout.Height(50),fFooter)]
  );


end;
 
procedure TForm1.Resize;
begin
  inherited;
  if Assigned(fLayout) then
  begin
   fLayout.Resize(self);
  end;
end;
 
initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.

 

Link to post
Share on other sites
  • IElite unlocked this topic

You can also use the devices dimensions to calculate your control's size. e.g. below, I create the layout height based on 1/4 the size of the ClientHeight

procedure TForm1.Resize;
begin
  inherited;
  if Handle <> nil then
   fLayout:= Layout.Bottom(Layout.Height(ClientHeight Div 4).Margins(10), fPanel);
  if Assigned(fLayout) then
  begin
   fLayout.Resize(self);
  end;
end;

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...