contacts.lzx

<!--=======================================================================-->
<!--                                                                       -->
<!-- contacts.lzx                                                          -->
<!--                                                                       -->
<!--  This is the Laszlo Application Description for the Laszlo Contacts   -->
<!--  demo.  It makes heavy use of the Laszlo "Redmond" Components         -->
<!--  and an "inline" local data set.                                      -->
<!--                                                                       -->
<!--  The application makes edits to the inline data but does not          -->
<!--  currently save the changes back to a persistent store.               -->
<!--                                                                       -->
<!--  The application is broken into 3 windows.  The main window           -->
<!--  is declared in this file.   The details window is in details.lzx     -->
<!--  and the about dialog is in about.lzx.                                -->
<!--  The menus for the main window are found in menubar.lzx.              -->
<!--                                                                       -->
<!--=======================================================================-->
<canvas bgcolor="#EAEAEA" width="640" height="540" title="Laszlo Contacts">
    <!-- Include the redmond components -->
    <include href="redmond"/>
    <include href="redmond/bsod.lzx"/>

    <!-- Splash screen -->
    <splash/>


    <!-- Define some datasets -->
    <dataset src="contactsdata.xml" name="localdata"/>
    <dataset name="nameList"/>
    <dataset name="emailList"/>

    <!-- Global Resources -->
    <resource src="split_cursor.swf" name="splitcursor"/>
    <resource src="progress_box.swf" name="progress"/>
    <resource src="redmond/resources/lzwinsort_rsc.swf" name="LzWinSort_rsc"/>

    <class name="ColumnSeparator" width="2" height="${immediateparent.height}" bgcolor="#000000" clickable="true" cursor="splitcursor" onmousedown="startDrag();" onmouseup="stopDrag();">

        <!-- METHODS of swatchview -->
        <method name="startDrag">
            var offset = Math.floor( this.getMouse( 'x' ) ) - 0.5;
            this.dragc = new LzMouseConstraint( this ,
                             { prop : 'x', offset:-offset } );
            LzCursor.lock();
        </method>

        <method name="stopDrag">
            this.dragc.release();
            LzCursor.unlock();
        </method>
    </class>


    <!-- Startup box -->
    <window title="Starting Up" oninit="canvas.initdelay=400" pixellock="true" initstage="early" width="200" x="20%" y="20%" fgcolor="#D4D0C8">
        <text x="${parent.progress.x}" name="message" y="${parent.progress.y - this.height-2}">
            Starting Laszlo Contacts
        </text>
        <text x="${parent.message.width + 30}" y="${parent.message.y}" width="40">


            <method event="onpercentcreated" reference="canvas" args="p">
                pp = Math.floor( 100*p );
                this.setText(  pp + "%" );
            </method>
        </text>
        <view resource="progress" name="progress" align="center" valign="middle" pixellock="true">
            <view y="1" x="1" width="${parent.width * canvas.percentcreated - 2}" height="${parent.height-2}" bgcolor="#0A246A"/>
        </view>
        <method event="oninit" reference="canvas">
            this.destroy();
        </method>
    </window>



    <!-- MAIN WINDOW FOR CONTACTS DEMO -->
    <window title="Laszlo Contacts" id="mainWindow" x="10" y="10" width="510" height="300" resizable="true">

        <!-- VIEWS of mainWindow-->
        <view placement="icon" resource="main_icon.png"/>

        <include href="menubar.lzx"/>


        <!-- VIEWS of mainWindow -->
        <view name="topbuttons" height="20" placement="toolbar" clip="true">
            <!-- **TODO: Use a custom layout for this row, rather than this
                 complicated (and slow) constraint system. -->

            <!-- VIEWS of topbuttons -->
            <ColumnSeparator name="column1" x="150"/>

            <ColumnSeparator name="column2" x="300"/>

            <ColumnSeparator name="column3" x="400"/>

            <ColumnSeparator name="column4" x="500"/>

            <button height="20" id="columnbutton1" width="${parent.column1.x}" onclick="mainwindow.sort('@displayname', this);" align="left">
               Name
                <!--View of Name button -->
                <view name="sortarrow" resource="LzWinSort_rsc" y="6" x="44" visible="false"/>
            </button>
                
            <button height="20" id="columnbutton2" x="${parent.column1.x + 2}" width="${parent.column2.x - this.x}" onclick="mainwindow.sort('@email', this);" align="left">
                Email
                <!--View of Email button -->
                <view name="sortarrow" resource="LzWinSort_rsc" y="6" x="38" visible="false"/>
            </button>

            <button height="20" id="columnbutton3" x="${parent.column2.x + 2}" width="${parent.column3.x - this.x}" onclick="mainwindow.sort('@home_phone', this);" align="left">
                Home Phone
                <!--View of Home Phone button -->
                <view name="sortarrow" resource="LzWinSort_rsc" y="6" x="75" visible="false"/>
            </button>

            <button height="20" id="columnbutton4" x="${parent.column3.x + 2}" width="${parent.column4.x - this.x}" onclick="mainwindow.sort('@work_phone', this);" align="left">
                Work Phone
                <!--View of Work Phone button -->
                <view name="sortarrow" resource="LzWinSort_rsc" y="6" x="80" visible="false"/>
            </button>

            <button label="" height="20" x="${parent.column4.x + 2}" width="${parent.width - this.x}" align="left">
            </button>
        </view>
        <!-- END of toolbar -->

        <view name="datarows" id="datarows" width="${immediateParent.width}">
             <!-- VIEWS of datarows -->
            <view width="${immediateParent.width}" height="20" clickable="true" bgcolor="#FFFFFF" name="result" onmousedown="datarows.selector.select( this ) ;" ondblclick="mainWindow.openSelection();">

                <datapath xpath="localdata:/resultset/*" name="codp" replication="lazy"/>

                <!--VIEWS-->

                <text x="2" y="2" datapath="@displayname" name="col1" width="${columnbutton1.width - 2}">
                </text>

                <text x="${columnbutton2.x + 2}" y="2" width="${columnbutton2.width - 2}" name="col2" datapath="@email">
                    <method name="applyData" args="el">
                        if (typeof(el) != "undefined") {
                            var ellist = el.split( ';' );
                            this.setText( ellist[0] );
                        } else {
                            this.setText( "" );
                        }
                    </method>
                </text>

                <text x="${columnbutton3.x + 2}" y="2" width="${columnbutton3.width - 2}" datapath="@home_phone" name="col3">
                </text>

                <text x="${columnbutton4.x + 2}" y="2" width="${columnbutton4.width - 2}" datapath="@work_phone" name="col4">
                </text>
                <!-- METHODS of duplicated view -->
                <method name="setSelected" args="amselected">
                    if ( amselected ) {
                    var txtColor = 0xFFFFFF;
                        var bgcolor = 0x0A246A;
                    } else {
                        var txtColor = 0x000000;
                    var bgcolor = 0xFFFFFF;
                    }
                    this.setBGColor( bgcolor );
                    this.col1.setColor( txtColor );
                    this.col2.setColor( txtColor );
                    this.col3.setColor( txtColor );
                    this.col4.setColor( txtColor );
                    this.selected = amselected;

                </method>
            </view>

            <dataselectionmanager name="selector" toggle="false"/>

            <method name="setSelected" args="subview">
                 this.selected.setSelected( false );
                 this.selected = subview;
                 this.selected.setSelected( true );
            </method>

        </view>

        <scrollbar axis="y"/>

        <!-- METHODS of mainWindow -->
        <method name="openSelection">
            var o = datarows.selector.getSelection()
            details.openRecord( o[0] );
        </method>

        <method name="deleteSelection"><![CDATA[
            var o = datarows.selector.getSelection();
            for (var i = 0; i < o.length; i++) {
                o[i].deleteNode();
            }
            datarows.selector.clearSelection();
        ]]></method>


        <command id="cmd_properties" onselect="parent.openSelection()" key="['Alt','Enter']"/>

        <!-- COMMANDS of mainWindow-->
        <!--initial comments on keycommand syntax -->
        <command id="cmd_new" onselect="details.insertRecord()" key="['Control','Shift','N']"/>
        <command id="cmd_newgroup" key="['Control','Shift','G']"/>
        <command id="cmd_newfolder" key="['Control','Shift','F']"/>
        <command id="cmd_delete" onselect="parent.deleteSelection()" key="['Delete']"/>
        <command id="cmd_about" onselect="parent.showAbout()"/>
        <command id="cmd_sortbyname" onselect="parent.sortByName()"/>
        <command id="cmd_sortbyemail" onselect="parent.sortByEmail()"/>
        <command id="cmd_sortbyhomephone" onselect="parent.sortByHomePhone()"/>
        <command id="cmd_sortbyworkphone" onselect="parent.sortByWorkPhone()"/>
        <command key="['control' , 'shift' , 'D' ]" onselect="vbsod.setVisible( true )"/>

        <!-- METHODS of mainWindow-->

        <method name="showAbout">
            // Center the about box in the window on a pixel boundary
            var ax = (mainWindow.getAttribute("width")
                     - about.getAttribute("width"))/2;
            var ay = (mainWindow.getAttribute("height")
                     - about.getAttribute("height"))/2;
            about.setAttribute("x", ax - ax%1);
            about.setAttribute("y", ay - ay%1);
            about.openWindow();
            about.makeFront();
        </method>

        <method name="sort" args="fname, button">
            if (typeof(this['lastfname']) == "undefined") {
                this.lastfname = 0; //initialize to zero
            }
            if ( this.lastfname == fname ){
                var ord = this.lastord == "descending" ? "ascending" :
                                                         "descending";
            } else {
                var ord = "ascending";
            }

            var sa = button.sortarrow;
            if( this['oldSortArrow'] ) this.oldSortArrow.setVisible( false);
            sa.setVisible( true );
             // Toggle arrows to match order
            if (ord == "descending") {
                sa.setResourceNumber( 2 );
            } else {
                sa.setResourceNumber( 1 );
            }
            this.oldSortArrow = sa;

            datarows.result.datapath.setOrder( fname , ord );
            this.lastord = ord;
            this.lastfname = fname;
        </method>

        <method name="sortByName">
            this.sort( "@displayname", columnbutton1 );
        </method>

        <method name="sortByEmail">
            this.sort( "@email", columnbutton2 );
        </method>

        <method name="sortByHomePhone">
            this.sort( "@home_phone", columnbutton3 );
        </method>

        <method name="sortByWorkPhone">
            this.sort( "@work_phone", columnbutton4 );
        </method>
    </window>

    <include href="details.lzx"/>
    <include href="about.lzx"/>

    <bsod name="vbsod" width="${parent.width}" height="${parent.height}" visible="false" onclick="this.setVisible(false)"/>

    <!-- This little bit of code puts a white box in the top left corner
         that gives time to app init in milliseconds.-->
    <!--view name="inittime" bgcolor="white" visible="true" >
        <method event="oninit" reference="canvas">
            var d = new LzDelegate( mytext , "tellTime" );
            LzIdle.callOnIdle( d );
            this.bringToFront();
        </method>
        <text name="mytext" width="100">
            <method name="tellTime" args="t">
                this.setText( "Time taken: " + t );
            </method>
        </text>
    </view-->

</canvas><!--                                                                       --><!-- Copyright 2002-2004 Laszlo Systems, Inc.  All Rights Reserved.        --><!-- Unauthorized use, duplication or distribution is strictly prohibited. --><!-- This software is the proprietary information of Laszlo Systems, Inc.  --><!-- Use is subject to license terms.                                      --><!--                                                                       -->