TableLayout listDirection examples


	links to this page:

Last updated at 8:40 am UTC on 10 August 2020

The examples below show how the listDirection property (the primary direction) of a TableLayout object affects the layout.

1. listDirection: #leftToRight
2. listDirection: #topToBottom
3. listDirection: #rightToLeft
4. listDirection: #bottomToTop

Example 1: listDirection leftToRight

 | container |

 container := Morph new.
 container width: 3*50+20.
 container height: 3*50+20.
 container color: Color red.

 container layoutPolicy: TableLayout new.
 container layoutInset: 10.

 container listDirection: #leftToRight.

 container wrapCentering: #topLeft.
 container wrapDirection: #topToBottom.

 
 1 to: 9 do:  [:i |  cell := Morph new. 
                   cell height: 50. 
                   cell color: Color white. 
                   cell width: 50. 
                   cell borderWidth: 1.
                   cell addMorph: (StringMorph contents: i printString).
                   container addMorphBack: cell
                 ].

 container openInWorld.

Example 2: listDirection topToBottom

 | container |

 container := Morph new.
 container width: 3*50+20.
 container height: 3*50+20.
 container color: Color blue.

 container layoutPolicy: TableLayout new.
 container layoutInset: 10.

 container listDirection: #topToBottom.

 container wrapCentering: #topLeft.
 container wrapDirection: #topToBottom.

 
 1 to: 9 do:  [:i |  cell := Morph new. 
                   cell height: 50. 
                   cell color: Color yellow twiceLighter. 
                   cell width: 50. 
                   cell borderWidth: 1.
                   cell addMorph: (StringMorph contents: i printString).
                   container addMorphBack: cell
                 ].

 container openInWorld.

Example 3: listDirection rightToLeft

 | container |

 container := Morph new.
 container width: 3*50+20.
 container height: 3*50+20.
 container color: Color green twiceDarker.

 container layoutPolicy: TableLayout new.
 container layoutInset: 10.

 container listDirection: #rightToLeft.

 container wrapCentering: #topLeft.
 container wrapDirection: #topToBottom.

 
 1 to: 9 do:  [:i |  cell := Morph new. 
                   cell height: 50. 
                   cell color: Color white. 
                   cell width: 50. 
                   cell borderWidth: 1.
                   cell addMorph: (StringMorph contents: i printString).
                   container addMorphBack: cell
                 ].

 container openInWorld.

Example 4: listDirection bottomToTop

 | container |

 container := Morph new.
 container width: 3*50+20.
 container height: 3*50+20.
 container color: Color gray twiceLighter.

 container layoutPolicy: TableLayout new.
 container layoutInset: 10.

 container listDirection: #bottomToTop.

 container wrapCentering: #topLeft.
 container wrapDirection: #topToBottom.

 
 1 to: 9 do:  [:i |  cell := Morph new. 
                   cell height: 50. 
                   cell color: Color white. 
                   cell width: 50. 
                   cell borderWidth: 1.
                   cell addMorph: (StringMorph contents: i printString).
                   container addMorphBack: cell
                 ].

 container openInWorld.

All together

| slide container btn1 btn2 btn3 btn4 |

 slide := RectangleMorph new extent: 500@300.
 slide color: Color yellow.
 container := Morph new.
 container width: 3*50+20.
 container height: 3*50+20.
 container color: Color red.

 container layoutPolicy: TableLayout new.
 container layoutInset: 10.

 container listDirection: #leftToRight.

 container wrapCentering: #topLeft.
 container wrapDirection: #topToBottom.

 
 1 to: 9 do:  [:i |  cell := Morph new. 
                   cell height: 50. 
                   cell color: Color white. 
                   cell width: 50. 
                   cell borderWidth: 1.
                   cell addMorph: (StringMorph contents: i printString).
                   container addMorphBack: cell
                 ].

   btn1 := SimpleButtonMorph new.
   btn1 target: container.
   btn1 label: 'listDirection: #leftToRight'.
   btn1 actionSelector: #listDirection:.
   btn1 arguments: (Array with: #leftToRight).
   btn1 position: 250@50.


   btn2 := SimpleButtonMorph new.
   btn2 target: container.
   btn2 label: 'listDirection: #rightToLeft'.
   btn2 actionSelector: #listDirection:.
   btn2 arguments: (Array with: #rightToLeft).
   btn2 position: 250@100.

   btn3 := SimpleButtonMorph new.
   btn3 target: container.
   btn3 label: 'listDirection: #topToBottom'.
   btn3 actionSelector: #listDirection:.
   btn3 arguments: (Array with: #topToBottom).
   btn3 position: 250@150.

   btn4 := SimpleButtonMorph new.
   btn4 target: container.
   btn4 label: 'listDirection: #bottomToTop'.
   btn4 actionSelector: #listDirection:.
   btn4 arguments: (Array with: #bottomToTop).
   btn4 position: 250@200.

  container position: 50@50.
 
  slide addMorph: container.
  slide addMorph: btn1.
  slide addMorph: btn2.
  slide addMorph: btn3.
  slide addMorph: btn4.

 slide openInWorld.