[Newbies] ProportionalLayout

Bert Freudenberg bert at freudenbergs.de
Fri Feb 20 01:12:46 UTC 2009

```Hi,

on IRC we discussed Morphic layouts tonight and I thought I'd post an
example here. For many simple tasks ProportionalLayout works fine. In
it, for each edge of a morph you specify a fraction of the container's
extent as "anchor", plus an offset in pixels. The position of an edge
is then simply determined by

fraction * extent + offset

So fraction=0 offset=10 means 10 pixels inwards from the left or top
edge (as in the green and yellow morphs below), while fraction=1
offset=-10 means 10 pixels inward from the right or bottom edge (cyan
and blue morphs). Fraction=0.5 is the center, and you can add an
offset of course (right edge of magenta and left edge of cyan).

Select this in a workspace, do-it, and resize the resulting morph.
Then change one number, select and do-it again, and compare both.

===========================
bigMorph := Morph new color: Color red; extent: 200 at 200; layoutPolicy:
ProportionalLayout new.
greenMorph := Morph new color: Color green.
fractions: (Rectangle left: 0 right: 1 top: 0 bottom: 0)
offsets: (Rectangle left: 10 right: -10 top: 10 bottom: 30)).
yellowMorph := Morph new color: Color yellow.
fractions: (Rectangle left: 0 right: 0 top: 0 bottom: 1)
offsets: (Rectangle left: 10 right: 50 top: 40 bottom: -40)).
cyanMorph := Morph new color: Color cyan.
fractions: (Rectangle left: 0.5 right: 1 top: 0 bottom: 1)
offsets: (Rectangle left: 5 right: -10 top: 40 bottom: -40)).
magentaMorph := Morph new color: Color magenta.
fractions: (Rectangle left: 0 right: 0.5 top: 0 bottom: 1)
offsets: (Rectangle left: 60 right: -5 top: 40 bottom: -40)).
blueMorph := Morph new.
fractions: (Rectangle left: 0 right: 1 top: 1 bottom: 1)
offsets: (Rectangle left: 10 right: -10 top: -30 bottom: -10)).
bigMorph openInHand
===========================

It"s much easier to see what happens using #left:right:top:bottom: to
make the layout frames than if you write it in the more common
#corner: notation (a mistake I made on IRC today).

HTH,

- Bert -

```