A layout is used to automatically distribute, align, or otherwise arrange the subviews of the view that contains it (it arranges the views that are it's siblings). Using a layout obviates the need to precisely position the views of an application and allows an application to resize or reconfigure gracefully according to the constraints of its container.
The layout class is a null layout — it does not arrange
it's siblings. It is the base class that other layouts extend.
simplelayout is a basic extension of the
layout class. The example below illustrates using a simple
layout to distribute views along the y axis.
Example 8. Using a simple layout to arrange views
<canvas height="60">
<view bgcolor="#DDFFFF">
<text>Without a layout, it can be difficult</text>
<text x="2" y="5">to manually position your views</text>
</view>
<view y="25" bgcolor="#FFDDFF">
<simplelayout axis="y"/>
<text>A layout makes</text>
<text>positioning simple and automatic</text>
</view>
</canvas>
Layouts are so important, there is a shorthand for specifying them using the ??? attribute of <view>. The previous example could be more compactly specified:
Because <simplelayout> is the default
layout, the above example could also have used just layout="axis:
y".
Layouts, like constraints and animators, affect specific attributes of a view. Views can have more than one layout, as long as each set of attributes associated with a layout does not overlap with any of the other sets.
layout.lzx| Name (CSS property) | Type (tag) | Type (js) | Default | Category |
|---|---|---|---|---|
locked
|
expression | Boolean | 2 | read/write |
| Set to true if layout is locked from updates. | ||||
subviews
|
expression | [lz.view] | read/write | |
Array of the views this layout controls. Used by subclasses of
layout to implement their arrangement algorithm by
adjusting the appropriate attribute of each view.
|
||||
updateDelegate
|
expression | lz.handler | read/write | |
| A delegate used to update the layout. | ||||
Attributes inherited from <node>
classroot, cloneManager, data, datapath, defaultplacement, id, ignoreplacement, immediateparent, inited, initstage, name, nodeLevel, options, parent, placement, styleclass, subnodes, transition
Methods
-
addSubview() -
Called whenever a new subview is added to the layout. This is called both in the layout constructor and when a new subview is called after layout has been created. This is only called if the view's "ignorelayout" option is not set. Subclasses may override this method to decide whether or not to add a particular view to the
subviewsarray.
-
ignore() -
Called when a subview is to be ignored by the layout. By default, most layouts include all the subviews of a given view.
-
lock() -
Lock the layout from processing updates. This allows the layout to register for events that it generates itself. Unfortunately, right now all subclass routines that can generate calls that may result in the layout calling itself should check the lock before processing. Failure to do so is not catastrophic, but it will slow down your program.
-
releaseLayout() -
![[Caution]](images/caution.png)
This method is deprecated will be removed from a future release.
-
removeSubview() -
-
reset() -
Parameter Name Type Description e Any The event data that is passed by the delegate that called this funciton. This is usually unused, since more than one type of delegate can call reset.
-
setLayoutOrder() -
Reorder the second subview given to this function so that it immediately follows the first. Doesn't touch the placement of the first subview given
Parameter Name Type Description sub1 lz.view The reference subview which the second subview should follow in the layout order. Alternatively, can be "first" or "last" sub2 lz.view The subview to be moved after the reference subview.
-
swapSubviewOrder() -
Parameter Name Type Description sub1 lz.view The reference subview which the second subview should follow in the layout order. sub2 lz.view The subview to be moved after the reference subview.
-
unlock() -
Parameter Name Type Description ignore Any Ignored. unlockaccepts an argument as a convenience so that it can be used as an event handler method.
-
update() -
Update is called whenever the layout needs to be updated.
In the
layoutclass, update does nothing. Subclasses of layout override this method to implement their layout algorithm. For best performance, any update method should check first to see if the layout islockedand return immediately if so. This will avoid redundant updates when a layout is in transition.Parameter Name Type Description e Any The event data that caused this update. Typically unused since various events may cause an 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