Resize controls based on Layout dimensions?

Question

ok, i need to resize a control based on the layout dimensions. I also need it to resize when the layout dimensions change (e.g. turning device from profile to landscape)

It was my assumption that you just check the dimensions of device and adjust accordingly

e.g.

if ClientHeight > ClientWidth then
    fHeader.Height:= ClientHeight Div 6
   else
    fHeader.Height:= ClientHeight Div 8;

However, where is the best place to put this?

I have tried it in the Resize method before my layout resize and after my layout resize. It does not seem to work!

Well, it works on the initial activation of the form, but when the form is resize, it does not. While in the IDE, i even have to hit the RELOAD button to get it to work.

Below is an example with two components on the form. A TW3HeaderControl aligned to top of form, and a TW3ListBox aligned to client. I would like to adjust the height of the TW3HeaderControl based on whether or not it is in Profile or Landscape

e.g.

unit Form1;


interface


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


type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
    fLayout: TLayout;
    fHeader: TW3HeaderControl;
    fList: TW3ListBox;
  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.Client([Layout.Top(fHeader), Layout.Client(fList)]);
end;


procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  fHeader:= TW3HeaderControl.Create(self);
  fList:= TW3ListBox.Create(self);
end;


procedure TForm1.Resize;
begin
  inherited;
  if assigned(FLayout) then
  begin
   fLayout.Resize(self);
    if ClientHeight > ClientWidth then
    fHeader.Height:= ClientHeight Div 6
   else
    fHeader.Height:= ClientHeight Div 8;
  end;
end;


initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.

I even tried overriding the "FormActivated" and placing it there and calling the Resize.

What gives?

UPDATE!!!!!

instead of assigning Layout in the InitializeForm

e.g.

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
  fLayout:= Layout.Client([Layout.Top(Layout.Height(ClientHeight Div 6),fHeader), Layout.Client(fList)]);
end;

assigning it in the Resize method instead??

e.g.

procedure TForm1.Resize;
begin
  inherited;
   if ClientWidth > ClientHeight then
    fLayout:= Layout.Client([Layout.Top(Layout.Height(ClientHeight Div 6),fHeader), Layout.Client(fList)])
   else
    fLayout:= Layout.Client([Layout.Top(Layout.Height(ClientHeight Div 8),fHeader), Layout.Client(fList)]);
   fLayout.Resize(self);

end;

UPDATE # 2

and, if I add another control onto the form, then there is another issue :(

if I set the size as a static value it works great

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}


  fHeader:= TW3HeaderControl.Create(self);
  fHeader.Height:= 50;  //******************************
  fHeader.BackButton.Visible:= False;
  fHeader.Title.Caption:= 'Menu';
  fHeader.Title.AlignText:= taCenter;


  fFooter:= TW3HeaderControl.Create(self);
  fFooter.Height:= 50; //******************************
  fFooter.BackButton.Visible:= False;
  fFooter.Title.Caption:= 'Copyright (C) 2016';
  fFooter.Title.AlignText:= taCenter;


  fList:= TW3ListBox.Create(self);
end;

this works

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
  fLayout:= Layout.Client([Layout.Top(fHeader),
                           Layout.Bottom(fFooter),
                           Layout.Client(fList)]);
end;

However, if I set the heights dynamically at runtime based on dimensions, then it does not

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
  fLayout:= Layout.Client([Layout.Top(Layout.Height(ClientHeight Div 6), fHeader),
                           Layout.Bottom(Layout.Height(ClientHeight Div 6),fFooter),
                           Layout.Client(fList)]);
end;

score 3 · Answer 1 · answered Dec 29 '16 at 00:30

This works

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
  fLayout:= Layout.Client([Layout.Top(fHeader),
                           Layout.Bottom(fFooter),
                           Layout.Client(fList)]);
end;

score 3 · Accepted Answer · answered Dec 30 '16 at 11:21

There are a few rules imposed on us by the browser that, well, seem odd from an object pascal perspective. The difference between InitializeForm vs. InitializeObject is one of them. As are the oddities of "forms".

As John points out, InitializeForm is a good place. That method is called after the JS object is constructed and the DOM element has been injected into the object model. These two are not the same thing, which can be a bit confusing. Also, its up to the browser if an element is created when we call createElement() or after the constructor has finished.. Hence we had to introduce a couple of new procedures to deal with this.

You may want to investigate TApplication a bit closer. You will find the following: TApplication -> Display -> View. Forms are created inside the "view" container. Whenever orientation changes, or the size of the form, the fastest way to be notified is via the Application.Display.View.OnReSize() event.

Resize controls based on Layout dimensions?

2 Answers2