radio.lzx

<library>
    <include href="base/baselist.lzx"/>
    <include href="base/baselistitem.lzx"/>
    <include href="base/multistatebutton.lzx"/>
    <include href="utils/layouts/simplelayout.lzx"/>

    <resource name="lzradio_rsrc">
        <frame src="resources/radio/radiobtn_up.swf"/>
        <frame src="resources/radio/radiobtn_mo.swf"/>
        <frame src="resources/radio/radiobtn_dn.swf"/>
        <frame src="resources/radio/radiobtn_dsbl_up.swf"/>
        <frame src="resources/radio/radiobtn_dn.swf"/>
        <frame src="resources/radio/radiobtn_dn.swf"/>
        <frame src="resources/radio/radiobtn_dn.swf"/>
        <frame src="resources/radio/radiobtn_dsbl_dn.swf"/>
    </resource>

    <class name="radiogroup" extends="baselist" itemclassname="radiobutton" defaultselection="0">

        <!--- The layout to use for the radiogroup. Note: if you use a different layout,
              be sure to include the layout library file. -->
        <attribute name="layout" value="class: simplelayout; axis: y; spacing:5"/>

        <!--- @keywords private -->
        <attribute name="value" setter="_setvalue(value)" value="null"/>
        <!--- @keywords private -->
        <event name="onvalue"/>

        <!--- @keywords private -->
        <method name="init">
        
            super.init();
            // Define radiobutton aadescription and aaactive if not specified
            if (canvas['accessible']) {
                var items = this.getNumItems();
                for (var i=1; i<=items; i++) {
                    var rb = this.getItemAt(i-1);
                    if (!rb['aaactive']) {
                        var aad = i + " of " + items;
                        rb.setAttribute('aadescription', aad);
                        rb.setAttribute('aaactive', 'true');
                    }
                }
            }
        
        </method>

        <!--- @keywords private -->
        <method name="acceptValue" args="d, type=null">
            if (type == null) type = this.type;
            var val = lz.Type.acceptTypeValue(type, d, this, 'value');
            //try to find the relevant radio button, or clear selection if none
            this._setvalue( val );
            var item = null;
            if (val != null) {
                item = this.getItem( val );
            }
            if ( item ) this.select( item );
            else this.clearSelection();
        </method>

        <!--- @keywords private -->
        <method name="_setvalue" args="val">
            if ( val == this.value ) return;
            if ( this._initcomplete ){
                var item = null;
                if ( val != null ){
                    item = this.getItem( val );
                }
                this.value = val;
            } else {
                this.value = val;
            }
            if( this.onvalue ) this.onvalue.sendEvent( val );
        </method>
            
        <doc>
          <tag name="shortdesc"><text>Enables a one-of-many selection of its children.</text></tag>
          <text>
            <p>The <tagname>radiogroup</tagname> component encloses a list of
            <tagname link="true">radiobutton</tagname>s.  It ensures that a single
            item is selected at a time. Initially it will select the first item in
            a group if none is set to be selected.  By default the radio buttons
            are spaced vertically.</p>
            
            <p>
            In the following example, the second radio button is selected.  The text
            that appears is separate from the value that is represented by each item.
            In this example, <tt>group1.value</tt> is 2.
            </p>
            
            <example>
            <canvas height="100">
              <radiogroup id="group1">
                <radiobutton value="1" text="one"/>
                <radiobutton value="2" text="two" selected="true"/>
                <radiobutton value="3" text="three"/>
              </radiogroup>
            </canvas>
            </example>
            
            <p>
            You can use radio group with your own layout attribute, by overriding the
            <tagname>view</tagname> layout attribute. The example below uses a wrapping layout
            to create two columns of radio buttons.  Note that a height must be given to
            indicate to the layout where to wrap.
            </p>
            
            <example>
            <canvas height="100">
              <radiogroup height="60" layout="class:wrappinglayout; axis:y">
                <radiobutton value="1" text="one"/>
                <radiobutton value="2" text="two"/>
                <radiobutton value="3" text="three"/>
                <radiobutton value="4" text="four"/>
                <radiobutton value="5" text="five"/>
                <radiobutton value="6" text="six"/>
              </radiogroup>
            </canvas>
            </example>
            
            <p>
            A <tt>radiogroup</tt> can contain a set of any <tagname>baselistitem</tagname>.
            To make radio buttons with
            a different look and feel, create a subclass of <tagname>baselistitem</tagname> to use instead
            of the <tagname>radiobutton</tagname> class.
            </p>
            
            <seealso>
            <tags>radiobutton baselistitem</tags>
            <component-design id="radio" title="Radio Button"/>
            </seealso>
          </text>
        </doc>
    </class>

    <!--- Implements a "radio" button, allows a one-of-many selection when
          several of these are in a radiogroup. Radiobutton expects its parent
          to be radiogroup. -->
    <class name="radiobutton" extends="baselistitem" focusable="false" clickable="true">
        <!--- @keywords private -->
        <method name="init">
            
            super.init();

            if (canvas['accessible']) {
                this.accessible.setAttribute('applied', true);
                var mc = this.getDisplayObject();
                mc._accImpl = {};
                mc._accImpl.stub = false;
                mc._accImpl.master = this;

                mc._accImpl.get_accRole = function() {
                    // ROLE_SYSTEM_RADIOBUTTON
                    return 0x2d;
                }

                mc._accImpl.get_accName = function() {
                    return this.master.text;
                }

                mc._accImpl.get_accState = function() {
                    //Debug.warn("get_accState", this.master, this.master.selected);
                    var state = 0x00; // STATE_SYSTEM_NORMAL
                    if (this.master.parent.focusable)
                        state |= 0x100000; // STATE_SYSTEM_FOCUSABLE
                    if (this.master.parent == lz.Focus.getFocus())
                        state |= 0x04; // STATE_SYSTEM_FOCUSED
                    if (this.master.selected)
                        state |= 0x10; // STATE_SYSTEM_CHECKED
                    return state;
                }

                mc._accImpl.get_accDefaultAction = function(childId) {
                    //Debug.info('get_accDefaultAction', childId);
                    return "Check";
                }

                mc._accImpl.accDoDefaultAction = function(childId) {
                    //this.master.onclick.sendEvent();
                    //Debug.write('accDoDefaultAction', this.master);
                    this.master.parent.select(this.master);
                }
            }
            
        </method>

        <state name="accessible">
            <!--- @keywords private -->
            <attribute name="EVENT_OBJECT_FOCUS" type="number" value="0x8005"/>
            <!--- @keywords private -->
            <attribute name="EVENT_OBJECT_NAMECHANGE" type="number" value="0x800c"/>
            <!--- @keywords private -->
            <attribute name="EVENT_OBJECT_SELECTION" type="number" value="0x8006"/>
            <!--- @keywords private -->
            <attribute name="EVENT_OBJECT_STATECHANGE" type="number" value="0x800a"/>
            <!--- @keywords private -->
            <handler name="onselected" args="s">
            
                if (!this.isinited) { return;}

                // onselected is called when item is selected or deselected
                if (this.selected) {
                    this.sendAAEvent(0, EVENT_OBJECT_FOCUS);
                }
                this.sendAAEvent( 0, EVENT_OBJECT_STATECHANGE, true);
            

            </handler>
            <!--- @keywords private -->
            <handler name="ontext" args="l">
                this.sendAAEvent( 0, EVENT_OBJECT_NAMECHANGE);
            </handler>

            <!--- @keywords private -->
            <method name="updateFocus" args="hilite">
            
                // [2009-08-17 pbr] This method does not change
                // what the screen reader announces.
                if (hilite) {
                    this.sendAAEvent(0, EVENT_OBJECT_SELECTION);
                    this.sendAAEvent(0, EVENT_OBJECT_FOCUS);
                    if ($as2) {
                        Selection.setFocus(parent.getDisplayObject());
                    }
                }

                this.sendAAEvent( 0, EVENT_OBJECT_STATECHANGE, true);
            
            </method>
        </state>


        <!--- the y position of the text label. default: centered -->
        <attribute name="text_y" value="${this.rb.height/2 - this._title.height/2}" type="number"/>


        <!--- @keywords private -->
        <attribute name="initcomplete" value="0"/>

        <multistatebutton name="rb" resource="lzradio_rsrc" text="" statenum="${parent.selected ? 1 : 0}" statelength="4" maxstate="1" reference="parent">
        </multistatebutton>

        <!--- @keywords private -->
        <method name="_applystyle" args="s">
            if (this.style != null) {
                if (_enabled) {
                    _title.setAttribute('fgcolor', this.style.textcolor);
                } else {
                    _title.setAttribute('fgcolor', this.style.textdisabledcolor);
                }
                setTint(this.rb, s.basecolor);
            }
        </method>

        <!--- @keywords private -->
        <method name="_showEnabled">
            if (this.style != null) {
                if (_enabled) {
                   _title.setAttribute("fgcolor", style.textcolor);
                } else {
                   _title.setAttribute("fgcolor", style.textdisabledcolor);
                }
            }
        </method>
        
        <!--- @keywords private -->
        <method name="setHilite" args="dohilite">
            _title.setAttribute('fgcolor',
                dohilite ? style.texthilitecolor : style.textcolor);
            if (dohilite) this.setAttribute('selected', true);
            if (canvas['accessible']) this.updateFocus(dohilite);
        </method>

        <!-- FIXME: [hqm 2006-09] LPP-2244 This used to be y="$once{classroot.text_y}"
        but the DHTML runtime fires an early text onheight  event, which has the wrong value,
        so we need to use an 'always' constraint till we fix it
        -->

        <text name="_title" resize="true" x="17" y="${classroot.text_y}" text="${parent.text}"/>

        <doc>
          <tag name="shortdesc"><text>
              The radio tag provides a simple radio button.
          </text></tag>
          <text>

            <p>The <classname>radiobutton</classname> class provides a simple
              two-state button with a text label, for use in
              <classname>radiogroup</classname>.</p>

            <p>See <tagname library="lz" link="true">radiogroup</tagname> for
              details on use.</p>
          </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@                                                         -->