[Newbies] Can't open MorphLayoutArticle
Nicola Mingotti
nmingotti at gmail.com
Fri Jul 26 14:30:31 UTC 2019
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 at 400; position: 100 at 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 at 300; position: 100 at 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 at 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 at 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 at 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 at 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 at gmail.com <mailto:nmingotti at 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 at 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 at 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 at gmail.com <mailto:jrmaffeo at 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 at gmail.com <mailto:nmingotti at 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 at lists.squeakfoundation.org <mailto:Beginners at lists.squeakfoundation.org>
>> http://lists.squeakfoundation.org/mailman/listinfo/beginners <http://lists.squeakfoundation.org/mailman/listinfo/beginners>
>> _______________________________________________
>> Beginners mailing list
>> Beginners at lists.squeakfoundation.org <mailto:Beginners at lists.squeakfoundation.org>
>> http://lists.squeakfoundation.org/mailman/listinfo/beginners <http://lists.squeakfoundation.org/mailman/listinfo/beginners>
>
> _______________________________________________
> Beginners mailing list
> Beginners at lists.squeakfoundation.org <mailto:Beginners at lists.squeakfoundation.org>
> http://lists.squeakfoundation.org/mailman/listinfo/beginners <http://lists.squeakfoundation.org/mailman/listinfo/beginners>
> _______________________________________________
> Beginners mailing list
> Beginners at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/mailman/listinfo/beginners
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.squeakfoundation.org/pipermail/beginners/attachments/20190726/61ed99ed/attachment-0001.html>
More information about the Beginners
mailing list