3.7.1.3 Table Layout
StandardWindow layout defaults to proportional. You can check it by evaluating:
StandardWindow new layoutPolicy
which answers a ProportionalLayout
object.
TableLayout policy is used to align Morphs like cells in a row or in a column (it's not a grid though).
The following example put several Morphs in a container which has a TableLayout policy:
window := StandardWindow labelled: 'Layout'.
window
addMorph: (container := Morph new)
frame: (0@0 corner: 1@1).
container layoutPolicy: TableLayout new.
#(red yellow green) do: [:colorSelector|
aColor := Color perform: colorSelector.
aMorph := Morph new color: aColor.
container addMorph: aMorph.].
window openInWorld.
We do not set the TableLayout policy to SystemWindow as title bar and buttons will not be aligned anymore with the top of window.
Here the Morphs are put from top to bottom. We can change the direction using TableLayout>>listDirection:
message:
window := StandardWindow labelled: 'Layout'.
window
addMorph: (container := Morph new)
frame: (0@0 corner: 1@1).
container
layoutPolicy: TableLayout new;
listDirection: #leftToRight.
#(red yellow green) do: [:colorSelector|
aColor := Color perform: colorSelector.
aMorph := Morph new color: aColor.
container addMorph: aMorph.].
window openInWorld.
Possible values are:
- #leftToRight
- #rightToLeft
- #topToBottom
- #bottomToTop
indicating the direction in which Morphs are added.
We can specify that embedded Morphs fill all space available using Morph hResizing:
amd vResizing:
messages passing #spaceFill
symbol.
window := StandardWindow labelled: 'Layout'.
window
addMorph: (container := Morph new)
frame: (0@0 corner: 1@1).
container
layoutPolicy: TableLayout new;
listDirection: #leftToRight.
#(red yellow green) do: [:colorSelector|
aColor := Color perform: colorSelector.
aMorph := Morph new
color: aColor;
hResizing: #spaceFill.
container addMorph: aMorph.].
window openInWorld.
So here the horizontal space is filled even when you resize the window. To fill vertically, change to:
aMorph := Morph new
color: aColor;
vResizing: #spaceFill.
When space is not filled, you can specify that the container adapts its size to the elements it contains. Pass #shrinkWrap
symbol to vResizing:
or hResizing:
messages.
window := StandardWindow labelled: 'Layout'.
window
addMorph: (container := Morph new)
frame: (0@0 corner: 1@1).
container
layoutPolicy: TableLayout new;
listDirection: #leftToRight;
vResizing: #shrinkWrap.
#(red yellow green) do: [:colorSelector|
aColor := Color perform: colorSelector.
aMorph := Morph new color: aColor.
container addMorph: aMorph.].
window openInWorld.
You can set a minimum space between the content of the container and its border, like the CSS padding property, using layoutInset:
message and passing the size as a number of pixels.
container
layoutPolicy: TableLayout new;
hResizing: #shrinkWrap;
vResizing: #shrinkWrap;
layoutInset: 20.
To have a space between contained elements, use cellInset:
.
container
layoutPolicy: TableLayout new;
hResizing: #shrinkWrap;
vResizing: #shrinkWrap;
cellInset: 10.
Note you can set a transparent color for the container so users don't see it:
container
layoutPolicy: TableLayout new;
hResizing: #shrinkWrap;
vResizing: #shrinkWrap;
cellInset: 15;
layoutInset: 30;
color: Color transparent.
To tell TableLayout to wrap its content when resized, use message wrapDirection:
which accepts the same arguments as listDirection:
window := StandardWindow labelled: 'Layout'.
window
addMorph: (container := Morph new)
frame: (0@0 corner: 1@1).
container
layoutPolicy: TableLayout new;
cellInset: 15;
color: Color transparent;
listDirection: #leftToRight;
wrapDirection: #leftToRight.
#(red yellow green cyan magenta blue) do: [:colorSelector|
aColor := Color perform: colorSelector.
aMorph := Morph new color: aColor.
container addMorph: aMorph.].
window openInWorld.