Squeak
  links to this page:    
View this PageEdit this PageUploads to this PageHistory of this PageTop of the SwikiRecent ChangesSearch the SwikiHelp Guide
How to lay out submorphs - example 3 -- column
Last updated at 5:22 pm UTC on 18 November 2020
This example extends the previous one by adding TextMorphs objects as submorphs to a Morph object.

It is shown how a slide morph may be built – a column containing rows as submorphs.

The Squeak 3.6 example includes a bullet list.

Squeak 5.3

Morph_with_TableLayout_policy_producing_a_column.png
 color := Color blue muchLighter. "or twiceLighter, or slightlyDarker, or...".
 rowWidth := 480.
 rowHeight := 40.
  "Create a container morph called col which acts as a column 
   controlling the layout of the submorphs"
  col := Morph new.
  col layoutPolicy: TableLayout new.
  col color: color.
  col position: 10@10.
  col extent: 500@360.  
 "note that later one the shrinkwrap property is set. The col morph will be 
 resized based on the extent of the submorphs"
  col name: 'background1'.
  col listDirection: #topToBottom.
  col hResizing: #shrinkWrap.
  col vResizing:  #shrinkWrap.
 col openInWorld.
 
 
 row := Morph new extent: rowWidth@rowHeight; color: Color red twiceLighter.
 col addMorphBack: row.
 
 row := Morph new extent: rowWidth@rowHeight; color: Color yellow twiceLighter.
 col addMorphBack: row.
 
 row := Morph new extent: rowWidth@rowHeight; color: Color green twiceLighter.
 col addMorphBack: row.
 
 row := Morph new extent: rowWidth@rowHeight; color: Color white.
 col addMorphBack: row.
 
 col cellInset: 0@2.
 col layoutInset: 4@4.
 col exportAsPNGNamed: '../../../Morph_with_TableLayout_policy_producing_a_column.png'



 color := Color blue muchLighter. "or twiceLighter, or slightlyDarker, or...".
 "Creating a container morph called col which acts as a column controlling the layout of the submorphs"
 col := Morph new.
 col layoutPolicy: TableLayout new.
 col color: color.
 col position: 10@10.
 col extent: 500@360.  "note that later one the shrinkwrap property is set. The col morph will be resized based on the extent of the submorphs"
 col name: 'background1'.
 col listDirection: #topToBottom.
 col hResizing: #shrinkWrap.
 col vResizing:  #shrinkWrap.

row :=  (TTSampleStringMorph new initializeToStandAlone; 
        string: 'The title'; color: Color white) openInWorld
col addMorphBack: row.

col addMorphBack: (Morph new color: color). "to add space"


row := (TTSampleStringMorph new initializeToStandAlone; 
        string: 'a line of text ...'; color: Color yellow) openInWorld.

col addMorphBack: row.

col addMorphBack: (Morph new color: color). "to add space"

col addMorphBack: ((TTSampleStringMorph new
                    initializeToStandAlone; string: 'a b c d e f g'; color: Color 
                    red) openInWorld).

col addMorphBack: (Morph new color: color). "to add space"

col addMorphBack: ((TTSampleStringMorph new
initializeToStandAlone; string: '...     ...'; color: Color 
blue) openInWorld).

col addMorphBack: (Morph new color: color). "to add space"
col openInWorld


Note that openInWorld actually only needs to be sent in the last code line if the code is executed at once.

February 2004, Squeak 3.6

"In class code you'd probably openInWorld just the owning morph
after setting everything up, however, in a worksheet it's
better to openInWorld everything to see the effects of each command. Don't worry if it starts out messy: the code can fix that!"

r := RectangleMorph new openInWorld.
r color: Color blue twiceLighter. "or muchLighter, or slightlyDarker, or..."
r position: 10@10.
r extent: 150@200.
r name: 'background2'.

"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: #topLeft.
r hResizing: #rigid.

r addMorphBack: ((TTSampleStringMorph new
initializeToStandAlone; string: 'Change to title'; color: Color 
white) openInWorld).

"bullet by Ned Konz"
bullet := SimpleButtonMorph new openInWorld.
bullet label: (Character value: 165) asString.
bullet color: Color blue.

item1 := Morph new openInWorld.
item1 layoutPolicy: TableLayout new.
item1 cellPositioning: #topLeft.
item1 cellInset: 4.
item1 color: Color blue twiceLighter twiceLighter.
item1 listDirection: #leftToRight.
item1 addMorph: bullet.
item1 hResizing: #spaceFill.
item1 vResizing: #shrinkWrap.

t1 := TextMorph new openInWorld.
t1 layoutPolicy: TableLayout new.
t1 hResizing: #spaceFill.
t1 vResizing: #shrinkWrap.
t1 beAllFont: ((TextStyle default fontOfSize: 36) emphasized: 1).
t1 contentsWrapped: 'First list item - aTextMorph'.
t1 autoFit: true.
t1 width: 400.
item1 addMorphBack: t1.
r addMorphBack: item1.
item1 layoutChanged.

"Now lets add a second item..."

item2 := Morph new openInWorld.
item2 layoutPolicy: TableLayout new.
item2 cellPositioning: #topLeft.
item2 cellInset: 4.
item2 color: Color blue twiceLighter twiceLighter.
item2 listDirection: #leftToRight.
item2 addMorph: bullet duplicate.
item2 hResizing: #spaceFill.
item2 vResizing: #shrinkWrap.

t2 := TextMorph new openInWorld.
t2 layoutPolicy: TableLayout new.
t2 hResizing: #spaceFill.
t2 vResizing: #shrinkWrap.
t2 beAllFont: ((TextStyle default fontOfSize: 36) emphasized: 1).
t2 borderWidth: 1.
t2 color: Color blue twiceDarker.
t2 contentsWrapped: 'Second list item - text is editable; click and add text. The box will grow'.
t2 autoFit: true.
item2 addMorphBack: t2.
r addMorphBack: item2.

"and a button bar ..."

bbar := Morph new openInWorld.
bbar layoutPolicy: TableLayout new.
bbar cellPositioning: #topLeft.
bbar cellInset: 4.
bbar color: Color blue twiceLighter.
bbar listDirection: #leftToRight.
bbar hResizing: #shrinkWrap.
bbar vResizing: #shrinkWrap.

b := SimpleButtonMorph new openInWorld.
b color: Color yellow;
label: 'remove button bar';
target: bbar;
actionSelector: #delete;
setBalloonText: 'click to remove the button bar'.
bbar addMorph: b.
r addMorph: bbar.

"the code that adds another bullet item:"

block := [ :r2 |
item := Morph new.
item layoutPolicy: TableLayout new.
item cellPositioning: #topLeft.
item cellInset: 4.
item color: Color blue twiceLighter twiceLighter.
item listDirection: #leftToRight.
item addMorph: bullet duplicate.
item hResizing: #spaceFill.
item vResizing: #shrinkWrap.
t := TextMorph new.
t layoutPolicy: TableLayout new.
t hResizing: #spaceFill.
t vResizing: #shrinkWrap.
t beAllFont: ((TextStyle default fontOfSize: 36) emphasized: 1).
t contentsWrapped: 'A list item - aTextMorph'.
t autoFit: true.
t width: 400.
item addMorphBack: t.
r2 addMorphBack: item.
].

b := SimpleButtonMorph new openInWorld.
b color: Color yellow;
label: 'add other item';
setBalloonText: 'click to add another bullet list item'.
bbar addMorph: b.
b target: block.
b actionSelector: #value:.
b arguments: (Array with: b owner owner).
r addMorph: bbar.

b := SimpleButtonMorph new openInWorld.
b color: Color yellow;
label: 'X';
setBalloonText: 'click to delete bullet list completely'.
bbar addMorph: b.
b target: r.
b actionSelector: #delete.
r addMorph: bbar.

"now clean it up"

r cellInset: 3@5. "controls distance between content elements"

r hResizing: #shrinkWrap. "try it and see!"
r layoutInset: 4@8. "that was a bit too cramped"
r vResizing: #shrinkWrap. "Now we are done"
item1 layoutChanged.
item2 layoutChanged.



Hannes Hirzel, March 2002
Kurt Thams, February 2004 (updated to work with Squeak 3.6)