[Newbies] Morphic layout: Proportional centering of cells
Nicola Mingotti
nmingotti at gmail.com
Mon Sep 9 02:32:55 UTC 2019
Hello Thiede,
I prefer my CenteringMorph way for these reasons:
-] It is specific, you read it and you see immediately what the morph is
used for.
-] It will work well with a table of different dimensions. No need to think
to add one or more cells or change the table geometry.
-] I wrote it ;P
I have no idea if it is possible to center without using an on purpose
class.
I saw that in table TableLayout that is not a default behavior so, i
suppose not.
Hey, the Ctrl-C thing to compare to clipboard is cool ! I did not know
that, thank you !
bye
nicola
On 9/8/19 11:59 AM, Thiede, Christoph wrote:
>
> I wrote a CenteredLayoutFrame implementation that does it for me.
> Consider the following example:
>
>
> |out sm1 sm2 m|
>
> "get a picture from the web"
> out := HTTPSocket httpGif: 'https://euriscom.it/data/squeak-ja.gif'.
>
> "picture1"
> sm1 := SketchMorph new.
> sm1 form: out.
> sm1 width: 200.
> sm1 height: 200.
> sm1 position: 600 at 300.
>
> "picture2"
> sm2 := SketchMorph new.
> sm2 form: (out deepCopy).
> sm2 width: 200.
> sm2 height: 200.
> sm2 position: 300 at 300.
>
> "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: sm1 fullFrame: (CenteringLayoutFrame fractions: 2 @ 1
> / 4). *
> * m addMorph: sm2 fullFrame: (CenteringLayoutFrame fractions: 2 @ 3
> / 4).*
> **
> m openInWorld.
>
> It works for me, and by the way, one could extend the
> CenteringLayoutFrame class to allow defining an extent as well, but I
> am still curious whether Morphic has another ace up its sleeve that
> does not require your own class.
>
> Best,
> Christoph
> ------------------------------------------------------------------------
> *Von:* Thiede, Christoph
> *Gesendet:* Sonntag, 8. September 2019 20:53:04
> *An:* Nicola Mingotti; A friendly place to get answers to even the
> most basic questions about Squeak.
> *Betreff:* AW: AW: [Newbies] Morphic layout: Proportional centering of
> cells
>
> 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.
>
> "picture1"
> 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.
>
> "picture2"
> 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?
>
>
> Best,
>
> Christoph
>
> ------------------------------------------------------------------------
> *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:
> http://www.squeaksource.com/MorphicAddendum.html
>
> Look in the CenteringMorph class documentation to see how to run the
> example.
>
> bye
> Nicola
>
>
>
>
>
>
> 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?
>>
>>
>>
>>
>> Best,
>>
>> Christoph
>>
>> ------------------------------------------------------------------------
>> *Von:* Nicola Mingotti <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:
>>>
>>> Hi,
>>>
>>>
>>> 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:
>>>
>>>
>>>
>>>
>>> If I use a ProportionalLayout, I can position the TextMorphs at the
>>> offsets 0.5 at 0.25 and 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,
>>>
>>> Christoph
>>>
>>>
>>> _______________________________________________
>>> Beginners mailing list
>>> Beginners at lists.squeakfoundation.org
>>> http://lists.squeakfoundation.org/mailman/listinfo/beginners
>>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.squeakfoundation.org/pipermail/beginners/attachments/20190908/f16d4b8d/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: pastedImage.png
Type: image/png
Size: 3785 bytes
Desc: not available
URL: <http://lists.squeakfoundation.org/pipermail/beginners/attachments/20190908/f16d4b8d/attachment-0002.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: pastedImage.png
Type: image/png
Size: 5762 bytes
Desc: not available
URL: <http://lists.squeakfoundation.org/pipermail/beginners/attachments/20190908/f16d4b8d/attachment-0003.png>
More information about the Beginners
mailing list