Hi John,
thanks for suggestions.
I landed on something basic that I can use a starting point to build other simple GUIs.
Here is the code, for now I will use also the AlignmentMorph(s), maybe in future i remove them.
Let me know if you have some improvement suggestions.
I could add this to the wiki if i find a way to login;)
======================================================
" ==== NOTES: 26 Jul 2019 - Dr. Nicola Mingotti ============= -] This code has been written to be run line-by-iine in the Squeak Workspace. -] It is an effort to understand how to write a simple GUI in Morph, general enough to be used as a template for future simple GUI. -] It has been tested working in Squeak5.2 in MacOS Mojave. -] What does it do:
1] Create a SystemWindow ('w') and set its layouy as Proportional. TableLayout moves down the title, so it will be avoided. The SystemWindow Layout is intended to contain all the other stuff.
2] A RectangleMorph ('m' for main) contains all the other widgets and organizes them into as a column. The layout is here TableLayout.
3] The widgets inside 'm' are stacked from top to bottom, so that some code that is in the high part of the code listing is in the high part of the GUI. To achieve this we use the 'addMorphBack', instead of 'addMorph', that would stack as gravity dictates.
4] First, a PluggableTextMorph is placed in. It vertical size is pre-defined but it is allowed to grow horizontally.
5] Then we want to place a row of 10 circles. So we add a container first and the balls into the container. The container is here 'AlignmentMorph' via 'newRow'. AlignmentMorph has been deprecated so it could be useful to use another Morph and the TableLayout to achieve the same effect. On the otherside, AlignmentMorph does what it says, I prefer to read that than 'Morph' if I want a Layout generator.
6] Then we want to put in 2 resizable buttons, side by side. Again, we need a container, and again it will be an AlignmentMorph.
7] Finally as an example of 'image' is put a FishEyeMorph. Since it is the simplest thing I found.
"
"SystemWindow containing the example " w := SystemWindow new extent: 400@400; position: 100@100. w setLabel: 'Layout test-1'; openInWorld. w layoutPolicy: ProportionalLayout new.
"m in the main Morph containin all the others, a Rectangle Morphi" m := RectangleMorph new. m openInWorld. m extent: 300@300; position: 100@100.
"Set the layout policy for the main 'm' Morph " 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@5. "Space between table cells." m hResizing: #spaceFill. m vResizing: #spaceFill. m color: (Color yellow darker darker darker).
"The main widget container 'm' is to be placed insider the SystemWindow 'w' and to use all of it space. Or resize, all must resize smoothly. " w addMorph: m fullFrame: ( LayoutFrame fractions: (0@0 corner: 1 @ 1) offsets: nil ).
" ----- The first morh to add is a TextMorph, h-resizable ---- . Observe it has fixed height. . ATTENTION: expliciting 'vResizing: #fixed' may create issues, leave it as default. " t1 := PluggableTextMorph new. textT1 := '-] Try to resize the window', String crlf. textT1 := textT1, '-] Maybe add a note here', String crlf. textT1 := textT1, '-] .... '. (t1 textMorph) contentsWrapped: textT1. t1 hResizing: #spaceFill. m addMorphBack: t1. t1 height: 50.
"---- Add a row of hv-resizable blue Ellipses ------------ "
row1 := AlignmentMorph newRow color: (Color r:100 g:100 b: 100); hResizing: #spaceFill; vResizing: #spaceFill. m addMorphBack: row1.
10 timesRepeat: [row1 addMorph: (EllipseMorph new extent: 10@10; color: (Color blue); hResizing: #spaceFill; vResizing: #spaceFill) ].
"---- Add a row of h-resizable buttons ---------- "
row2 := AlignmentMorph newRow color: (Color r:300 g:300 b: 300); height: 50; hResizing: #spaceFill; vResizing: #fixed. m addMorphBack: row2.
b1 := SimpleButtonMorph new. b1 borderWidth: 3 ; label: 'Button1'. b1 hResizing: #spaceFill.
b2 := SimpleButtonMorph new. b2 borderWidth: 3 ; label: 'Button2'. b2 hResizing: #spaceFill.
row2 addMorphBack: b1. row2 addMorphBack: b2.
" ----- At the end a resizable image ----- "
"The FishEyeMorph was a practial image-link morph that accepts resizing. " i1 := FishEyeMorph new. i1 hResizing: #spaceFill. i1 vResizing: #spaceFill. m addMorphBack: i1.
=============================================================
bye Nicola
On Jul 26, 2019, at 6:59 AM, John-Reed Maffeo jrmaffeo@gmail.com wrote:
Nicola,
You are doing quit well. Note: All of the behavior of #AlignmentMorph is still in the image most of it has been promoted to #Morph. Note2: I am still very much a newbie with #Morph, but trying to answer your questions makes me think about what I know.
Now to your questions: 1] How can I make the buttons fill all the third row length ? 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 2] How do I embed newlines in textT1 string, I see '\n' is not working. 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. 3] How could i make the image in row4 fill its whole row (maybe same as [1]) I think that this is the same as 1 too. 4] How can I show the Squeak logo into image "i1" ? Just to have something nicer to display into examples. Which Squeak logo do you want to use? The Squeak logo in the #DockingBar is an Icon. Check the Squeak wiki http://wiki.squeak.org/squeak/2170 http://wiki.squeak.org/squeak/2170 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:
Hopes this helps
-jrm
On Thu, Jul 25, 2019 at 10:59 AM Nicola Mingotti <nmingotti@gmail.com mailto:nmingotti@gmail.com> wrote:
Hi,
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.
1] How can I make the buttons fill all the third row length ? 2] How do I embed newlines in textT1 string, I see '\n' is not working. 3] How could i make the image in row4 fill its whole row (maybe same as [1]) 4] How can I show the Squeak logo into image "i1" ? Just to have something nicer to display into examples.
m := RectangleMorph new. m openInWindow.
"Initial size of the window". (m owner) extent: 300@300. (m owner) setLabel: 'Layout test-1'.
m layoutPolicy: TableLayout new. m listDirection: #topToBottom. m hResizing: #spaceFill. m vResizing: #spaceFill. m color: Color yellow.
row0 := AlignmentMorph newRow color: (Color white); hResizing: #spaceFill; vResizing: #spaceFill.
row1 := AlignmentMorph newRow color: (Color r:100 g:100 b: 100); hResizing: #spaceFill; vResizing: #spaceFill.
row2 := AlignmentMorph newRow color: (Color r:300 g:300 b: 300); height: 50; hResizing: #spaceFill; vResizing: #fixed.
row3 := AlignmentMorph newRow color: (Color r:500 g:500 b: 500); hResizing: #spaceFill; vResizing: #spaceFill.
m addMorphBack: row0. m addMorphBack: row1. m addMorphBack: row2. m addMorphBack: row3.
t1 := TextMorph new. t1 wrapFlag: true. textT1 := '-] Autoresize buttons to fills space ? \n'. textT1 := textT1, '-] line 2. '. t1 contents: textT1. row0 addMorph: t1.
10 timesRepeat: [row1 addMorph: (CircleMorph new extent: 10@10; color: Color blue)].
b1 := SimpleButtonMorph new. b1 borderWidth: 3 ; label: 'Button1'.
b2 := SimpleButtonMorph new. b2 borderWidth: 3 ; label: 'Button2'.
row2 addMorph: b1. row2 addMorph: b2.
i1 := ImageMorph new. row3 addMorph: i1.
bye Nicola
On Jul 25, 2019, at 5:11 PM, John-Reed Maffeo <jrmaffeo@gmail.com mailto:jrmaffeo@gmail.com> wrote:
Hello Nicola,
Check out https://wiki.squeak.org/squeak/52 https://wiki.squeak.org/squeak/52 - How to lay out submorphs - example 1
There are several other layout links similar to this one.
Note: AlignmentMorph has been deprecated, but it is still present in methods in current Squeak images.
-jrm
On Thu, Jul 25, 2019 at 1:14 AM Nicola Mingotti <nmingotti@gmail.com mailto:nmingotti@gmail.com> wrote: Hi,
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.
It is quite difficult to find information about this subject.
I finally landed here: https://wiki.squeak.org/squeak/2400 https://wiki.squeak.org/squeak/2400
Bue when I try to open the file "MorphLayoutArticle.pr" in Squeak 5.2 I get a lot of errors.
Is there around a working version of MorphLayoutArticle ?
bye Nicola
Beginners mailing list Beginners@lists.squeakfoundation.org mailto:Beginners@lists.squeakfoundation.org http://lists.squeakfoundation.org/mailman/listinfo/beginners http://lists.squeakfoundation.org/mailman/listinfo/beginners _______________________________________________ Beginners mailing list Beginners@lists.squeakfoundation.org mailto:Beginners@lists.squeakfoundation.org http://lists.squeakfoundation.org/mailman/listinfo/beginners http://lists.squeakfoundation.org/mailman/listinfo/beginners
Beginners mailing list Beginners@lists.squeakfoundation.org mailto:Beginners@lists.squeakfoundation.org http://lists.squeakfoundation.org/mailman/listinfo/beginners http://lists.squeakfoundation.org/mailman/listinfo/beginners _______________________________________________ Beginners mailing list Beginners@lists.squeakfoundation.org http://lists.squeakfoundation.org/mailman/listinfo/beginners