<simplelayout>
Prev  Layouts  Next

<simplelayout>
A quick layout for arranging siblings vertically or horizontally.

JavaScript: lz.simplelayout
extends <layout> » <node> » lz.Eventable »

simplelayout extends <LzLayout>. simplelayout arranges sibling views along the x and y axis, or both. simplelayout places each sibling view based on the width (or height) of the previous subview, depending on whether the x-axis or the y-axis was specified.

The following example illustrates the use of simplelayout. The first instance of simplelayout lays out the sibling views 'across' and 'down' along the y-axis. Then the 'across' and 'down' views apply their own simplelayout: three blue views are simply laid out on the x-axis within the 'across' view, and three red views are simply laid out on the y-axis within the 'down' view.

Example 74. Using simplelayout

<canvas height="160">
        
        <simplelayout axis="y" spacing="10"/>
        
        <view id="across">
            <simplelayout 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>
        
        <view id="down">
            <simplelayout axis="y" spacing="10"/>
            <view bgcolor="red" height="30" width="50"/>
            <view bgcolor="red" height="30" width="50"/>
            <view bgcolor="red" height="30" width="50"/>
        </view>
        
    </canvas>
edit
Flash
edit
HTML5

More than one layout can be applied to a view as long as the attributes are controlled by only one layout. This next example demonstrates this feature.

Example 75. Using more than one layout

<canvas height="120">
        <view>
            <view bgcolor="blue" height="30" width="50"/>
            <view bgcolor="blue" height="30" width="50"/>
            <view bgcolor="blue" height="30" width="50"/>
            <simplelayout axis="x" spacing="0"/>
            <simplelayout axis="y" spacing="0"/>
        </view>
    </canvas>
edit
Flash
edit
HTML5

Finally, like all layouts, when an attribute of a subview changes its value and that new value effects the overall layout, then the layout object will update automatically. This is shown in the next example.

Example 76. Using attributes with layouts

<canvas height="65">
        <view>
            <view bgcolor="blue" height="30" width="50"/>
            <view bgcolor="red" height="30" width="50" onclick="this.animate('width', 100, 500, true)"/>
            <view bgcolor="blue" height="30" width="50"/>
            <simplelayout axis="x" spacing="10"/>
        </view>
        <view>
            <text>Click on the red rectangle. Layout is conserved as its size changes.</text>
        </view>
        <simplelayout axis="y" spacing="15"/>
    </canvas>
edit
Flash
edit
HTML5

Attributes

Name (CSS property) Type (tag) Type (js) Default Category
axis string String y read/write
  The axis in which this layout operates. One of 'x' or 'y'.
inset expression any 0 read/write
  A pixel amount to inset the first view controlled by the layout
spacing expression any 0 read/write
  A pixel amount to use between each view in the layout

Attributes inherited from <layout>

locked, subviews, updateDelegate

Attributes inherited from <node>

classroot, cloneManager, data, datapath, defaultplacement, id, ignoreplacement, immediateparent, inited, initstage, name, nodeLevel, options, parent, placement, styleclass, subnodes, transition

Methods

update()
simplelayout.update(v);
This method is usually called automatically when any of the views controlled by the layout change their size in the layout axis, or their visibility. However it can be called directly to force the layout to update
Parameter Name Type Description
v    

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

Methods inherited from lz.Eventable

destroy, setAttribute

Events

Events inherited from <node>

onconstruct, ondata, oninit

Events inherited from lz.Eventable

ondestroy

Copyright © 2002-2010 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.

Prev  Up  Next
<simpleboundslayout>  Home  <stableborderlayout>