Logo-small

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.

Table layout

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.

Horizontal table layout

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.

Table layout, fill horizontal space

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.

Table layout, vertical space fill

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.

Table layout, vertical shrink wrap

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.

TableLayout layoutInset:

To have a space between contained elements, use cellInset:.

container 
layoutPolicy: TableLayout new;
hResizing: #shrinkWrap;
vResizing: #shrinkWrap;
cellInset: 10.

TableLayout cellInset:

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.

Container with transparent color

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.

TableLayout wrap

Add a Note

Licensed under Creative Commons BY-NC-SA | Published using Pier |