simplelayout.lzx

<library>
    <include href="utils/layouts/layout.lzx"/>
<class name="simplelayout" extends="layout">
    <!--- The axis in which this layout operates. One of 'x' or 'y'. -->
    <attribute name="axis" value="y" setter="this.setAxis( axis )" type="string"/>

    <!--- A pixel amount to inset the first view controlled by the layout-->
    <attribute name="inset" value="0" setter="this.inset = inset;                if( this.subviews && this.subviews.length ) this.update();                if (this['oninset']) this.oninset.sendEvent(this.inset)"/>

    <!--- A pixel amount to use between each view in the layout -->
    <attribute name="spacing" value="0" setter="this.spacing = spacing;                       if(this.subviews && this.subviews.length ) this.update();                       if (this['onspacing']) this.onspacing.sendEvent(this.spacing)"/>

    <!--- @keywords private -->
    <method name="setAxis" args="a">
        if (this['axis'] == null || this.axis != a) {
            this.axis = a;
            this.sizeAxis = a == "x" ? "width" : "height"

            if( this.subviews.length ) this.update();
            if (this['onaxis']) this.onaxis.sendEvent(this.axis);
        }
    </method>

    <!--- @keywords private -->
    <method name="addSubview" args="newsub">
        this.updateDelegate.register( newsub,  "on" + this.sizeAxis);
        this.updateDelegate.register( newsub,  "onvisible" );
        //this is an optimization to avoid calling update in the simple case
        //where a single subview was just added
        if (!this.locked) {
            var rv = null;
            var sv = this.subviews;
            for (var i = sv.length-1; i >= 0; --i) {
                if (sv[i].visible) {
                    rv = sv[i];
                    break;
                }
            } 
            
            if (rv) {
                var p = rv[ this.axis ] + rv[ this.sizeAxis ] + this.spacing;
            } else {
                var p = this.inset;
            }
            
            newsub.setAttribute(this.axis, p);
        }
        super.addSubview( newsub );
    </method>

    <!--- 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 -->
    <method name="update" args="v=null">
        
        if ( this.locked ) return;
        var l = this.subviews.length;
        var c = this.inset;

        for(var i=0; i < l; i++) {
            var s = this.subviews[i]; 
            if ( !s.visible ) continue;
            if ( s[ this.axis ] != c ){
                s.setAttribute( this.axis , c );
            }
            // use computed bounds when necessary
            if (s.usegetbounds){
                s = s.getBounds();
            }
            c += this.spacing + s[ this.sizeAxis ];
        }
        
    </method>
    <doc>
        <tag name="shortdesc"><text>A quick layout for arranging siblings vertically or horizontally.</text></tag>
<text>        <p>
            <literal>simplelayout</literal> extends <sgmltag class="element" role="LzLayout"><LzLayout></sgmltag>. <literal>simplelayout</literal> arranges sibling views along the <literal>x</literal> and <literal>y</literal> axis, or both. <literal>simplelayout</literal> 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.</p>
        
        
        <p>The following example illustrates the use of
            <literal>simplelayout</literal>. The first instance of <literal>simplelayout</literal> lays out the sibling views 'across' and 'down' along the y-axis. Then the 'across' and 'down' views apply their own <literal>simplelayout</literal>: 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. </p>
        <example title="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>
        </example>
        <p>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.</p>
        <example title="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>
        </example>
        <p>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.</p>
        <example title="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>
        </example></text>
    </doc>
</class>
</library>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2001-2010 Laszlo Systems, Inc.  All Rights Reserved.              *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
<!-- @LZX_VERSION@                                                         -->