links to this page:    How to lay out submorphs TableLayout No class LayoutManager but LayoutPolicy

• page morph
• column morph has several rows
• row uses the table layout policy
• cell in the row to do alignment

"http://wiki.squeak.org/squeak/2885"
font := StrikeFont familyName: 'Bitmap DejaVu Sans' size: 36.
bgColor := Color white.
bgColor2 := Color yellow twiceLighter.

"colors for multiplication groups"
bgColorArr := {Color green thriceLighter . 
    Color green thriceLighter .
    Color yellow twiceLighter.
    Color green twiceLighter.
    Color blue thriceLighter.
    Color yellow twiceLighter.
    Color brown thriceLighter.
    Color brown thriceLighter .
    Color yellow twiceLighter.
    Color blue thriceLighter}.

fontColor := Color black.
widthTwoDigits := 40.
widthTwoDigitsNarrowed := 35.
widthTwoDigitsWidened := 50.
widthSign := 27.
rowWidth := 180.
rowHeight := 50.
pageCellsInset := 8@8.
pageExtent:= 1180@500.



page := Morph new.
page layoutPolicy: TableLayout new.
page listDirection: #leftToRight.
page wrapDirection: #topToBottom.
page hResizing: #shrinkWrap.
page vResizing:  #shrinkWrap.
page color: bgColor.
page extent: pageExtent.
page cellInset: pageCellsInset.


1 to: 10 do: [ :mult |

column := Morph new.
column layoutPolicy: TableLayout new.
column listDirection: #topToBottom.
column hResizing: #shrinkWrap.
column vResizing:  #shrinkWrap.
column color: (bgColorArr at: mult).
column layoutInset: 10@10.

1 to: 10 do: [:n | 

row := Morph new.
row layoutPolicy: TableLayout new.
row listDirection: #leftToRight.
row hResizing: #rigid.
row vResizing:  #shrinkWrap.
row listCentering: #justified.
row color: bgColor.
row extent: rowWidth@rowHeight.

rCell := Morph new.
rCell extent: widthTwoDigits@rowHeight.
rCell layoutPolicy: TableLayout new.
rCell listDirection: #rightToLeft.
rCell vResizing: #shrinkWrap.
rCell hResizing:  #rigid.
rCell color: bgColor.

label := n printString.
s := (StringMorph contents:  label font: font) color: fontColor.
rCell addMorph: s.
row addMorphBack: rCell.


cCell := Morph new.
cCell extent: widthSign@50.
cCell layoutPolicy: TableLayout new.
rCell listDirection: #rightToLeft.
cCell listCentering: #center.
cCell vResizing: #shrinkWrap.
cCell hResizing:  #rigid.
cCell color: bgColor.


label := ' x '.
s := (StringMorph contents:  label font: font) color: fontColor.
cCell addMorph: s.
row addMorphBack: cCell.


rCell := Morph new.
rCell extent: widthTwoDigitsNarrowed@rowHeight.
rCell layoutPolicy: TableLayout new.
rCell listDirection: #rightToLeft.
rCell vResizing: #shrinkWrap.
rCell hResizing:  #shrinkWrap.
rCell color: bgColor.

label := mult printString.
s := (StringMorph contents:  label font: font) color: fontColor.
rCell addMorph: s.
row addMorphBack: rCell.


cCell := Morph new.
cCell extent: widthSign@rowHeight.
cCell layoutPolicy: TableLayout new.
cCell listCentering: #center.
cCell vResizing: #shrinkWrap.
cCell hResizing:  #rigid.
cCell color: bgColor.


label := ' = '.
s := (StringMorph contents:  label
  font: (StrikeFont familyName: 'Bitmap DejaVu Sans' size: 36))
  color: fontColor.
cCell addMorph: s.
row addMorphBack: cCell.


rCell := Morph new.
rCell extent: widthTwoDigitsWidened@rowHeight.
rCell layoutPolicy: TableLayout new.
rCell listDirection: #rightToLeft.
rCell vResizing: #shrinkWrap.
rCell hResizing:  #rigid.
rCell color: bgColor.

label := (n * mult) printString.
s := (StringMorph contents:  label
  font: (StrikeFont familyName: 'Bitmap DejaVu Sans' size: 36))
  color: fontColor.
rCell addMorph: s.
row addMorphBack: rCell.
column addMorphBack: row.
page addMorphBack: column.
]].
page openInHand