contactlist.lzx

<!--=======================================================================-->
<!--                                                                       -->
<!-- contactlist.lzx                                                       -->
<!--                                                                       -->
<!-- Laszlo Application Language (LZX) Example                             -->
<!--                                                                       -->
<!-- Display a list from a datasource (xml file)                           -->
<!-- Open details panel with more info from datasource                     -->
<!-- Concepts: databinding, datareplication, dynamic layout, animation     -->
<!--                                                                       -->
<!--                                                                       -->
<!--=======================================================================-->
<canvas bgcolor="#eaeaea" width="220" height="462">
    <include href="lz/tabelement.lzx"/>
    
    <dataset src="contactsdata.xml" name="mydata"/>

    <class name="row" height="23" bgcolor="0xE7E7D6" width="100%">
        <attribute name="minheight" value="23"/>
        <attribute name="maxheight" value="78"/>

        <view name="small" width="100%">
            <basebutton resource="tabrsrc" clickable="true" width="${parent.width}" stretches="both">
                 <handler name="onclick">
                     if (classroot.height == classroot.minheight) {
                        classroot.open.setAttribute('visible',true);
                        var newheight = classroot.maxheight;
                     } else {
                        classroot.open.setAttribute('visible',false);
                        newheight = classroot.minheight;
                     }
                     classroot.animate('height', newheight, 300);
                 </handler>
                </basebutton>
            <text x="10" y="4" datapath="@displayname" width="100%"/>

        </view>
        <view x="10" name="open" width="100%" visible="false">
            <text datapath="@email" width="100%"/>
            <text datapath="@work_address" width="100%"/>
            <text datapath="@work_webpage" width="100%"/>
            <simplelayout axis="y"/>
        </view>
        <view name="bottom" width="100%" resource="tabshadow" stretches="both" height="2"/>
        <stableborderlayout axis="y"/>
        <simplelayout axis="y"/>
    </class>

    <view name="contactsborder" bgcolor="0x676767" width="220" height="462">
        <text name="test" x="5" y="1" fgcolor="white">contacts</text>
        <view datapath="mydata:/resultset" x="2" y="20" width="218" height="438" clip="true">
            <view width="${parent.width-16}">
                <row datapath="result"/>
                <simplelayout axis="y"/>
            </view>
            <scrollbar axis="y"/>
            <simplelayout axis="x"/>
        </view>
    </view>
</canvas>
<!-- * 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@                                                         -->