<wrappinglayout>
A layout for arranging siblings in multiple lines.
JavaScript: wrappinglayout
wrappinglayout extends
LzLayout, and is therefore responsible for
arranging all of the subviews for the view that it is attached to.
wrappinglayout affects the position of its
sibling views, in rows or columns depending on the
axis specified.
wrappinglayout places the first subview at
the top-left corner, then the next view will be placed to the right
(if axis="x") or below (if axis="y"). The
layout continues placing views along the axis until a view overlaps
the width or height of the containing view, then the layout will begin
placing views at the next row or column.
Example 1. wrapping layout to position identical views
<canvas height="100">
<view width="200" bgcolor="silver">
<wrappinglayout axis="x" spacing="10"/>
<view bgcolor="blue" height="30" width="50"/>
<view bgcolor="blue" height="30" width="50"/>
<view bgcolor="blue" height="30" width="50"/>
<view bgcolor="blue" height="30" width="50"/>
<view bgcolor="blue" height="30" width="50"/>
</view>
</canvas>
The following example shows how the layout of views is dynamically
recalculated when the size of the container view changes. The
contained views have been given different shapes and colors to make it
easier for you to follow how they're rearranged.
Example 2. Using wrappinglayout with <resizestate>
<canvas height="100">
<view width="200" bgcolor="silver" onmousedown="rs.apply()" onmouseup="rs.remove()">
<resizestate name="rs"/>
<wrappinglayout axis="x" spacing="10"/>
<view bgcolor="blue" height="30" width="50"/>
<view bgcolor="red" height="10" width="50"/>
<view bgcolor="green" height="40" width="50"/>
<view bgcolor="yellow" height="20" width="50"/>
<view bgcolor="teal" height="30" width="50"/>
</view>
<text y="${canvas.height-this.height}">
Resize the gray view with your mouse to see dynamic layout.
</text>
</canvas>
| Attributes |
| Name |
Usage |
Type (Tag) |
Type (JS) |
Default |
Category |
| axis |
Tag & JS |
string |
String |
x |
setter |
| |
The primary axis for wrapping.
|
|
| duration |
Tag & JS |
expression |
any |
0 |
setter |
| |
If given, a number of miliseconds to use to animate the views in to
place.
|
|
| spacing |
Tag & JS |
expression |
any |
1 |
setter |
| |
A pixel amount to use between the views controlled by the layout in
both axes. By default, both xspacing and yspacing are set to this
value.
|
|
| xinset |
Tag & JS |
expression |
any |
0 |
setter |
| |
A pixel amount to offset the first view controlled by the layout in x
axis
|
|
| xspacing |
Tag & JS |
expression |
any |
|
setter |
| |
A pixel amount to use between the views controlled by the layout in
the x axis.
|
|
| yinset |
Tag & JS |
expression |
any |
0 |
setter |
| |
A pixel amount to offset the first view controlled by the layout in y
axis
|
|
| yspacing |
Tag & JS |
expression |
any |
|
setter |
| |
A pixel amount to use between the views controlled by the layout in
the y axis.
|
|
Attributes inherited from
Node
class, classroot, cloneManager, datapath, id, ignoreAttribute, ignoreplacement, immediateparent, initstage, name, nodeLevel, onconstruct, oninit, parent, placement, subnodes
Methods
| update() |
| wrappinglayout.update() |
|
This method is usually called automatically when any of the views
controlled by the layout change their size , or when the size of
layout's immediateparent changes. However it can be called directly
to force the layout to update
|
|
animate, applyConstraint, applyData, childOf, completeInstantiation, construct, createChildren, dataBindAttribute, destroy, determinePlacement, getAttribute, getOption, getUID, init, lookupSourceLocator, searchImmediateSubnodes, searchSubnodes, setAttribute, setDatapath, setID, setName, setOption
Copyright © 2002-2005 Laszlo Systems, Inc.
All Rights Reserved. Unauthorized use, duplication or
distribution is strictly prohibited. This is the proprietary
information of Laszlo Systems, Inc. Use is subject to license terms.
