<html><head><meta http-equiv="Content-Type" content="text/html; charset=us-ascii"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; line-break: after-white-space;" class=""><div class=""><br class=""></div>Hi John, <div class=""><br class=""></div><div class="">thanks for suggestions. </div><div class=""><br class=""></div><div class="">I landed on something basic that I can use a starting point to build other simple GUIs.</div><div class=""><br class=""></div><div class="">Here is the code, for now I will use also the AlignmentMorph(s), maybe in future i remove them. </div><div class=""><br class=""></div><div class="">Let me know if you have some improvement suggestions.</div><div class=""><br class=""></div><div class="">I could add this to the wiki if i find a way to login;) </div><div class=""><br class=""></div><div class=""><br class=""></div><div class="">======================================================</div><div class=""><div class=""><br class=""></div><div class="">" ==== NOTES: 26 Jul 2019 - Dr. Nicola Mingotti =============</div><div class="">-] This code has been written to be run line-by-iine in the Squeak Workspace. </div><div class="">-] It is an effort to understand how to write a simple GUI in Morph, general enough</div><div class=""> to be used as a template for future simple GUI.</div><div class="">-] It has been tested working in Squeak5.2 in MacOS Mojave.</div><div class="">-] What does it do: </div><div class=""><br class=""></div><div class=""> 1] Create a SystemWindow ('w') and set its layouy as Proportional. </div><div class=""> TableLayout moves down the title, so it will be avoided. </div><div class=""> The SystemWindow Layout is intended to contain all the other stuff. </div><div class=""><br class=""></div><div class=""> 2] A RectangleMorph ('m' for main) contains all the other widgets and organizes them </div><div class=""> into as a column. The layout is here TableLayout. </div><div class=""><br class=""></div><div class=""> 3] The widgets inside 'm' are stacked from top to bottom, so that some code that is in the </div><div class=""> high part of the code listing is in the high part of the GUI. To achieve this we use the 'addMorphBack',</div><div class=""> instead of 'addMorph', that would stack as gravity dictates. </div><div class=""><br class=""></div><div class=""> 4] First, a PluggableTextMorph is placed in. It vertical size is pre-defined but it is allowed </div><div class=""> to grow horizontally.</div><div class=""><br class=""></div><div class=""> 5] Then we want to place a row of 10 circles. So we add a container first and the balls into </div><div class=""> the container. The container is here 'AlignmentMorph' via 'newRow'. AlignmentMorph has </div><div class=""> been deprecated so it could be useful to use another Morph and the TableLayout to achieve</div><div class=""> the same effect. On the otherside, AlignmentMorph does what it says, I prefer to read that </div><div class=""> than 'Morph' if I want a Layout generator. </div><div class=""> </div><div class=""> 6] Then we want to put in 2 resizable buttons, side by side. Again, we need a container, and again it will be </div><div class=""> an AlignmentMorph. </div><div class=""> </div><div class=""> 7] Finally as an example of 'image' is put a FishEyeMorph. Since it is the simplest thing I found. </div><div class=""><br class=""></div><div class="">"</div><div class=""><br class=""></div><div class="">"SystemWindow containing the example "</div><div class="">w := SystemWindow new extent: 400@400; position: 100@100.</div><div class="">w setLabel: 'Layout test-1'; openInWorld. </div><div class="">w layoutPolicy: ProportionalLayout new. </div><div class=""><br class=""></div><div class="">"m in the main Morph containin all the others, a Rectangle Morphi"</div><div class="">m := RectangleMorph new.</div><div class="">m openInWorld.</div><div class="">m extent: 300@300; position: 100@100.</div><div class=""><br class=""></div><div class="">"Set the layout policy for the main 'm' Morph "</div><div class="">m layoutPolicy: TableLayout new.</div><div class="">m listDirection: #topToBottom. "default, place elements as rows in a table."</div><div class="">m listCentering: #topLeft. </div><div class="">m layoutInset: 5. "space to container morph."</div><div class="">m cellInset: 5@5. "Space between table cells."</div><div class="">m hResizing: #spaceFill. </div><div class="">m vResizing: #spaceFill.</div><div class="">m color: (Color yellow darker darker darker).</div><div class=""><br class=""></div><div class="">"The main widget container 'm' is to be placed insider the SystemWindow 'w' and to </div><div class=""> use all of it space. Or resize, all must resize smoothly. </div><div class="">"</div><div class="">w addMorph: m</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>fullFrame: (</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>LayoutFrame</div><div class=""> fractions: (0@0 corner: 1 @ 1) offsets: nil ).</div><div class=""><br class=""></div><div class=""><br class=""></div><div class="">" ----- The first morh to add is a TextMorph, h-resizable ----</div><div class="">. Observe it has fixed height. </div><div class="">. ATTENTION: expliciting 'vResizing: #fixed' may create issues, leave it as default.</div><div class="">"</div><div class="">t1 := PluggableTextMorph new.</div><div class="">textT1 := '-] Try to resize the window', String crlf.</div><div class="">textT1 := textT1, '-] Maybe add a note here', String crlf.</div><div class="">textT1 := textT1, '-] .... '. </div><div class="">(t1 textMorph) contentsWrapped: textT1.</div><div class="">t1 hResizing: #spaceFill. </div><div class="">m addMorphBack: t1. </div><div class="">t1 height: 50.</div><div class=""><br class=""></div><div class=""><br class=""></div><div class="">"---- Add a row of hv-resizable blue Ellipses ------------ "</div><div class=""><br class=""></div><div class="">row1 := AlignmentMorph newRow color: (Color r:100 g:100 b: 100); </div><div class=""> hResizing: #spaceFill; vResizing: #spaceFill.</div><div class="">m addMorphBack: row1.</div><div class=""><br class=""></div><div class="">10 timesRepeat: [row1 addMorph: </div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>(EllipseMorph new extent: 10@10; color: (Color blue); </div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>hResizing: #spaceFill; vResizing: #spaceFill)</div><div class="">].</div><div class=""><br class=""></div><div class=""><br class=""></div><div class="">"---- Add a row of h-resizable buttons ---------- "</div><div class=""><br class=""></div><div class="">row2 := AlignmentMorph newRow color: (Color r:300 g:300 b: 300); height: 50;</div><div class=""> hResizing: #spaceFill; vResizing: #fixed.</div><div class="">m addMorphBack: row2.</div><div class=""><br class=""></div><div class="">b1 := SimpleButtonMorph new. </div><div class="">b1 borderWidth: 3 ; label: 'Button1'. </div><div class="">b1 hResizing: #spaceFill.</div><div class=""><br class=""></div><div class="">b2 := SimpleButtonMorph new. </div><div class="">b2 borderWidth: 3 ; label: 'Button2'. </div><div class="">b2 hResizing: #spaceFill.</div><div class=""><br class=""></div><div class="">row2 addMorphBack: b1.</div><div class="">row2 addMorphBack: b2.</div><div class=""><br class=""></div><div class="">" ----- At the end a resizable image ----- "</div><div class=""><br class=""></div><div class="">"The FishEyeMorph was a practial image-link morph that accepts resizing. "</div><div class="">i1 := FishEyeMorph new. </div><div class="">i1 hResizing: #spaceFill.</div><div class="">i1 vResizing: #spaceFill.</div><div class="">m addMorphBack: i1.</div><div class=""><br class=""></div><div class=""><br class=""></div></div><div class="">=============================================================</div><div class=""><br class=""></div><div class=""><br class=""></div><div class="">bye</div><div class="">Nicola</div><div class=""><br class=""></div><div class=""><br class=""></div><div class=""><br class=""><div><br class=""><blockquote type="cite" class=""><div class="">On Jul 26, 2019, at 6:59 AM, John-Reed Maffeo <<a href="mailto:jrmaffeo@gmail.com" class="">jrmaffeo@gmail.com</a>> wrote:</div><br class="Apple-interchange-newline"><div class=""><div dir="ltr" class=""><div class="gmail_default" style="font-size:small">Nicola,</div><div class="gmail_default" style="font-size:small"><br class=""></div><div class="gmail_default" style="font-size:small">You are doing quit well. </div><div class="gmail_default" style="font-size:small">Note: All of the behavior of #AlignmentMorph is still in the image most of it has been promoted to #Morph.</div><div class="gmail_default" style="font-size:small">Note2: I am still very much a newbie with #Morph, but trying to answer your questions makes me think about what I know.</div><div class="gmail_default" style="font-size:small"><br class=""></div><div class="gmail_default" style="font-size:small">Now to your questions:</div><div class="gmail_default" style="font-size:small"><div class="">1] How can I make the buttons fill all the third row length ? </div><div class=""> I think you have to change the bounds of the morphs to increase the width. I am not sure which methods to use. (You can resize any morph by using the #Halo</div><div class="">2] How do I embed newlines in textT1 string, I see '\n' is not working. </div><div class=""> I did a search of the image for methods which contain the string 'newline' and saw some code which inspired this 'aaaa', String crlf, 'bbbb'. Wrapped text is another option. Both of these require the height of the container morph to be increased. I have seen text boxes (#TestMorph ?) dynamically expand, but I don't know how it works.</div><div class="">3] How could i make the image in row4 fill its whole row (maybe same as [1])</div><div class=""> I think that this is the same as 1 too.</div><div class="">4] How can I show the Squeak logo into image "i1" ? Just to have something nicer to display into examples.</div><div class=""> Which Squeak logo do you want to use? The Squeak logo in the #DockingBar is an Icon. Check the Squeak wiki <a href="http://wiki.squeak.org/squeak/2170" target="_blank" class="">http://wiki.squeak.org/squeak/2170</a> for Squeak Icons - Branding, or search for Squeak Smalltalk images. Once you have an image on your computer create an #ImageMorph using the method #setNewImageFrom:</div><div class=""><br class=""></div><div class="">Hopes this helps</div><div class=""><br class=""></div><div class="">-jrm</div></div><div class="gmail_default" style="font-size:small"><br class=""></div><div class="gmail_default" style="font-size:small"><br class=""></div></div><br class=""><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Thu, Jul 25, 2019 at 10:59 AM Nicola Mingotti <<a href="mailto:nmingotti@gmail.com" target="_blank" class="">nmingotti@gmail.com</a>> wrote:<br class=""></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div class=""><div class=""><br class=""></div><div class="">Hi, </div><div class=""><br class=""></div><div class="">I could put together this example [code below], but I am stuck again on little things that are not so easy to find googling the docs.</div><div class=""><br class=""></div><div class="">1] How can I make the buttons fill all the third row length ? </div><div class="">2] How do I embed newlines in textT1 string, I see '\n' is not working. </div><div class="">3] How could i make the image in row4 fill its whole row (maybe same as [1])</div><div class="">4] How can I show the Squeak logo into image "i1" ? Just to have something nicer to display into examples.</div><div class=""><br class=""></div><div class="">---------------------</div><div class=""><div class="">m := RectangleMorph new.</div><div class="">m openInWindow.</div><div class=""><br class=""></div><div class="">"Initial size of the window".</div><div class="">(m owner) extent: 300@300. </div><div class="">(m owner) setLabel: 'Layout test-1'.</div><div class=""><br class=""></div><div class="">m layoutPolicy: TableLayout new.</div><div class="">m listDirection: #topToBottom.</div><div class="">m hResizing: #spaceFill.</div><div class="">m vResizing: #spaceFill.</div><div class="">m color: Color yellow.</div><div class=""><br class=""></div><div class="">row0 := AlignmentMorph newRow color: (Color white); </div><div class=""> hResizing: #spaceFill; vResizing: #spaceFill.</div><div class=""><br class=""></div><div class="">row1 := AlignmentMorph newRow color: (Color r:100 g:100 b: 100); </div><div class=""> hResizing: #spaceFill; vResizing: #spaceFill.</div><div class=""><br class=""></div><div class="">row2 := AlignmentMorph newRow color: (Color r:300 g:300 b: 300); height: 50;</div><div class=""> hResizing: #spaceFill; vResizing: #fixed.</div><div class=""><br class=""></div><div class="">row3 := AlignmentMorph newRow color: (Color r:500 g:500 b: 500); </div><div class=""> hResizing: #spaceFill; vResizing: #spaceFill.</div><div class=""><br class=""></div><div class=""><br class=""></div><div class="">m addMorphBack: row0.</div><div class="">m addMorphBack: row1.</div><div class="">m addMorphBack: row2.</div><div class="">m addMorphBack: row3.</div><div class=""><br class=""></div><div class="">t1 := TextMorph new.</div><div class="">t1 wrapFlag: true. </div><div class="">textT1 := '-] Autoresize buttons to fills space ? \n'.</div><div class="">textT1 := textT1, '-] line 2. '. </div><div class="">t1 contents: textT1. </div><div class="">row0 addMorph: t1. </div><div class=""><br class=""></div><div class="">10 timesRepeat: [row1 addMorph: (CircleMorph new extent: 10@10; color: Color blue)].</div><div class=""><br class=""></div><div class="">b1 := SimpleButtonMorph new. </div><div class="">b1 borderWidth: 3 ; label: 'Button1'. </div><div class=""><br class=""></div><div class="">b2 := SimpleButtonMorph new. </div><div class="">b2 borderWidth: 3 ; label: 'Button2'. </div><div class=""><br class=""></div><div class="">row2 addMorph: b1.</div><div class="">row2 addMorph: b2.</div><div class=""><br class=""></div><div class="">i1 := ImageMorph new. </div><div class="">row3 addMorph: i1.</div><div class="">---------------------</div></div><div class=""><br class=""></div><div class="">bye</div><div class="">Nicola</div><div class=""><br class=""></div><div class=""><br class=""></div><br class=""><div class=""><br class=""><blockquote type="cite" class=""><div class="">On Jul 25, 2019, at 5:11 PM, John-Reed Maffeo <<a href="mailto:jrmaffeo@gmail.com" target="_blank" class="">jrmaffeo@gmail.com</a>> wrote:</div><br class="gmail-m_-5014089612377574708gmail-m_4643055615137175550Apple-interchange-newline"><div class=""><div dir="ltr" class=""><div class="gmail_default" style="font-size:small">Hello Nicola,</div><div class="gmail_default" style="font-size:small"><br class=""></div><div class="gmail_default" style="font-size:small">Check out <a href="https://wiki.squeak.org/squeak/52" target="_blank" class="">https://wiki.squeak.org/squeak/52</a> - How to lay out submorphs - example 1 </div><div class="gmail_default" style="font-size:small"><br class=""></div><div class="gmail_default" style="font-size:small">There are several other layout links similar to this one.</div><div class="gmail_default" style="font-size:small"><br class=""></div><div class="gmail_default" style="font-size:small">Note: AlignmentMorph has been deprecated, but it is still present in methods in current Squeak images.</div><div class="gmail_default" style="font-size:small"><br class=""></div><div class="gmail_default" style="font-size:small">-jrm</div></div><br class=""><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Thu, Jul 25, 2019 at 1:14 AM Nicola Mingotti <<a href="mailto:nmingotti@gmail.com" target="_blank" class="">nmingotti@gmail.com</a>> wrote:<br class=""></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">Hi,<br class="">
<br class="">
I am trying to understand the layout in Morph. I am familiar with other GUI toolkit as Tk, so It should not be a problem, I need just to see some simple examples. <br class="">
<br class="">
It is quite difficult to find information about this subject. <br class="">
<br class="">
I finally landed here:<br class="">
<a href="https://wiki.squeak.org/squeak/2400" rel="noreferrer" target="_blank" class="">https://wiki.squeak.org/squeak/2400</a><br class="">
<br class="">
Bue when I try to open the file "MorphLayoutArticle.pr" in Squeak 5.2 I get a lot of errors.<br class="">
<br class="">
Is there around a working version of MorphLayoutArticle ? <br class="">
<br class="">
bye<br class="">
Nicola<br class="">
<br class="">
_______________________________________________<br class="">
Beginners mailing list<br class="">
<a href="mailto:Beginners@lists.squeakfoundation.org" target="_blank" class="">Beginners@lists.squeakfoundation.org</a><br class="">
<a href="http://lists.squeakfoundation.org/mailman/listinfo/beginners" rel="noreferrer" target="_blank" class="">http://lists.squeakfoundation.org/mailman/listinfo/beginners</a><br class="">
</blockquote></div>
_______________________________________________<br class="">Beginners mailing list<br class=""><a href="mailto:Beginners@lists.squeakfoundation.org" target="_blank" class="">Beginners@lists.squeakfoundation.org</a><br class=""><a href="http://lists.squeakfoundation.org/mailman/listinfo/beginners" target="_blank" class="">http://lists.squeakfoundation.org/mailman/listinfo/beginners</a><br class=""></div></blockquote></div><br class=""></div>_______________________________________________<br class="">
Beginners mailing list<br class="">
<a href="mailto:Beginners@lists.squeakfoundation.org" target="_blank" class="">Beginners@lists.squeakfoundation.org</a><br class="">
<a href="http://lists.squeakfoundation.org/mailman/listinfo/beginners" rel="noreferrer" target="_blank" class="">http://lists.squeakfoundation.org/mailman/listinfo/beginners</a><br class="">
</blockquote></div>
_______________________________________________<br class="">Beginners mailing list<br class=""><a href="mailto:Beginners@lists.squeakfoundation.org" class="">Beginners@lists.squeakfoundation.org</a><br class="">http://lists.squeakfoundation.org/mailman/listinfo/beginners<br class=""></div></blockquote></div><br class=""></div></body></html>