<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<br>
<font face="DejaVu Sans Mono">Hello Thiede,<br>
<br>
I prefer my CenteringMorph way for these reasons:<br>
-] It is specific, you read it and you see immediately what the
morph is used for.<br>
-] It will work well with a table of different dimensions. No need
to think <br>
to add one or more cells or change the table geometry. <br>
-] I wrote it ;P <br>
</font><br>
I have no idea if it is possible to center without using an on
purpose class.<br>
I saw that in table TableLayout that is not a default behavior so, i
suppose not.<br>
<br>
Hey, the Ctrl-C thing to compare to clipboard is cool ! I did not
know that, thank you ! <br>
<br>
bye<br>
nicola<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="moz-cite-prefix">On 9/8/19 11:59 AM, Thiede, Christoph
wrote:<br>
</div>
<blockquote type="cite"
cite="mid:5513d1825a044cdd962d89cd948c6dc1@student.hpi.uni-potsdam.de">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<style type="text/css" style="display:none;"><!-- P {margin-top:0;margin-bottom:0;} --></style>
<div id="divtagdefaultwrapper"
style="font-size:12pt;color:#000000;font-family:Calibri,Helvetica,sans-serif;"
dir="ltr">
<div id="divtagdefaultwrapper" dir="ltr" style="font-size: 12pt;
color: rgb(0, 0, 0); font-family: Calibri, Helvetica,
sans-serif, EmojiFont, "Apple Color Emoji",
"Segoe UI Emoji", NotoColorEmoji, "Segoe UI
Symbol", "Android Emoji", EmojiSymbols;">
<p>I wrote a CenteredLayoutFrame implementation that does it
for me. Consider the following example:</p>
<p><br>
</p>
<div> <span style="font-size:12pt">|out sm1 sm2 m|</span></div>
<div><br>
</div>
<div><span style="white-space:pre"> </span>"get a picture
from the web"<span style="white-space:pre">
</span></div>
<div> out := HTTPSocket httpGif:
'<a class="moz-txt-link-freetext" href="https://euriscom.it/data/squeak-ja.gif">https://euriscom.it/data/squeak-ja.gif</a>'.</div>
<div><br>
</div>
<div> "picture1"</div>
<div> sm1 := SketchMorph new. </div>
<div> sm1 form: out. </div>
<div><span style="font-size:12pt"> sm1 width: 200. </span><br>
</div>
<div> sm1 height: 200.</div>
<div> sm1 position: 600@300.</div>
<div><br>
</div>
<div> "picture2"</div>
<div> sm2 := SketchMorph new. </div>
<div> sm2 form: (out deepCopy). </div>
<div> sm2 width: 200. </div>
<div> sm2 height: 200.</div>
<div> sm2 position: 300@300.</div>
<div><br>
</div>
<div> "Make the big container frame"</div>
<div> m := RectangleMorph new.</div>
<div> m extent: 600@600; position: 100@100.</div>
<div> m color: (Color green) darker darker darker.</div>
<div><br>
</div>
<div> "extension of containers"</div>
<div><b> m layoutPolicy: ProportionalLayout new.</b></div>
<div><b> m addMorph: sm1 fullFrame: (CenteringLayoutFrame
fractions: 2 @ 1 / 4). </b></div>
<div><b> m addMorph: sm2 fullFrame: (CenteringLayoutFrame
fractions: 2 @ 3 / 4).</b></div>
<div><b><span style="white-space:pre"></span></b></div>
<div> m openInWorld.</div>
<div><br>
</div>
<div>It works for me, and by the way, one could extend the <span
style="font-family: Calibri, Helvetica, sans-serif,
EmojiFont, "Apple Color Emoji", "Segoe UI
Emoji", NotoColorEmoji, "Segoe UI Symbol",
"Android Emoji", EmojiSymbols; font-size: 16px;">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.</span></div>
<div><span style="font-family: Calibri, Helvetica, sans-serif,
EmojiFont, "Apple Color Emoji", "Segoe UI
Emoji", NotoColorEmoji, "Segoe UI Symbol",
"Android Emoji", EmojiSymbols; font-size: 16px;"><br>
</span></div>
<div><span style="font-family: Calibri, Helvetica, sans-serif,
EmojiFont, "Apple Color Emoji", "Segoe UI
Emoji", NotoColorEmoji, "Segoe UI Symbol",
"Android Emoji", EmojiSymbols; font-size: 16px;">Best,</span></div>
<div><span style="font-family: Calibri, Helvetica, sans-serif,
EmojiFont, "Apple Color Emoji", "Segoe UI
Emoji", NotoColorEmoji, "Segoe UI Symbol",
"Android Emoji", EmojiSymbols; font-size: 16px;">Christoph</span></div>
<div id="Signature">
<div name="divtagdefaultwrapper"
style="font-family:Calibri,Arial,Helvetica,sans-serif;
font-size:; margin:0">
</div>
</div>
</div>
<hr tabindex="-1" style="display:inline-block; width:98%">
<div id="divRplyFwdMsg" dir="ltr"><font style="font-size:11pt"
face="Calibri, sans-serif" color="#000000"><b>Von:</b>
Thiede, Christoph<br>
<b>Gesendet:</b> Sonntag, 8. September 2019 20:53:04<br>
<b>An:</b> Nicola Mingotti; A friendly place to get answers
to even the most basic questions about Squeak.<br>
<b>Betreff:</b> AW: AW: [Newbies] Morphic layout:
Proportional centering of cells</font>
<div> </div>
</div>
<div>
<style type="text/css" style="display:none">
<!--
p
{margin-top:0;
margin-bottom:0}
-->
</style>
<div id="divtagdefaultwrapper" dir="ltr" style="font-size:
12pt; color: rgb(0, 0, 0); font-family: Calibri, Helvetica,
sans-serif, EmojiFont, "Apple Color Emoji",
"Segoe UI Emoji", NotoColorEmoji, "Segoe UI
Symbol", "Android Emoji", EmojiSymbols;">
<p>Thanks for your efforts! Based on your example, I can
solve the problem on an even simpler way, using a
ProportionalLayout:</p>
<p><br>
</p>
<div> "Just shows a resizable table where each cell
contains a Morph, centered into it."</div>
<div><span style="white-space:pre"> </span>|out cm1 cm2 sm1
sm2 m|</div>
<div><br>
</div>
<div> "get a picture from the web"<span style="white-space:pre"> </span></div>
<div><span style="font-size:12pt"> out := HTTPSocket
httpGif: '<a class="moz-txt-link-freetext" href="https://euriscom.it/data/squeak-ja.gif">https://euriscom.it/data/squeak-ja.gif</a>'.</span><br>
</div>
<div><br>
</div>
<div> "container for picture1"</div>
<div> cm1 := Morph new.</div>
<div> cm1 changeTableLayout.</div>
<div> cm1 listCentering: #center.</div>
<div> cm1 wrapCentering: #center.</div>
<div> cm1 color: (Color transparent ).</div>
<div> cm1 width: 220; height: 220. </div>
<div> cm1 position: 120@120.</div>
<div><br>
</div>
<div> "picture1"</div>
<div> sm1 := SketchMorph new. </div>
<div> sm1 form: out. </div>
<div><span style="font-size:12pt"> sm1 width: 200. </span><br>
</div>
<div> sm1 height: 200.</div>
<div> sm1 position: 600@300.</div>
<div> cm1 addMorph: sm1.</div>
<div><br>
</div>
<div> "container for picture2"</div>
<div> cm2 := Morph new. </div>
<div> cm2 changeTableLayout.</div>
<div> cm2 listCentering: #center.</div>
<div> cm2 wrapCentering: #center.</div>
<div> cm2 color: (Color transparent ).</div>
<div> cm2 width: 220; height: 220. </div>
<div> cm2 position: 220@220.</div>
<div><br>
</div>
<div> "picture2"</div>
<div> sm2 := SketchMorph new. </div>
<div> sm2 form: (out deepCopy). </div>
<div> sm2 width: 200. </div>
<div> sm2 height: 200.</div>
<div> sm2 position: 300@300.</div>
<div> cm2 addMorph: sm2.</div>
<div><br>
</div>
<div> "Make the big container frame"</div>
<div> m := RectangleMorph new.</div>
<div> m extent: 600@600; position: 100@100.</div>
<div> m color: (Color green) darker darker darker.</div>
<div><br>
</div>
<div> "extension of containers"</div>
<div> m layoutPolicy: ProportionalLayout new.</div>
<div> m addMorph: cm1 fullFrame: (LayoutFrame fractions:
(0 @ 0 corner: 1 @ (1 / 2))). </div>
<div> m addMorph: cm2 fullFrame: (LayoutFrame fractions:
(0 @ (1 / 2) corner: 1 @ 1)). </div>
<div> </div>
<div> m openInWorld.</div>
<br>
<p>Copy it into clipboard, select all of your test1 method
and press <cmd>C (uppercase c) to view the
differences.</p>
<p><br>
</p>
<p>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?</p>
<p><br>
</p>
<p>Best,</p>
<p>Christoph</p>
<div id="Signature">
<div name="divtagdefaultwrapper"
style="font-family:Calibri,Arial,Helvetica,sans-serif;
font-size:; margin:0">
</div>
</div>
</div>
<hr tabindex="-1" style="display:inline-block; width:98%">
<div id="divRplyFwdMsg" dir="ltr"><font style="font-size:11pt"
face="Calibri, sans-serif" color="#000000"><b>Von:</b>
Nicola Mingotti <a class="moz-txt-link-rfc2396E" href="mailto:nmingotti@gmail.com"><nmingotti@gmail.com></a><br>
<b>Gesendet:</b> Sonntag, 8. September 2019 11:33:08<br>
<b>An:</b> Thiede, Christoph; A friendly place to get
answers to even the most basic questions about Squeak.<br>
<b>Betreff:</b> Re: AW: [Newbies] Morphic layout:
Proportional centering of cells</font>
<div> </div>
</div>
<div><br>
ook, this is what i did to solve your problem. <br>
<br>
I defined a class CenteringMorph. It is simply a rectangle
which has a 'son' element, it keeps the 'son' always in its
center.
<br>
<br>
Then, you put CenteringMorph instances in the TableLayout,
and let them expand to eat all the available space.
<br>
<br>
The class CenteringMorph is defined in this Package:<br>
<a title="static project url"
href="http://www.squeaksource.com/MorphicAddendum.html"
style="color:rgb(54,0,132); text-decoration:none;
font-family:Geneva,Arial,Helvetica,sans-serif;
font-size:15.04px; font-style:normal; font-weight:400;
letter-spacing:normal; orphans:2; text-align:justify;
text-indent:0px; text-transform:none; white-space:normal;
widows:2; word-spacing:0px;
background-color:rgb(255,255,255)" id="LPlnk967941"
previewremoved="true" moz-do-not-send="true">http://www.squeaksource.com/MorphicAddendum.html</a><br>
<br>
Look in the CenteringMorph class documentation to see how to
run the example.<br>
<br>
bye<br>
Nicola <br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="moz-cite-prefix">On 9/7/19 12:35 AM, Thiede,
Christoph wrote:<br>
</div>
<blockquote type="cite">
<style type="text/css" style="display:none">
<!--
p
{margin-top:0;
margin-bottom:0}
-->
</style>
<div id="divtagdefaultwrapper" dir="ltr" style="font-size:
12pt; color: rgb(0, 0, 0); font-family: Calibri,
Helvetica, sans-serif, EmojiFont, "Apple Color
Emoji", "Segoe UI Emoji", NotoColorEmoji,
"Segoe UI Symbol", "Android Emoji",
EmojiSymbols;">
<p>Thank you for your answer.</p>
<p><br>
</p>
<p>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?</p>
<p><br>
</p>
<p><img naturalheight="253" naturalwidth="210"
size="3785" id="img640548" tabindex="0" class=""
style="max-width: 99.9%; user-select: none;"
src="cid:part2.E512A015.1B4DABB7@gmail.com"><br>
</p>
<p><br>
</p>
<p>Best,</p>
<p>Christoph</p>
<div id="Signature">
<div name="divtagdefaultwrapper"
style="font-family:Calibri,Arial,Helvetica,sans-serif;
font-size:; margin:0">
</div>
</div>
</div>
<hr tabindex="-1" style="display:inline-block; width:98%">
<div id="divRplyFwdMsg" dir="ltr"><font
style="font-size:11pt" face="Calibri, sans-serif"
color="#000000"><b>Von:</b> Nicola Mingotti
<a class="moz-txt-link-rfc2396E"
href="mailto:nmingotti@gmail.com"
moz-do-not-send="true"><nmingotti@gmail.com></a><br>
<b>Gesendet:</b> Samstag, 7. September 2019 00:24:16<br>
<b>An:</b> A friendly place to get answers to even the
most basic questions about Squeak.; Thiede, Christoph<br>
<b>Betreff:</b> Re: [Newbies] Morphic layout:
Proportional centering of cells</font>
<div> </div>
</div>
<div><br>
I guess you are looking from something like this: <br>
<br>
note: the ButtonMorph is the only one that by default
put the<br>
text in center of its geometry. StringM and TextM do
not.<br>
<br>
========================<br>
<br>
m := RectangleMorph new.<br>
m openInWorld.<br>
m extent: 300@300; position: 100@100.<br>
<br>
m layoutPolicy: TableLayout new.<br>
m listDirection: #topToBottom. "default, place
elements as rows in a table."<br>
m listCentering: #topLeft. <br>
m layoutInset: 5. "space to container morph."<br>
m cellInset: 5@5. "Space between table cells."<br>
m hResizing: #spaceFill. <br>
m vResizing: #spaceFill.<br>
m color: (Color yellow darker darker darker).<br>
<br>
t1 := SimpleButtonMorph new.<br>
t1 openInWorld. <br>
t1 color: ((Color green) lighter lighter lighter) .<br>
t1 borderColor: (Color black). <br>
t1 borderWidth: 2.<br>
t1 hResizing: #spaceFill.<br>
t1 vResizing: #spaceFill.<br>
m addMorphBack: t1.<br>
<br>
t2 := SimpleButtonMorph new. <br>
t2 openInWorld. <br>
t2 color: ((Color yellow) lighter lighter lighter) .<br>
t2 borderColor: (Color black). <br>
t2 borderWidth: 2.<br>
t2 hResizing: #spaceFill.<br>
t2 vResizing: #spaceFill.<br>
m addMorphBack: t2.<br>
<br>
========================<br>
<br>
<br>
<div class="moz-cite-prefix">On 9/6/19 6:22 AM, Thiede,
Christoph wrote:<br>
</div>
<blockquote type="cite">
<style type="text/css" style="display:none">
<!--
p
{margin-top:0;
margin-bottom:0}
-->
</style>
<div id="divtagdefaultwrapper" dir="ltr" style="">
<p>Hi,</p>
<p><br>
</p>
<p>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:</p>
<p><br>
</p>
<p><img naturalheight="372" naturalwidth="379"
size="5762" id="img271117" tabindex="0" class=""
style="max-width: 99.9%; user-select: none;"
src="cid:part4.34F0B952.FA1612B1@gmail.com"><br>
</p>
<p><br>
</p>
<p>If I use a ProportionalLayout, I can position the
TextMorphs at the offsets <a
class="moz-txt-link-abbreviated"
href="mailto:0.5@0.25" moz-do-not-send="true">
0.5@0.25</a> and <a
class="moz-txt-link-abbreviated"
href="mailto:0.5@0.75" moz-do-not-send="true">0.5@0.75</a>,
but only with their upper left corner, so they
will not really be centered.</p>
<p>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.</p>
<p>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.)</p>
<p><br>
</p>
<p>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?</p>
<p><br>
</p>
<p>Thanks in advance,</p>
<p>Christoph</p>
<div id="Signature">
<div name="divtagdefaultwrapper"
style="font-family:Calibri,Arial,Helvetica,sans-serif;
font-size:; margin:0">
</div>
</div>
</div>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<pre class="moz-quote-pre">_______________________________________________
Beginners mailing list
<a class="moz-txt-link-abbreviated" href="mailto:Beginners@lists.squeakfoundation.org" moz-do-not-send="true">Beginners@lists.squeakfoundation.org</a>
<a class="moz-txt-link-freetext" href="http://lists.squeakfoundation.org/mailman/listinfo/beginners" moz-do-not-send="true">http://lists.squeakfoundation.org/mailman/listinfo/beginners</a>
</pre>
</blockquote>
<br>
</div>
</blockquote>
<br>
</div>
</div>
</div>
</blockquote>
<br>
</body>
</html>