Aliaksei Syrel

Brick for Pharo | Part III - Flexible layouts

Feb 202015

In this tutorial I will show how to create a basic flexible layouts using Brick. To do it you just need to know a few methods:

  • hSpaceFill: aNumber - width fills aNumber of percents of available space
  • hSpaceFill - width fills all available space
  • vSpaceFill: aNumber - height fills aNumber of percents of available space
  • vSpaceFill - height fills all available space
  • useHorizontalLinearLayout - elements are positioned horizontally in a line
  • useVerticalLinearLayout - elements are positioned vertically in a line

Having that hSpaceFill and vSpaceFill are just aliases for corresponding hSpaceFill: 100 and vSpaceFill: 100 the amount is reduced by a third. The first letter in message names stands for horizontal (h) or vertical (v). It also means on what kind of dimension it is applied - width (h) or height (v). Example below explains how to create the following layout:

undefined

First of all let's create a red Brick. Because both width and height should be equal to the half of parent's available space I send hSpaceFill: and vSpaceFill to the GLMBrick object with an Integer argument 50:

redBrick := GLMBrick new
   "my width is 50% of my parent"
hSpaceFill: 50; "my height is 50% of my parent" vSpaceFill: 50; "sets my colour" color: Color lightRed.

The same applies to the yellow Brick:

yellowBrick := GLMBrick new
   "my width is 50% of my parent"
hSpaceFill: 50; "my height is 50% of my parent" vSpaceFill: 50; "sets my colour" color: Color lightYellow.

And finally we create our root Brick to hold red and yellow ones:

GLMBrick new
"my width and height are 300px" extent: 300@300;
"setting colour" color: Color veryVeryLightGray;
"and adding bricks as my direct children" addAllBricks: { redBrick . yellowBrick }; yourself

By default layout of all bricks is horizontal linear. But what if I want to reposition bricks in layout above vertically? The only thing to do is to change layout of root brick manually to vertical. It can be done sending useVerticalLinearLayout to the root:

GLMBrick new
useVerticalLinearLayout;
"my width and height are 300px" extent: 300@300;
"setting colour" color: Color veryVeryLightGray;

"and adding bricks as my direct children" addAllBricks: { redBrick . yellowBrick }; yourself

The resulting layout will look as follows:

undefined

 

In next tutorial I will describe how to create shrinking layouts using Brick