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 1
Last updated at 9:39 pm UTC on 2 May 2018
Note:Formerly, this page had this contents (as referenced in the Blue Book): SimplePaintingProgram

 m := RectangleMorph new.
 m layoutPolicy: TableLayout new.
 m listDirection: #leftToRight.
 m hResizing: #shrinkWrap; vResizing: #shrinkWrap.
 m layoutInset: 20; cellInset: 10.
 4 timesRepeat:[ m addMorph: (RectangleMorph new color: (Color red)) ]. 
 m openInWorld.

MorphicLayoutExample1a_Screenshot_2015-10-31.png

Eddie Cottongim

Different values for layoutInset and cellInset.
 m := RectangleMorph new.
 m layoutPolicy: TableLayout new.
 m listDirection: #leftToRight.
 m hResizing: #shrinkWrap; vResizing: #shrinkWrap.
 m layoutInset: 2.
 m cellInset: 12.
 8 timesRepeat:[ m addMorph: (RectangleMorph new color: (Color blue)) ]. 
 m openInWorld.
TableLayout_With_8_cells.png


"vResizing: #shrinkWrap.
vResizing: #rigid (default)"

 m := RectangleMorph new.
 m layoutPolicy: TableLayout new.
 m listDirection: #leftToRight.
 m vResizing: #shrinkWrap.
 m wrapDirection: #topToBottom.
 m width: 200.
 m layoutInset: 2.
 m cellInset: 12.
 8 timesRepeat:[ m addMorph: (RectangleMorph new color: (Color orange)) ]. 
 m openInWorld.
TableLayout_with_hResizingRigid_vResizingShrinkWrap.png



The same example enlarged a bit and modeled after the example on the page AlignmentMorph.
m := RectangleMorph new.
m layoutPolicy: TableLayout new.
m listDirection: #leftToRight.  "If you omit this expression you get the default "
                                    "m listDirection: #topToBottom."
m hResizing: #shrinkWrap.
m vResizing: #shrinkWrap.

m addMorph: (EllipseMorph new extent: 40@40; color: Color red).
m addMorph: (EllipseMorph new extent: 50@50; color: Color yellow).
m addMorph: (EllipseMorph new extent: 60@60; color: Color green).
m addMorph: (EllipseMorph new extent: 70@70; color: Color blue).
m openInWorld.


MorphicLayoutExample1b_Screenshot from 2015-10-31.png

You can change anytime between:

m listDirection: #leftToRight.


and

m listDirection: #topToBottom.


Just evaluate the expressions with do-it.

MorphicLayoutExample1c_Screenshot from 2015-10-31.png

You may as well change attributes:

m borderWidth: 0
m color: Color transparent.
m layoutInset: 20; cellInset: 10.


Hannes Hirzel, January 2005

Next