wrappinglayout extends <layout>, 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 78. 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 79. 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>
| Name (CSS property) | Type (tag) | Type (js) | Default | Category |
|---|---|---|---|---|
axis
|
string | String | x | read/write |
| The primary axis for wrapping. | ||||
duration
|
expression | any | 0 | read/write |
| If given, a number of miliseconds to use to animate the views in to place. | ||||
spacing
|
expression | any | 1 | read/write |
| 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
|
expression | any | 0 | read/write |
| A pixel amount to offset the first view controlled by the layout in x axis | ||||
xspacing
|
expression | any | this.spacing | read/write |
| A pixel amount to use between the views controlled by the layout in the x axis. | ||||
yinset
|
expression | any | 0 | read/write |
| A pixel amount to offset the first view controlled by the layout in y axis | ||||
yspacing
|
expression | any | this.spacing | read/write |
| A pixel amount to use between the views controlled by the layout in the y axis. | ||||
Attributes inherited from <node>
classroot, cloneManager, data, datapath, defaultplacement, id, ignoreplacement, immediateparent, inited, initstage, name, nodeLevel, options, parent, placement, styleclass, subnodes, transition
Methods
Methods inherited from <layout>
addSubview, ignore, lock, releaseLayout, removeSubview, reset, setLayoutOrder, swapSubviewOrder, unlock, update
Methods inherited from <node>
animate, applyConstraintMethod, applyData, childOf, completeInstantiation, construct, createChildren, dataBindAttribute, destroy, determinePlacement, getOption, getUID, init, lookupSourceLocator, releaseConstraint, releaseConstraintMethod, searchImmediateSubnodes, searchSubnodes, setOption, setSelected, updateData
Events