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@200; layoutPolicy: ProportionalLayout new. greenMorph := Morph new color: Color green. bigMorph addMorph: greenMorph fullFrame: (LayoutFrame 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. bigMorph addMorph: yellowMorph fullFrame: (LayoutFrame 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. bigMorph addMorph: cyanMorph fullFrame: (LayoutFrame 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. bigMorph addMorph: magentaMorph fullFrame: (LayoutFrame fractions: (Rectangle left: 0 right: 0.5 top: 0 bottom: 1) offsets: (Rectangle left: 60 right: -5 top: 40 bottom: -40)). blueMorph := Morph new. bigMorph addMorph: blueMorph fullFrame: (LayoutFrame 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 -
beginners@lists.squeakfoundation.org