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
Last updated at 10:59 am UTC on 30 August 2016
The previous example enlarged by using TextMorphs put into Morph instances. This shows how a slide morph may be built. The earlier example includes a bullet list.


August 2016, Squeak 5.1

r := AlignmentMorph newColumn openInWorld.
r color: Color blue muchLighter. "or twiceLighter, or slightlyDarker, or..."
r position: 10@10.
r extent: 500@360.
r name: 'background2'.

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

r addMorphBack: (AlignmentMorph newSpacer: Color white).

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

r addMorphBack: (AlignmentMorph newSpacer: Color white).

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

r addMorphBack: (AlignmentMorph newSpacer: Color white).

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

r addMorphBack: (AlignmentMorph newSpacer: Color white).



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)