ProportionalLayout

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 mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/beginners