Squeak
  links to this page:    
View this PageEdit this PageUploads to this PageHistory of this PageTop of the SwikiRecent ChangesSearch the SwikiHelp Guide
TableLayout
Last updated at 9:13 pm UTC on 14 August 2017
TableLayout supports laying submorph 'cells' in a table format - rows and columns, in contrast to LayoutFrame which provides simple proportional layout.
You set a primary direction for the layout with

The secondary direction is set by

Cells along the primary direction are 'centred' (another confusing usage, the text-editor phrase 'justify' might be more understandable) according to

'Centering' (or justifying, just as above) across the secondary direction is set by

Rows can be required to all be the same size with listSpacing: #equal. Using #none allows rows to have varying heights (remember this is all modified by the choice of primary direction)

The smallest and largest size for cells within the table can be set
Both accept a Number or Point.

Cell positioning within the container can be modified with

Inter-morph spacing
You can require some gutter space between morphs without needing to insert spacers


The way the receiver fits within its parent can be changed as well;

You can have a morph containing a number of submorphs where one or more is rigid in one direction or another, one or more is spaceFilling etc.

Morphic2340_2015-10-31.png

Try out -
 |r e s b |
r := RectangleMorph new.
r color: Color gray.
r position: 10@10.
r extent: 150@200.
r name: 'background'.
r openInWorld.

"OK, now set up our background so that we can put something inside"

r layoutPolicy: TableLayout new. "lay out contents as a table"
r listDirection: #topToBottom. "how we want to place the contents"
r listCentering: #topLeft. "start list at the top"
r wrapCentering: #center. "each item is in the center"

s := Morph new.
s layoutPolicy: TableLayout new. "lay out contents as a table"
s listDirection: #topToBottom. "how we want to place the contents"
s listCentering: #center. "start list at the top"
s wrapCentering: #center. "each item is in the center"
s hResizing: #spaceFill.
s color: Color blue twiceDarker.
s height: 32.
title := StringMorph new
		contents: 'foo';
		color: Color white.

r addMorph: s. "note that the new item goes at the top"
s addMorph: title.

b := RectangleMorph new.
b layoutPolicy: TableLayout new.
b listDirection: #leftToRight.
b listCentering: #topLeft.
b wrapCentering: #topLeft.
b vResizing: #spaceFill.
b hResizing: #spaceFill.
b color: Color red.
b layoutInset: 10@10. 
b cellInset:4@0.
r addMorphBack: b.

e1 :=  Morph new.
e1 width: 23.
e1 vResizing: #spaceFill.
e1 hResizing: #shrinkWrap.
e1 color: Color green.
b addMorphBack: e1.

e2 :=  RectangleMorph new.
e2 vResizing: #spaceFill.
e2 hResizing: #spaceFill.
e2 color: Color orange.
b addMorphBack: e2.

There are a number of other facilities needing explanation, too -
I invite you to work out what they do and how to explain that to the rest of us

Examples

Example of flow layout using TableLayout
How to lay out submorphs - example 5