links to this page:    How to lay out submorphs - example 1 How to lay out submorphs - example 2 TwoWayScrollPane How to lay out submorphs - example 3 -- column Table with a fixed number of rows and columns How to lay out submorphs - example 5 - bar chart How to lay out submorphs - example 4 (ProportionalLayout and TableLayout) AlignmentMorph More Morphic Tutorials A4 and A3 sheets in Morphic The AlignmentMorph may be replaced by any Morph class How to lay out submorphs LayoutPolicy TableLayoutExample with 100 squares TableLayoutExample with 100 squares - v2 TableLayout listDirection examples Layout of a simple table (cellInset) TableLayout listCentering demo (Squeak 3.2 and later) How to lay out submorphs - example 0 - centered submorph CSS3 No class LayoutManager but LayoutPolicy LayoutFrame Swiki Page List Layout in Cuis example7: flow layout implemented with a TableLayout Recipe: Create a window with scrollable contents - example 4 Example - aMorph addMorph: anotherMorph (no layout and TableLayout) AlignmentMorph newRow ListOfClassesInSqueak5dot1 PreferenceWizardMorph ListOfClassesInSqueak5dot3

• listDirection:
  • leftToRight
  • rightToLeft
  • topToBottom
  • bottomToTop

• wrapDirection: describes the direction along which a list-like layout should be wrapped. This direction must be orthogonal to the list direction, that is if listDirection is #leftToRight or #rightToLeft then wrapDirection must be #topToBottom or #bottomToTop and vice versa. Possible values are:
  • leftToRight
  • rightToLeft
  • topToBottom
  • bottomToTop
  • none (can make for very odd results, typically no wrapping at all)

• listCentering:
  • topLeft - start at primary direction origin and work away; gets confusing if your list direction is rightToLeft
  • bottomRight -start at end of primary direction and work towards origin
  • center - center the packed column in the middle of primary direction
  • justified - insert extra space inbetween rows/columns, spreading them out evenly

• wrapCentering:
  • topLeft - center at start of secondary direction
  • bottomRight - center at end of secondary direction
  • center - center in the middle of secondary direction
  • justified - insert extra space inbetween rows/columns

• minCellSize:
• maxCellSize:

• cellPositioning:
  • topLeft
  • topRight
  • bottomLeft
  • bottomRight
  • topCenter
  • leftCenter
  • rightCenter
  • bottomCenter
  • center

• layoutInset: provides a gutter from the edge of the receiver to the outer bounds of where submorphs will go. The arg can be a Number, Point or Rectangle
• cellInset: which will leave a border around each cell; again, a Number, Point or Rectangle works.
• spaceFillWeight: - you can add importance to a morph that is spaceFilling so it gets more share of the spare room being spread around. Arg is a Number that is used in each spaceFilling direction.

• hResizing:
• vResizing
  • rigid - the height/width is fixed and set by directly using height: or width:
  • shrinkWrap - the morph will shrink to fit as tightly as possible around all its submorphs
  • spaceFill - the morph will expand to fill as much space as required in its parent morph.

| container side cell |

side := 320.
 container := Morph new.
 container width: side.
 container height: side * (4/3) * (4/3).
 container color: Color white.

 container layoutPolicy: TableLayout new.
 container listDirection: #leftToRight.
 container wrapCentering: #topLeft.
 container wrapDirection: #topToBottom.
 
 1 to: 12 do:  [:i |  cell := Morph new. 
                   cell height: (side/3) *(4/3).
                   cell color: Color random twiceLighter twiceLighter twiceLighter. 
                   cell width: (side/3) . 
                   cell borderWidth: 10.
                   cell borderColor: Color white.
                   container addMorphBack: cell
                 ].

container openInWorld.

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

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.

• cellSpacing: - the arg has to be one of-
  • globalRect
  • globalSquare
  • localRect
  • localSquare
  • none

• disableTableLayout:
• rubberBandCells: - look at the implementation of it and work it out...

Change from Squeak 5.2 to 5.3 – #cellInset: / #cellGap:

Examples

TableLayout and CSS Flexbox layout