//
Lively Kernel canvas
How
to
use
Layouts?
26
true
save
false
null
true
true
true
Lively
currently
has
three
layout
managers:
-
LayoutManager
(default)
-
HorizontalLayout
-
VerticalLayout
A
layout
manager
handles
the
positioning
and
resizing
of
a
morph
and
it's
submorphs.
The
current
layout
policy
is
set
using
the
layoutManager
property
of
a
morph:
morph.layoutManager
=
new
HorizontalLayout()
17
true
6
Besides
the
layout
manager
that
defines
the
overall
strategy
of
how
to
layout,
morphs
define
layout
properties
that
parameterize
the
layout
process:
-
margin:
defines
the
spacing
outside
of
a
morph
(Rectangle)
-
padding:
defines
the
spacing
inside
of
a
morph
(Rectangle)
-
minExtent:
morph
should
not
be
resized
smaller
than
this
(Point)
-
hResizing
/
vResizing:
defines
the
resize
behavior
of
a
morph
when
the
extent
of
it's
owner
changes
(String)
values
can
be:
-
rigid
--
don't
resize
-
shrinkWrap
--
resize
for
the
unified
bounds
of
a
morph's
submorphs
-
spaceFill
--
as
big
as
possible,
when
multiple
morphs
are
space
filling
they
share
the
space
evenly
-
proportional
--
proportionally
resize
a
morph
with
it's
owner
17
10
true
Examples:
17
true
var
morph
=
$morph(
'morphExample01'
);
morph.layoutManager
=
new
HorizontalLayout();
morph.padding
=
Rectangle.inset(
20
,
10
,
20
,
10
);
morph.submorphs[
0
].hResizing
=
'spaceFill'
morph.submorphs[
0
].vResizing
=
'spaceFill'
morph.submorphs[
1
].hResizing
=
'spaceFill'
morph.submorphs[
1
].vResizing
=
'spaceFill'
morph.relayout()
14
6
true
var
morph
=
$morph(
'morphExample02'
);
morph.layoutManager
=
new
VerticalLayout();
morph.submorphs[
0
].hResizing
=
'spaceFill'
morph.submorphs[
0
].vResizing
=
'spaceFill'
morph.submorphs[
1
].margin
=
Rectangle.inset(1
0
,
10,
1
0
,
1
0
)
morph.submorphs[
1
].hResizing
=
'spaceFill'
morph.submorphs[
1
].vResizing
=
'rigid'
morph.relayout()
14
6
true
-0.0015900105226667183
var
morph
=
$morph(
'morphExample03'
);
morph.withAllSubmorphsDo(function()
{
this.hResizing
=
'proportional'
this.vResizing
=
'proportional'
})
14
true
Try
to
resize
me!
-0.002191183146112921
14
2
Wiki
control
true
true
//
null
98