datacombobox.lzx

<library>

    <include href="base/basedatacombobox.lzx"/>
    <include href="lz/floatinglist.lzx"/>

    <!-- resources -->
    <resource name="datacombobox_left_rsc">
        <frame src="resources/combobox/popup_lft_up.swf"/>
        <frame src="resources/combobox/popup_lft_dsbl.swf"/>
    </resource>

    <resource name="datacombobox_mid_rsc">
        <frame src="resources/combobox/popup_mid_up.swf"/>
        <frame src="resources/combobox/popup_mid_dsbl.swf"/>
    </resource>

    <resource name="datacombobox_right_rsc">
        <frame src="resources/combobox/popbtn_rt_up.swf"/>
        <frame src="resources/combobox/popbtn_rt_mo.swf"/>
        <frame src="resources/combobox/popbtn_rt_dn.swf"/>
        <frame src="resources/combobox/popbtn_rt_dsbl.swf"/>
    </resource>


    <!-- A dropdown list of selectable items. -->
    <class name="datacombobox" extends="basedatacombobox" width="100">

        <!-- The name of the class for the floating list.
             @keywords private -->
        <attribute name="menuclassname" value="floatinglist" type="string"/>
        
        <!--- Tell base class about our label view.
              @keywords private -->
        <attribute name="_cbtext" value="$once{this._text}"/>
        
        <method name="getText">
             return _text.text;
        </method>

        <!--- @access private -->
        <method name="_showEnabled">
           super._showEnabled();
           if (_enabled) {
                this.bkgnd.left.setAttribute('frame', 1 );
                this.bkgnd.mid.setAttribute('frame', 1 );
            } else {
                this.bkgnd.left.setAttribute('frame', 2 );
                this.bkgnd.mid.setAttribute('frame', 2 );
            }
        </method>
        <view name="bkgnd" width="100%" height="20" focusable="false" bgcolor="#CCCCCC">
            <handler name="onclick">
                classroot.toggle()
                if (immediateparent['onclick']) immediateparent.onclick.sendEvent();
            </handler>
            <view name="left" resource="datacombobox_left_rsc"/>
            <view name="mid" resource="datacombobox_mid_rsc" stretches="width"/>
            <basebutton name="right" resource="datacombobox_right_rsc" styleable="true">
                <handler name="onclick">
                    if (immediateparent['onclick']) immediateparent.onclick.sendEvent();
                </handler>
            </basebutton>
            <stableborderlayout axis="x"/>
        </view>
        
        <text name="_text" x="8" y="0" width="${ parent.width - 19 }"/>

        <!--- @keywords private -->
        <method name="_applystyle" args="s">
            if (s != null) {
                this.setTint(this.bkgnd.left, s.basecolor);
                this.setTint(this.bkgnd.mid, s.basecolor);
                this.setTint(this.bkgnd.right, s.basecolor);
            }
        </method>
 <doc>
          <tag name="shortdesc"><text>
              combobox displays a data-driven dropdown list of selectable items.
          </text></tag>
          <text>
            <p>A combination box or "combobox"  is a common UI element for
              displaying a pop-up list associated with a text field. </p>
            <p>
              OpenLaszlo includes two variants of the combobox:</p>
            <ul>
              <li> <tagname link="true">combobox</tagname> has list items defined inline.</li>
              <li><tagname>datacombobox</tagname>, has list items determined by a dataset, which may be local or remote.</li>
            </ul>

            <p>The selected
              text of the combobox is displayed within the text field.  This field
              is an <classname>LzInputText</classname> field if the
              <attribute>editable</attribute> of the combobox is <code>true</code>
              (the default), or a static <classname>LzText</classname> field if it
              is <code>false</code>.</p>

            <p>The number of items shown in the combobox can be set using the
              <attribute>shownitems</attribute> attribute.  If there are more items
              available than are shown, a scrollbar will be created
              automatically.</p>

            <p>The list of items in a combobox can be created explicity using the
              <tagname>textlistitem</tagname> tag with assigned
              <attribute>text</attribute> and <attribute>value</attribute>
              attributes.</p>
            <example title="simple datacombobox">
              <canvas bgcolor="#EAEAEA"  height="200">
              <include href="lz/datacombobox.lzx"/>
              
              <dataset name="items">
              <item value="item0" >item 0</item>
              <item value="item1" >item 1</item>
              <item value="item2" >item 2</item>
              <item value="item3" >item 3</item>
              <item value="item4" >item 4</item>
              <item value="item5" >item 5</item>
              <item value="item6" >item 6</item>
              <item value="item7" >item 7</item>
              <item value="item8" >item 8</item>
              <item value="item9" >item 9</item>
              <item value="item10" >item 10</item>
              <item value="item11" >item 11</item>
              </dataset>
              
              <view x="20" y="20" >
              <simplelayout/>
              <text> local data, defaulttext="choose one.." </text>
              <datacombobox id="cbox1"
              width="130"  
              shownitems="6"
              defaulttext="Choose One..."
              itemdatapath="items:/item"/>
              </view>
              </canvas>
            </example>
          </text>
        </doc>

    </class>

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