links to this page:    Morphic for beginners How to lay out submorphs TableLayout TableLayout listDirection examples Active Essays

How was it constructed

Create a large Morph

 Morph new color: Color blue; openInHand

• Enlarge the blue morph by means of a halo.
• Open a workspace and execute

 ((PluggableTextMorph on: TextMorph new text: #text accept: #text:) extent: 300@400) openInHand.

• Embed the PluggableTextMorph in the blue rectangle.
• Paste the code below into it.
• Execute the code and embed the result on the left hand side of the blue Rectangle Morph.
• Bring up the halos. of the blue rectangle and choose the red halo.
• From 'debug' choose save morph in file
• Choose 'TableLayout-listCentering-demo-3' as label

Load TableLayout-listCentering-demo-3.morph. file in newer version of Squeak

• 3.2 .morph file was created in Squeak 3.2
• 3.8.1 - loads fine
• 3.10.2 - loads fine
• 4.4 - does NOT load
• 5.1 - does NOT load
• Squeak6.0alpha #17233 - does NOT load
• 5.2alpha #18051 - loads fine
• 5.3 #19435 - loads fine
• Squeak6.0alpha (more recent version) – not checked.

The code

 
"Parameters"
| slideExtent slideColor1 xLeft xRight yContent createSlideBlk slide container btn1 btn2 btnPanel 
|
"--------------------------------------------------------------------"
slideExtent := 420 @ 320.
slideColor1 := Color white.
"fontName := 'BitstreamVeraSans'."
"titleFontPointSize := 24."
xLeft := 20.
xRight := 140.
yContent := 80.
"--------------------------------------------------------------------"

"createSlideBlocka block is like a function definition assigned to an instance variable. 
The block created here takes two parameters
    aColor    
    aTitleString

To activate the block send the message #value:value to it. 

For example     
createSlideBlk value: Color yellow value: 'Presentations made easy'.

This will actually execute the code and thus build a slide morph which is a RectangleMorphwith a property #isSlide set to true.

The result of the block is the  object returned by the last statement.
In this case 'slide'."                       

"DEFINITION OF THE BLOCK"
createSlideBlk := [:aColor :aTitleString |                        
  |  titleTextMorph |                        
  slide := RectangleMorph new.                        
  slide extent: slideExtent.                  
  slide color: aColor.                        
  slide position: 0 @ 10.                        
  slide borderWidth: 0.                        
  slide setProperty: #isSlide toValue: true.                             

  titleTextMorph := TextMorph new.                       
  titleTextMorph contentsWrapped: aTitleString.               

  "NO setting of font size in this test"                       
  "titleTextMorph fontName: fontName pointSize: titleFontPointSize."                    
  titleTextMorph extent: slideExtent x @ 50.                        
  titleTextMorph position: 20 @ 20.                        
  slide addMorph: titleTextMorph.                        
  slide position: 0@20.                                           
].

"EXECUTING THE CODE IN THE BLOCK"
slide := createSlideBlk value: slideColor1 
                          value: 'TableLayout listCentering'. 

 container := Morph new.        
 container layoutPolicy: TableLayout new.        
 container listDirection: #bottomToTop.        
 container hResizing: #rigid.
 container height: 240.        
 container hResizing: #shrinkWrap.        
 container layoutInset: 10.        
 container cellInset: 2.        
 container listCentering: #justified.        
 container addMorph: (RectangleMorph new color: Color red).        
 container addMorph: (RectangleMorph new color: Color yellow; width: 80).      
 container addMorph: (RectangleMorph new color: Color green). 

   
btn1 := SimpleButtonMorph new.        
btn1 hResizing: #spaceFill.        
btn1 target: container.        
btn1 label: 'listCentering: #center'.        
btn1 actionSelector: #listCentering:.        
btn1 arguments: (Array with: #center).        
btn2 := SimpleButtonMorph new.        
btn2 hResizing: #spaceFill.        
btn2 target: container.        
btn2 label: 'listCentering: #justified'.        
btn2 actionSelector: #listCentering:.        
btn2 arguments: (Array with: #justified).        

btnPanel := RectangleMorph new.        
btnPanel height: 220.        
btnPanel color: slideColor1.        
btnPanel layoutPolicy: TableLayout new.        
btnPanel listDirection: #topToBottom.        
btnPanel width: 220.        
btnPanel borderWidth: 0.        
btnPanel listCentering: #justified.        
btnPanel layoutInset: 0.        
btnPanel cellInset: 0.        
btnPanel addMorphBack: btn1.        
btnPanel addMorphBack: btn2.        

container position: xLeft @ yContent.        
slide addMorph: container.        
btnPanel position: xRight @ yContent.        
slide addMorph: btnPanel.        
slide openInWorld