cal-button.lzx

<library>



    <class name="calButton" clickable="true" font="Verdana,sans-serif" fontsize="10" fontstyle="bold">
        <attribute name="label" value="" type="string"/>
        <attribute name="icon" value="" type="string"/>
        <attribute name="divider" value="3" type="number"/>
        <attribute name="leftcap" value="oval" type="string"/>
        <attribute name="rightcap" value="oval" type="string"/>
        <attribute name="leftinset" value="0"/>
        <attribute name="rightinset" value="0"/>
        <attribute name="yadjust" value="2" type="number"/>
        <attribute name="normalRsrcNumber" value="1" type="number"/>
        <attribute name="overRsrcNumber" value="2" type="number"/>
        <attribute name="downRsrcNumber" value="3" type="number"/>
        <attribute name="deselectRsrcNumber" value="4" type="number"/>

        <attribute name="keepinitialwidth" value="false"/>
        <attribute name="enabled" value="true"/>
        <attribute name="mouseisdown" value="false"/>
        <event name="onsafeclick"/>        

        <setter name="width" args="w">
            super.setAttribute('width', w);
            this.keepinitialwidth = true;
        </setter>

        <method name="setEnabled" args="b">
            this.enabled = b;
            if (this.enabled) {
                this.bkgnd.lft.setAttribute('frame', this.normalRsrcNumber );
                this.bkgnd.mid.setAttribute('frame', this.normalRsrcNumber );
                this.bkgnd.rgt.setAttribute('frame', this.normalRsrcNumber );
            } else {
                this.bkgnd.lft.setAttribute('frame', this.deselectRsrcNumber );
                this.bkgnd.mid.setAttribute('frame', this.deselectRsrcNumber );
                this.bkgnd.rgt.setAttribute('frame', this.deselectRsrcNumber );
            }
        </method>

        <!-- VIEWS -->
        <view name="bkgnd" width="100%">
            <view name="lft">
                <state name="oval">
                    <attribute name="applied" value="classroot.leftcap == 'oval'" when="always"/>
                    <attribute name="resource" value="leftcap_oval"/>
                    <attribute name="leftinset" value="classroot.leftinset == 0?  8:classroot.leftinset" when="always"/>
               </state>

                <state name="roundrect">
                    <attribute name="applied" value="classroot.leftcap == 'roundrect'" when="always"/>
                    <attribute name="resource" value="leftcap_roundrect"/>
                    <attribute name="leftinset" value="classroot.leftinset == 0?  5:classroot.leftinset" when="always"/>
                </state>

                <state name="rect">
                    <attribute name="applied" value="classroot.leftcap == 'rect'" when="always"/>
                    <attribute name="resource" value="leftcap_rect"/>
                    <attribute name="leftinset" value="classroot.leftinset == 0?  6:classroot.leftinset" when="always"/>
                </state>

                 <state name="shear">
                    <attribute name="applied" value="classroot.leftcap == 'shear'" when="always"/>
                    <attribute name="resource" value="leftcap_shear"/>
                    <attribute name="leftinset" value="classroot.leftinset == 0?  3:classroot.leftinset" when="always"/>
                </state>
           </view>

            <view name="mid" resource="button_middle" stretches="width" options="releasetolayout"/>

            <view name="rgt">
                <state name="oval">
                    <attribute name="applied" value="classroot.rightcap == 'oval'" when="always"/>
                    <attribute name="resource" value="rightcap_oval"/>
                    <attribute name="rightinset" value="classroot.rightinset == 0?  12:classroot.rightinset" when="always"/>
                </state>

                <state name="rect">
                    <attribute name="applied" value="classroot.rightcap == 'rect'" when="always"/>
                    <attribute name="resource" value="rightcap_rect"/>
                    <attribute name="rightinset" value="classroot.rightinset == 0?  9:classroot.rightinset" when="always"/>
               </state>

                <state name="roundrect">
                    <attribute name="applied" value="classroot.rightcap == 'roundrect'" when="always"/>
                    <attribute name="resource" value="rightcap_roundrect"/>
                    <attribute name="rightinset" value="classroot.rightinset == 0?  9:classroot.rightinset" when="always"/>
              </state>

                <state name="shear">
                    <attribute name="applied" value="classroot.rightcap == 'shear'" when="always"/>
                    <attribute name="resource" value="rightcap_shear"/>
                    <attribute name="rightinset" value="classroot.rightinset == 0?  5:classroot.rightinset" when="always"/>
                </state>
            </view>
            <resizelayout name="lyt" axis="x"/>
        </view>

        <!-- EXTRA STATES FOR SUPPORTING VIEWS AND METHODS FOR UPDATING -->
        <state name="measuretextwidth">
            <attribute name="applied" value="classroot.label != ''" when="always"/>
            <!-- if applied is TRUE, then button has a label so add text view support -->

            <text name="title_hilite" opacity=".4" width="200" fgcolor="#143B45">
                <attribute name="y" value="parent.yadjust - 1" when="once"/>
                <attribute name="x" value="parent.bkgnd.lft.leftinset - 1" when="always"/>
                <attribute name="text" value="parent.label" when="always"/>
            </text>
            <text name="title" fgcolor="white" pixellock="true" width="200">
                <attribute name="y" value="parent.yadjust" when="once"/>
                <attribute name="x" value="parent.bkgnd.lft.leftinset" when="always"/>
                <attribute name="text" value="parent.label" when="always"/>
            </text>

            <handler name="ontext" reference="this.title">
                this.update();
            </handler>

            <method name="update">
                if (this.keepinitialwidth) {
                    this.title.setAttribute('x', Math.floor((this.width - this.title.getTextWidth())/2.0));
                    this.title_hilite.setAttribute('x', this.title.x + 0.5);
                } else {
                    this.setAttribute('width', Math.round(this.title.getTextWidth()) + this.bkgnd.lft.leftinset + this.bkgnd.rgt.rightinset);
                }
            </method>
            
            <method name="domouseup">
                this.title_hilite.setAttribute('y', this.yadjust + 0.7);
                this.title.setAttribute('y', this.yadjust);
            </method>

            <method name="domousedown">
                this.title_hilite.setAttribute('y', this.yadjust + 1.7);
                this.title.setAttribute('y', this.yadjust + 1);
            </method>


        </state>

        <state name="measureiconwidth">
            <attribute name="applied" value="classroot.icon != ''" when="always"/>
            <!-- if applied is TRUE, then button has an icon so add icon support -->

            <view name="iconv" x="${parent.leftinset}" oninit="this.placeicon()">
                <attribute name="resource" value="parent.icon" when="always"/>
                <attribute name="defaultY" type="number" value="0"/>
                <method name="placeicon">
                    this.defaultY = Math.floor((this.parent.height - this.height)/2.0);
                    this.setAttribute('y', defaultY);
                </method>
            </view>
            
            <method name="update">
                this.iconv.setAttribute('x', this.bkgnd.lft.leftinset);
                if (!this.keepinitialwidth) this.setAttribute('width', this.iconv.width + this.bkgnd.lft.leftinset + this.bkgnd.rgt.rightinset);
            </method>

            <method name="domouseup">
                this.iconv.setAttribute('y', this.iconv.defaultY);
            </method>


            <method name="domousedown">
                this.iconv.setAttribute('y', this.iconv.defaultY + 1);
            </method>

        </state>

        <state name="measureboth">
            <attribute name="applied" value="(classroot.icon != '') && (classroot.label != '')" when="always"/>
            <!-- if applied is TRUE, then button has an icon and text so add support for both-->

            <method name="update">
                this.iconv.setAttribute('x', this.bkgnd.lft.leftinset);
                this.title_hilite.setAttribute('x', this.iconv.x + this.iconv.width + 
                                       this.divider );
                this.title.setAttribute('x', this.iconv.x + this.iconv.width + 
                                  this.divider );
                if (!this.keepinitialwidth) this.setAttribute('width', this.iconv.width + 
                  this.divider + Math.round(this.title.getTextWidth()) + 
                  this.bkgnd.lft.leftinset + this.bkgnd.rgt.rightinset);
            </method>

            <method name="domousedown"> 
                this.iconv.setAttribute('y', this.iconv.defaultY + 1);
                this.title_hilite.setAttribute('y', this.yadjust + 1.7);
                this.title.setAttribute('y', this.yadjust + 1);
            </method>

            <method name="domouseup">
                this.iconv.setAttribute('y', this.iconv.defaultY);
                this.title_hilite.setAttribute('y', this.yadjust + 0.7);
                this.title.setAttribute('y', this.yadjust);
            </method>
        </state>
      
      
    <handler name="oninit">
        this.setAttribute('enabled', this.enabled);
        this.update();
        
        // A Delegate to perform an action on the event 'onsafeclick'
        // In genernal, when a user clicks on this button a onmouseup event is 
        // sent, then an onclick. Unfortunately, the scripts for both events are 
        // performed within a flash frame and therefore the mouseup 'image' 
        // refresh occurs after the onclick script is executed.
        // If this script is long, the image on the button does not switch and 
        // appears like a bug.
        
        this.ocd = new LzDelegate(this,"safeclick");
   </handler>

    <!-- OTHER METHODS -->
    <method name="safeclick" args="v">
        this.ocd.unregisterAll()
        if (this.onsafeclick) {
            this.onsafeclick.sendEvent();
        }
    </method>

    <method name="domouseover">
        this.bkgnd.lft.setAttribute('frame', this.overRsrcNumber );
        this.bkgnd.mid.setAttribute('frame', this.overRsrcNumber );
        this.bkgnd.rgt.setAttribute('frame', this.overRsrcNumber );
    </method>

    <!-- MOUSE EVENTS -->
    <handler name="onmousedown">
        if ( this.enabled) {
            this.mouseisdown = true;
            this.domousedown();
            this.bkgnd.lft.setAttribute('frame', this.downRsrcNumber );
            this.bkgnd.mid.setAttribute('frame', this.downRsrcNumber );
            this.bkgnd.rgt.setAttribute('frame', this.downRsrcNumber );
        }
    </handler>

    <handler name="onmouseup">
        this.mouseisdown = false;
        if (this.enabled) {
            this.domouseup();
            if (this.mouseisover) {
                this.bkgnd.lft.setAttribute('frame', this.overRsrcNumber );
                this.bkgnd.mid.setAttribute('frame', this.overRsrcNumber );
                this.bkgnd.rgt.setAttribute('frame', this.overRsrcNumber );
            } else {
                this.bkgnd.lft.setAttribute('frame', this.normalRsrcNumber );
                this.bkgnd.mid.setAttribute('frame', this.normalRsrcNumber );
                this.bkgnd.rgt.setAttribute('frame', this.normalRsrcNumber );
            }
        }
    </handler>

    <handler name="onmouseover">
        if ( this.enabled) {
            this.mouseisover = true;
            if (this.mouseisdown) {
                this.domousedown();
                this.bkgnd.lft.setAttribute('frame', this.downRsrcNumber );
                this.bkgnd.mid.setAttribute('frame', this.downRsrcNumber );
                this.bkgnd.rgt.setAttribute('frame', this.downRsrcNumber );
            } else {
                this.domouseup();
                this.bkgnd.lft.setAttribute('frame', this.overRsrcNumber );
                this.bkgnd.mid.setAttribute('frame', this.overRsrcNumber );
                this.bkgnd.rgt.setAttribute('frame', this.overRsrcNumber );
            }
        }
      </handler>

    <handler name="onmouseout"> 
        this.mouseisover = false;
        this.domouseup();
        this.bkgnd.lft.setAttribute('frame', this.normalRsrcNumber );
        this.bkgnd.mid.setAttribute('frame', this.normalRsrcNumber );
        this.bkgnd.rgt.setAttribute('frame', this.normalRsrcNumber );
     </handler>

    <handler name="onclick">
        this.ocd.register(lz.Idle,"onidle");
    </handler>




    
   </class>



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

Cross References

Classes