scrollbar.lzx

<library>
    <include href="base/basebuttonrepeater.lzx"/>
    <include href="base/basescrollbar.lzx"/>
    <include href="utils/layouts/stableborderlayout.lzx"/>
    <include href="scrollbar_xresources.lzx"/>
    <include href="scrollbar_yresources.lzx"/>


    <!-- A scrollbar manipulates the x or y position of a target view that is
          clipped by its parent, creating a scrolling effect when the user
          clicks up/down arrows, clicks on the scroll track or drags the
          thumb. -->
<class name="scrollbar" extends="basescrollbar" bgcolor="0x595959">

    <!--- If this is defined, it will be used as the scrollbar's background
          color when it is disabled. If not provided, the scrollbar will use
          the bgcolor of its closest parent that has a bgcolor defined.  -->
    <attribute name="disabledbgcolor" value="null"/>

    <handler name="oninit" reference="canvas">
        this._showEnabled();
    </handler>
    
    <!--- @keywords private -->
    <method name="_showEnabled">
        
        if (!_enabled) {
            var newbgcolor = this.disabledbgcolor;
            if (newbgcolor == null) {
                var p = immediateparent;
                while (p.bgcolor == null && p != canvas) {
                    p = p.immediateparent;
                }
                newbgcolor = p.bgcolor;
                if (newbgcolor == null) newbgcolor = 0xffffff;
            }
            this.setAttribute('bgcolor', newbgcolor);
        } else {
            this.setAttribute('bgcolor', 0x595959);
        }
        super._showEnabled();
    
    </method>

    <state applied="${this.parent.axis == 'y'}">
        <attribute name="width" value="14"/>

        <!-- up arrow -->
        <view name="toparrow">
            <basescrollarrow x="1" y="1" resource="lzscrollbar_ybuttontop_rsc" direction="-1"/>
        </view>
        <view name="scrolltrack">
            <!-- top of the scroll track -->
            <basescrolltrack name="top" x="1" resource="lzscrollbar_ytrack_rsc" stretches="height" overResourceNumber="0" downResourceNumber="2" disabledResourceNumber="3" direction="-1">
                <attribute name="height" value="${parent.thumb.y}"/>
                <attribute name="width" value="${parent.width}"/>
            </basescrolltrack>

            <!-- thumb -->
             <basescrollthumb name="thumb" x="1">
                 <view resource="lzscrollbar_ythumbtop_rsc"/>
                 <view resource="lzscrollbar_ythumbmiddle_rsc" stretches="both"/>
                 <view resource="lzscrollbar_ythumbbottom_rsc"/>
                 <stableborderlayout axis="y"/>
                 <!-- note: stableborderlayout only acts on the first three views -->
                 <view resource="lzscrollbar_ythumbgripper_rsc" x="1" height="${Math.min(200, parent.height-16)}" width="11" clip="true" valign="middle"/>
            </basescrollthumb>

            <!-- bottom of the scroll track -->
            <basescrolltrack name="bottom" x="1" resource="lzscrollbar_ytrack_rsc" stretches="height" overResourceNumber="0" downResourceNumber="2" disabledResourceNumber="3">
                <attribute name="y" value="${parent.thumb.y+parent.thumb.height}"/>
                <attribute name="height" value="${parent.height - parent.thumb.y - parent.thumb.height}"/>
                <attribute name="width" value="${parent.width}"/>
            </basescrolltrack>


        </view>     <!-- scrolltrack -->

        <!-- down arrow -->
        <view height="14" name="bottomarrow">
            <basescrollarrow x="1" resource="lzscrollbar_ybuttonbottom_rsc"/>
        </view>
        <stableborderlayout axis="y"/>
     </state>


    <state applied="${this.parent.axis == 'x'}">
        <attribute name="height" value="14"/>

        <!-- left arrow -->
        <view name="leftarrow">
            <basescrollarrow x="1" y="1" resource="lzscrollbar_xbuttonleft_rsc" direction="-1"/>
        </view>
        <view name="scrolltrack" height="12" y="1">
            <!-- top of the scroll track -->
            <basescrolltrack name="top" resource="lzscrollbar_xtrack_rsc" stretches="width" overResourceNumber="0" downResourceNumber="2" disabledResourceNumber="3" direction="-1">
                <attribute name="width" value="${parent.thumb.x}"/>
                <attribute name="height" value="${parent.height}"/>
            </basescrolltrack>

            <!-- thumb -->
             <basescrollthumb name="thumb" y="0">
                 <view resource="lzscrollbar_xthumbleft_rsc"/>
                 <view resource="lzscrollbar_xthumbmiddle_rsc" stretches="both"/>
                 <view resource="lzscrollbar_xthumbright_rsc"/>
                 <stableborderlayout axis="x"/>
                 <!-- note: stableborderlayout only acts on the first three views -->
                 <view resource="lzscrollbar_xthumbgripper_rsc" y="1" width="${Math.min(200, parent.width-16)}" clip="true" align="center"/>
            </basescrollthumb>

            <!-- bottom of the scroll track -->
            <basescrolltrack name="bottom" resource="lzscrollbar_xtrack_rsc" stretches="width" overResourceNumber="0" downResourceNumber="2" disabledResourceNumber="3">
                <attribute name="x" value="${parent.thumb.x+parent.thumb.width}"/>
                <attribute name="width" value="${parent.width - parent.thumb.x - parent.thumb.width}"/>
                <attribute name="height" value="${parent.height}"/>
            </basescrolltrack>


        </view>     <!-- scrolltrack -->

        <!-- right arrow -->
        <view width="14">
            <basescrollarrow name="rightarrow" y="1" resource="lzscrollbar_xbuttonright_rsc"/>
        </view>
        <stableborderlayout axis="x"/>
     </state>

    <state applied="${this.parent.axis == 'x' && this.parent.othersb}">
        <view name="patch" x="${parent.width}" bgcolor="${(parent._enabled || parent.othersb._enabled)                 ? 0xbdbdbd : parent.disabledbgcolor}" width="${parent.height}" height="${parent.height}"/>
    </state>

    <doc>
      <tag name="shortdesc"><text>
          Provides a standard scrollbar.
      </text></tag>
      <text>

        <p>By default, the <tagname>scrollbar</tagname> tag creates a vertical
          scrollbar.  Setting <code>axis="x"</code> produces a horizontal scrollbar.
          If you do not specify a <attribute>scrolltarget</attribute>, the
          scrollbars will also control their own layout: the vertical scrollbar
          will be aligned the the right of the parent view and horizontal
          scrollbar will be aligned to the bottom.</p>

        <p>
          Typically one or two scrollbars and a single view that is the contents
          to be scrolled, the scrolltarget, are contained within a parent view with
          <code>clip=true</code>.  The scrolling effect is produced by moving
          the scrolltarget while its visible region is clipped by the parent view.
        </p>

        <example title="Simple scrollbar">
          <canvas height="100">
          <view name="main" width="100" height="80" clip="true">
          <text multiline="true">
          1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10
          </text>
          <scrollbar/>
          </view>
          </canvas>
        </example>
        
        <p>In the example above, the scrolltarget is the 'contents' view. A
          scrollbar moves its <attribute>scrolltarget</attribute> along its
          axis.  The attribute that is controlled by the scrollbar may be
          specified as the <attribute>scrollattr</attribute>, overriding the
          default value of <code>x</code> or <code>y</code>.</p>

          </text>
        </doc>

</class>
</library>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2001-2009 Laszlo Systems, Inc.  All Rights Reserved.              *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
<!-- @LZX_VERSION@                                                         -->