[Newbies] Morphic layout: Proportional centering of cells

Thiede, Christoph Christoph.Thiede at student.hpi.uni-potsdam.de
Sun Sep 8 18:53:04 UTC 2019

Thanks for your efforts! Based on your example, I can solve the problem on an even simpler way, using a ProportionalLayout:

   "Just shows a resizable table where each cell contains a Morph, centered into it."
  |out cm1 cm2 sm1 sm2 m|

   "get a picture from the web"
   out := HTTPSocket httpGif:  'https://euriscom.it/data/squeak-ja.gif'.

   "container for picture1"
   cm1 := Morph new.
   cm1 changeTableLayout.
   cm1 listCentering: #center.
   cm1 wrapCentering: #center.
   cm1 color: (Color transparent ).
   cm1 width: 220; height: 220.
   cm1 position: 120 at 120.

   sm1 := SketchMorph new.
   sm1 form: out.
   sm1 width: 200.
   sm1 height: 200.
   sm1 position: 600 at 300.
   cm1 addMorph: sm1.

   "container for picture2"
   cm2 := Morph new.
   cm2 changeTableLayout.
   cm2 listCentering: #center.
   cm2 wrapCentering: #center.
   cm2 color: (Color transparent ).
   cm2 width: 220; height: 220.
   cm2 position: 220 at 220.

   sm2 := SketchMorph new.
   sm2 form: (out deepCopy).
   sm2 width: 200.
   sm2 height: 200.
   sm2 position: 300 at 300.
   cm2 addMorph: sm2.

   "Make the big container frame"
   m := RectangleMorph new.
   m extent: 600 at 600; position: 100 at 100.
   m color: (Color green) darker darker darker.

   "extension of containers"
   m layoutPolicy: ProportionalLayout new.
   m addMorph: cm1 fullFrame: (LayoutFrame fractions: (0 @ 0 corner: 1 @ (1 / 2))).
   m addMorph: cm2 fullFrame: (LayoutFrame fractions: (0 @ (1 / 2) corner: 1 @ 1)).

   m openInWorld.

Copy it into clipboard, select all of your test1 method and press <cmd>C (uppercase c) to view the differences.

Will work as long as there is enough space for both SketchMorphs. My actual question was rather: Does Morphic support any way to aim this result without using two auxiliary morphs? Something like a ProportionalCenteredLayout?



Von: Nicola Mingotti <nmingotti at gmail.com>
Gesendet: Sonntag, 8. September 2019 11:33:08
An: Thiede, Christoph; A friendly place to get answers to even the most basic questions about Squeak.
Betreff: Re: AW: [Newbies] Morphic layout: Proportional centering of cells

ook, this is what i did to solve your problem.

I defined a class CenteringMorph. It is simply a rectangle which has a 'son' element, it  keeps the 'son' always in its center.

Then, you put  CenteringMorph instances in the TableLayout, and let them expand to eat all the available space.

The class CenteringMorph is defined in this Package:

Look in the CenteringMorph class documentation to see how to run the example.


On 9/7/19 12:35 AM, Thiede, Christoph wrote:

Thank you for your answer.

Actually, I chose TextMorphs as an example for a non-scalable morph. It is interesting to hear that SimpleButtons center themselves, but how could I achieve the same for, let me say, two ImageMorphs?

[cid:part2.32DEF195.251BC561 at gmail.com]



Von: Nicola Mingotti <nmingotti at gmail.com><mailto:nmingotti at gmail.com>
Gesendet: Samstag, 7. September 2019 00:24:16
An: A friendly place to get answers to even the most basic questions about Squeak.; Thiede, Christoph
Betreff: Re: [Newbies] Morphic layout: Proportional centering of cells

I guess you are looking from something like this:

note: the ButtonMorph is the only one that by default put the
text in center of its geometry. StringM and TextM do not.


m := RectangleMorph new.
m openInWorld.
m extent: 300 at 300; position: 100 at 100.

m layoutPolicy: TableLayout new.
m listDirection: #topToBottom.   "default, place elements as rows in a table."
m listCentering: #topLeft.
m layoutInset: 5.   "space to container morph."
m cellInset: 5 at 5. "Space between table cells."
m hResizing: #spaceFill.
m vResizing: #spaceFill.
m color: (Color yellow darker darker darker).

t1 := SimpleButtonMorph new.
t1 openInWorld.
t1 color: ((Color green) lighter lighter lighter) .
t1 borderColor: (Color black).
t1 borderWidth: 2.
t1 hResizing: #spaceFill.
t1 vResizing: #spaceFill.
m addMorphBack: t1.

t2 := SimpleButtonMorph new.
t2 openInWorld.
t2 color: ((Color yellow) lighter lighter lighter) .
t2 borderColor: (Color black).
t2 borderWidth: 2.
t2 hResizing: #spaceFill.
t2 vResizing: #spaceFill.
m addMorphBack: t2.


On 9/6/19 6:22 AM, Thiede, Christoph wrote:


I am probably not seeing the wood for the trees: How can I achieve the following situation? When the layout changes, both texts should keep their center relative to their owner's bounds:

[cid:part3.32F0D7A8.27DD6F5C at gmail.com]

If I use a ProportionalLayout, I can position the TextMorphs at the offsets 0.5 at 0.25<mailto:0.5 at 0.25> and 0.5 at 0.75<mailto:0.5 at 0.75>, but only with their upper left corner, so they will not really be centered.

If I use a TableLayout, I can center the TextMorphs at the top and the bottom using #listCentering:. However, I cannot center each morph relative to one vertical halft of the owner.

How can I stretch both cells to half the height of the morph? I also experimented with #cellSpacing: but still did not achieve the desired layout. (Also, I did not found any senders of the property in the image.)

Of course, I could use two auxiliary morphs which are arranged using a ProportionalLayout and each contain one text as a centered cell (with #listCentering: and #wrapCentering:). But for me, this feels a quite heavy solution for such a simple problem. Or is this the only way to go?

Thanks in advance,


Beginners mailing list
Beginners at lists.squeakfoundation.org<mailto:Beginners at lists.squeakfoundation.org>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.squeakfoundation.org/pipermail/beginners/attachments/20190908/d80648ca/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: pastedImage.png
Type: image/png
Size: 3785 bytes
Desc: pastedImage.png
URL: <http://lists.squeakfoundation.org/pipermail/beginners/attachments/20190908/d80648ca/attachment-0002.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: pastedImage.png
Type: image/png
Size: 5762 bytes
Desc: pastedImage.png
URL: <http://lists.squeakfoundation.org/pipermail/beginners/attachments/20190908/d80648ca/attachment-0003.png>

More information about the Beginners mailing list