<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<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">
<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>
<p></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: 'https://euriscom.it/data/squeak-ja.gif'.</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></p>
<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><font size="2" color="#808080"></font></div>
</div>
</div>
</div>
<hr style="display:inline-block;width:98%" tabindex="-1">
<div id="divRplyFwdMsg" dir="ltr"><font face="Calibri, sans-serif" style="font-size:11pt" color="#000000"><b>Von:</b> Nicola Mingotti <nmingotti@gmail.com><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-variant-ligatures: normal;
font-variant-caps: 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; -webkit-text-stroke-width: 0px;
background-color: rgb(255, 255, 255);">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" cite="mid:107a18021aa148f69c6eac6c078d102e@student.hpi.uni-potsdam.de">
<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">
<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 size="3785" contenttype="image/png" id="img640548" style="max-width: 99.9%; user-select: none;" contextid="img550848" tabindex="0" class="" src="cid:part2.32DEF195.251BC561@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 style="display:inline-block;width:98%" tabindex="-1">
<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> 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" cite="mid:c4bba99decfa4922a89bb641e2e7ea23@student.hpi.uni-potsdam.de">
<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>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" style="max-width: 99.9%;
user-select: none;" class="" src="cid:part3.32F0D7A8.27DD6F5C@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" wrap="">_______________________________________________
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>
</body>
</html>