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.

Figure 23: 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.

Figure 24: 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.

Figure 25: 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.

Figure 26: 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.

Figure 27: 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.

Figure 28: TableLayout layoutInset:.

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

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

Figure 29: 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.

Figure 30: 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. 

Figure 31: TableLayout wrap.