Pages

Thursday, May 17, 2012

Laying out Smart applications with Layout Manager [2]

The second layout manager demo builds on the first one.

There’s an edit box and two small buttons right to it. A large button lies under all three of them. At the bottom of the screen is a status bar and all the rest is taken by a memo control.

image

The outer layout again fills all of the form (Layout.Client) and has Margins and Spacing set to 3.

Inside are two Top layouts, a Client layout and a Bottom layout.

  FLayout := Layout.Client(Layout.Margins(3).Spacing(3), [
Layout.Top([
Layout.Client(Layout.Margins(0, 0, 3, 0), Edit1),
Layout.Right(Layout.Spacing(3), [B1, B2])
]),
Layout.Top(Button1),
Layout.Client(Memo1),
Layout.Bottom(StatusBar1)
]);

In the topmost Top layout, B1 and B2 (buttons) are pushed Right with Spacing 3 and Edit1 takes rest of the space. Margins(0, 0, 3, 0) call makes sure that there are 3 pixels of empty space right to the Edit1.

The result (in Chrome):

image

3 comments:

  1. I do a test. i make B1 and B2 with height some pixels greater than Edit1.
    Height Edit1 = 24 and Height B1 and B2 = 32

    Then i make on TForm1.InitializeObject;

    FLayout := Layout.Client(Layout.Margins(3).Spacing(3), [
    Layout.Top( [
    Layout.Client(Layout.Margins(0, 0, 3, 0), Edit1),
    Layout.Right(Layout.Spacing(3).Margins(0, 0, 0, 3), [B1, B2])
    ]),
    Layout.Top(Button1),
    Layout.Client(Memo1),
    Layout.Bottom(StatusBar1)
    ]);

    why LayoutTop that have Edit1, B1, and B2 dont change your height to 32?
    or
    why LayoutRight that have the 2 buttons, dont change the height of buttons? (look that i have defined the margins to Layout.Spacing(3).Margins(0, 0, 0, 3)

    Thanks

    ReplyDelete
    Replies
    1. Because the Top/Bottom layouts resize only in horizontal direction and Left/Right layouts resize only in vertical direction. A layout also adapts to the largest dimension of a hosted component if there is no other way to determine the dimension.

      The Right layout adapts to B1/B2 buttons and assumes height 32. Top layout which hosts this Right layout then adapts to this height but doesn't resize the Edit1 control.

      You can change your Right layout to enforce the proper height:

      Layout.Right(Layout.Spacing(3).Height(Edit1.Height), [B1, B2])

      Delete
  2. I would like that The Right layout adapts to B1/B2, and for consequence Top layout adapts to this new height (32), i know that Edit1 will to have heigh = 24 but the RightLayout should be have the greater height of your childlayouts

    ReplyDelete