DOC: Add notes to learn about Layouts in Cuis

[hhzl]

Ad some notes to https://github.com/Cuis-Smalltalk/Cuis-Smalltalk-Dev/tree/master/Documentation for learners how layouts work in Cuis.

Tentative title

Some suggestions for Cuis Morphic experiments for learners.

KenD to ML

Ken.Dickey
Ken.Dickey@whidbey.com Sun, Mar 29, 2015 at 4:26 AM

On Sat, 28 Mar 2015 18:47:04 -0400
"Phil (list)" pbpublist@gmail.com wrote:

I’ve been looking up Squeak/Pharo/Cuis documentation on using layouts
(which may be the issue) but have made little headway.

Cuis layouts are different from Squeak or Pharo. Given the changes going on, many things require some code reading and playing around.

To understand Layouts and LayoutSpecs, I did simple editors for them. They are located in the Morphic-Misc1 package at:
https://github.com/KenDickey/Cuis-Smalltalk-Morphic-Misc1

From the readme:
"
After loading this package, one can select a morph, open its menu from the halo, and edit its LayoutSpec.
If the morph is a LayoutMorph, one can also open an editor for the LayoutMorph from the halo menu.
"

Inspecting the window submorphs should help as well.

Cheers,
-KenD

[hhzl]

example2
"
self example2.
" | f g |
g := LayoutMorph initializedInstance openInWorld.
g padding: 0.5. "center"
f := RectangleLikeMorph new.
g morphExtent:400@400; color: Color orange.
g addMorph: f layoutSpec: (LayoutSpec proportionalWidth: 0.25 proportionalHeight: 0.25).
f morphPosition:150@150; color: Color blue.
g morphPosition:70@70.

[hhzl]

More notes:

H. Hirzel
hannes.hirzel@gmail.com Fri, May 15, 2015 at 8:05 AM
To: Juan Vuletich juan@jvuletich.org
Cc: Discussion of Cuis Smalltalk cuis@jvuletich.org

I tested all examples in

https://github.com/hhzl/Cuis-Add-Ons/blob/master/Add-Ons-LayoutDemo.pck.st

in the recent Cuis4.2-2243.image

and all work as they did a year ago

For example we have LayoutDemo0 which shows how to subclass
SystemWindow and set the window title.

1. Subclass SystemWindow

2. Create initialize method

   initialize

         super initialize.
   
         self buildMorphicWindow.
   

3. Define your #buildMorphicWindow method

         buildMorphicWindow
   
         self setLabel: self className
   

A simplified variant of LayoutDemo1b is to have step number 3 do the following:

1. Define your #buildMorphicWindow method

   buildMorphicWindow
   
        self setLabel: self className.
        self layoutMorph  addMorph:
                          (DragAndDropAreaMorph new color: Color green).
   

This gives you a Window in which you can drop other morphs. A nice way
to keep Morph examples around.

So or with a code snippet from an earlier mail in this thread.

  buildMorphicWindow


     | f g |

        self setLabel: self className.


        g _ RectangleLikeMorph new.
        f _ EllipseMorph new.
        g morphExtent: 400@400; color: Color orange.
        g addMorph: f.
        f morphPosition: 50@50; color: Color blue.
        g morphPosition:70@70.


        self layoutMorph  addMorph: g

[hhzl]

@KenDickey : Thank you for

https://github.com/Cuis-Smalltalk/Cuis-Smalltalk-Dev/blob/master/Documentation/LayoutUsage.md