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.
" ==== 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.