main.lzx

<!--
* X_LZ_COPYRIGHT_BEGIN ****************************************************
* Copyright 2001-2008 Laszlo Systems, Inc.  All Rights Reserved.          *
* Use is subject to license terms.                                        *
* X_LZ_COPYRIGHT_END ******************************************************-->
<canvas width="240" height="320" proxied="true" title="LzPix Mobile">

    <!-- resources -->
    <include href="resources/resources.lzx"/>

    <!-- classes -->
    <include href="lib/"/>
    <include href="classes/"/>

    <!-- VIEWS -->

    <!-- container: this view is setup to match the canvas size
                    unless the canvas size is smaller than 240x320 -->
    <view name="container" id="container" bgcolor="0x000000" width="${Math.min(parent.width,240)}" height="${Math.max(parent.height,320)}" clip="true">

        <attribute name="lastphoto" value="null"/>
        <attribute name="details" value="false"/>

        <method name="showDetails" args="screen">
            
            if ( this.details && clips.visible == false) {
                this.hideDetails(false);
            } else {
                // assign lastphoto to details screen
                photodetails.setPhoto( this.lastphoto );

                // animate to details screen
                footer.showTools( false );
                footer.showArrowHelp(true);
                this.content.hideanim.doStart();
                photodetails.showDetails( screen );
                if ( !photodetails.visible ) photodetails.showanim.doStart()
            }
            this.details = true;
            
        </method>

        <method name="hideDetails" args="searched">
            
            if (! this.details) return;
            this.content.showanim.doStart();
            photodetails.hideanim.doStart();
            footer.showDetailTools(false);
            footer.showArrowHelp(false);
            footer.showTools( true );
            gContent.setAttribute('y', this.header.height + 10);
            if(typeof searched == 'undefined' || !searched){
                canvas.highlight.show(this.lastphoto, 0);
                navmanager.focus( this.lastphoto, false ) ;
            }
            this.details = false;
            
        </method>

        <!-- content: only contains the collection of photos from a flickr serach -->
        <view name="content" id="gContent" x="10" width="${parent.width - 20}" height="${parent.height - 120}" y="${parent.header.height + 10}" datapath="photods:/rsp/photos">

            <attribute name="start" value="0" type="number"/>
            <attribute name="pagesize" value="9" type="number"/>
            <attribute name="length" value="0" type="number"/>
            <attribute name="scale" value="100" type="number"/>
            <attribute name="firstrun" type="boolean" value="true"/>
            <attribute name="showimage" type="boolean" value="false"/>
            <attribute name="didzoom" type="boolean" value="false"/>
            <animator name="showanim" attribute="opacity" to="1" duration="300" start="false" onstart="parent.setAttribute('visible', true)"/>
            <animator name="hideanim" attribute="opacity" to="0" duration="300" start="false" onstop="parent.setAttribute('visible', false)"/>
            <animator name="zoominanim" attribute="scale" to="170" duration="300" start="false" onstop="parent.update()"/>
            <animator name="zoomoutanim" attribute="scale" to="100" duration="300" start="false" onstop="parent.update()"/>
            <animator name="leftanim" attribute="x" to="${- this.parent.width - 45}" duration="300" start="false" onstop="parent.update()"/>
            <animator name="rightanim" attribute="x" to="${this.parent.width + 25}" duration="300" start="false" onstop="parent.update()"/>
            <hintedlayout name="lay" xspacing="28" yspacing="20"/>
            <photo width="${54 * gContent.scale * .01}" name="repl" datapath="photo[1-9]">
                <handler name="onfocused">
                    container.setAttribute('lastphoto', this);
                    header_txt.setAttribute('text', this.text );
                </handler>
                <handler name="onmousedown">
                    canvas.highlight.show(this, 0);
                    container.setAttribute('lastphoto', this);
                    header_txt.setAttribute('text', this.text);
                </handler>
                <handler name="onmouseup">
                    container.showDetails( 'photo' );
                </handler>
                <handler name="ondata">
                    
                    //Select the first image, but only do it if this is after startup.
                    if(parent.lay.first == this && parent.subviews[0] == this && parent.firstrun == true){
                        navmanager.focus(this, false);
                        parent.setAttribute('firstrun', false);
                    }
                    
                </handler>
            </photo>

            <method name="zoomin">
                this.setAttribute('didzoom', true);
                canvas.highlight.hide();
                this.pagesize = 4;
                this.zoominanim.doStart();
            </method>
            <method name="zoomout">
                this.setAttribute('didzoom', true);
                canvas.highlight.hide();
                this.pagesize = 9;
                this.zoomoutanim.doStart();
            </method>
            <method name="forward">
                if(clips.visible != true){
                    navmanager.focus(footforward, false);
                    var s = this.start + this.pagesize;
                    if (s > this.length - 1) s = this.length - 1;
                    if (s != this.start) {
                        this.start = s;
                        this.leftanim.doStart();
                    }
                }
            </method>
            <method name="back">
                
                if(clips.visible != true){
                    navmanager.focus(footback, false);
                    var s = this.start - this.pagesize;
                    if (s < 0) s = 0;
                    if (s != this.start) {
                        this.start = s;
                        this.rightanim.doStart();
                    }
                }
                
            </method>

            <handler name="ondata">
                // listen for photos from gdataman
                this.start = 0;
                this.update(0);
                navmanager.focus(lay.first, false);
            </handler>

            <method name="update" args="start">
                
                this.setAttribute('x', 10);
                var c = this.datapath.xpathQuery('photo');
                this.length = c.length;
                if (this.length) {
                    c = c.splice(this.start, this.pagesize);
                    var dpstring = 'photods:/rsp/photos/photo['+(this.start+1)+'-'+(this.start+this.pagesize)+']';
                    this.repl.setAttribute('datapath', dpstring);
                }
                header_txt.setAttribute('text', 'loading page ' + (Math.floor(this.start / this.pagesize) + 1) + ' of ' + (Math.floor(this.length / this.pagesize) + 1))
                lay.doupdate(null);
                if(this.didzoom == true && typeof container.lastphoto != 'undefined'){
                    if(container.lastphoto.visible == true){
                        canvas.highlight.show(container.lastphoto, 0);
                        navmanager.refocus(container.lastphoto, false);
                    } else {
                        navmanager.focus(lay.first, false);
                    }
                    this.setAttribute('didzoom', false);
                }
                
            </method>
        </view>

        <include href="views/photodetails.lzx"/>

        <!-- header -->
        <view name="header" width="${parent.width}">
            <view name="label" id="header_label" bgcolor="0xbac0f8" width="100%" height="44"/>
            <text name="txt" id="header_txt" width="100%" x="4" y="26"/>

            <search name="searchbox" id="sbox" width="100%" height="20" x="0"/>

            <view name="bkgnd" resource="hdr_bkgnd_rsc" stretches="width" width="100%"/>
            <view name="logo" resource="logo_rsc" x="4" y="3"/>
            <optionsbutton name="searchbtn" text="Search Flickr" x="${parent.width - width}" width="90" y="2" onclick="parent.searchbox.toggle()">
                <method name="handlekeydown" args="k">
                    
                    // Prevents the cursor from focusing on anything above the frame.
                    switch( k ) {
                        case 38: // up arrow
                            navmanager.focus(this, false);
                            return true;
                        case 37: // left arrow
                            navmanager.focus(this, false);
                            return true;
                        default:
                            return false;    
                    }
                    
                </method>
            </optionsbutton>
        </view>

        <!-- footer -->
        <view name="footer" id="footer" width="100%" y="${parent.height - height}">
            <attribute name="toolsheight" value="31"/>

            <view name="arrowhelp" bgcolor="0xbac0f8" height="$once{parent.toolsheight}" width="${parent.width}" visible="false">
                <animator name="showanim" attribute="height" to="${footer.toolsheight}" duration="300" start="false" onstart="parent.setAttribute('visible', true)"/>
                <animator name="hideanim" attribute="height" to="0" duration="300" start="false" onstop="parent.setAttribute('visible', false)"/>
                <simplelayout axis="x"/>
                <footerbutton name="cl" text="Clips" width="60">
                    <handler name="onmouseup">
                        clips.setAttribute('visible', true);
                        clips.open_anm.doStart();
                        highlight.hide();
                    </handler>
                </footerbutton>
                <footerbutton name="atc" text="Add to Clips" width="90">
                    <handler name="onmouseup">
                        clipdrop.drop_in();
                    </handler>
                </footerbutton>
                <footerbutton name="si" id="si" text="Info" width="45">
                    <handler name="onmouseup">
                        if(photodetails.visible){
                            if(navmanager.focused.id == "fullview" || navmanager.focused.id == "clipsmainbtn" ||
                                  navmanager.focused.id == this.id){
                                footer.showArrowHelp(false);
                                footer.showDetailTools(true);
                                photodetails.showDetails('info');
                                mscroll.setAttribute('currentpage', 0);
                                navmanager.focus(footer.detailtools.nx, false);
                            } else {
                                photodetails.showDetails('photo');
                            }
                        } else {
                            photodetails.showDetails('photo');
                        }
                    </handler>
                </footerbutton>
                <footerbutton name="bk" text="Back" width="45">
                    <handler name="onmouseup">
                        
                        container.hideDetails(false);
                        var gotmatch = false;
                        if(container.lastphoto.parent.parent == clips){
                            for(var i = 0; i < gContent.subviews.length; i++){
                                if(gContent.subviews[i].lasturl == container.lastphoto.lasturl){
                                    container.lastphoto = gContent.subviews[i];
                                    gotmatch = true;
                                }
                            }
                            if(gotmatch != true){
                                container.lastphoto = gContent.subviews[0];
                            }
                        }
                        canvas.highlight.show(container.lastphoto, 0);
                        navmanager.focus(container.lastphoto, false);
                        
                    </handler>
                </footerbutton>
            </view>

            <view name="tools" width="100%" clip="true" height="$once{parent.toolsheight}">
                <animator name="showanim" attribute="height" to="${footer.toolsheight}" duration="300" start="false" onstart="parent.setAttribute('visible', true)"/>
                <animator name="hideanim" attribute="height" to="0" duration="300" start="false" onstop="parent.setAttribute('visible', false)"/>
                <simplelayout axis="x"/>
                <footerbutton text="Clips" width="60" id="clipsmainbtn" onmouseup="clips.setAttribute('visible', true );                                           clips.open_anm.doStart();                                           highlight.hide()"/>
                <footerbutton width="50" iconresource="icon_grid4_rsc" onmouseup="gContent.zoomin()"/>
                <footerbutton width="50" iconresource="icon_grid9_rsc" onmouseup="gContent.zoomout()"/>
                <footerbutton width="40" iconresource="icon_pageleft_rsc" onmouseup="gContent.back()" id="footback"/>
                <footerbutton width="40" iconresource="icon_pageright_rsc" onmouseup="gContent.forward()" id="footforward"/>
            </view>
            <view name="detailtools" clip="true" height="0" width="${parent.width}" visible="false">
                <animator name="showanim" attribute="height" to="${footer.toolsheight}" duration="300" start="false" onstart="parent.setAttribute('visible', true)"/>
                <animator name="hideanim" attribute="height" to="0" duration="300" start="false" onstop="parent.setAttribute('visible', false)"/>
                <simplelayout axis="x"/>
                <footerbutton name="si" text="Show Image" width="95">
                    <handler name="onmouseup">
                        
                        photodetails.showDetails('photo');
                        footer.showDetailTools( false );
                        footer.showArrowHelp(true);
                        canvas.highlight.show(si, 0);
                        navmanager.focus(si, false);
                        mscroll.setAttribute('currentpage', 0);
                        
                    </handler>
                </footerbutton>
                <footerbutton name="pr" id="pr" iconresource="icon_pageup_rsc" width="50">
                    <handler name="onmousedown">
                        canvas.highlight.show(this, 0);
                    </handler>
                    <handler name="onmouseup">
                        
                        if(mscroll.currentpage > 0){
                            mscroll.setAttribute('currentpage', mscroll.currentpage - 1);
                            photodetails.container.setFocus();
                            canvas.highlight.show(this, 0);
                            navmanager.focus(this, false);
                        }
                        
                    </handler>
                    <method name="handlekeydown" args="k">
                        
                        switch( k ) {
                            case 38: // up arrow
                                this.onmouseup.sendEvent();
                                return true;
                            case 40: // down arrow
                                nx.onmouseup.sendEvent();
                                return true;
                            default:
                                return false;    
                        }
                        
                    </method>
                </footerbutton>
                <footerbutton name="nx" id="nx" iconresource="icon_pagedown_rsc" width="50">
                    <handler name="onmousedown">
                        canvas.highlight.show(this, 0);
                    </handler>
                    <handler name="onmouseup">
                        
                        if(mscroll.currentpage < mscroll.totalpages){
                            mscroll.setAttribute('currentpage', mscroll.currentpage + 1);
                            photodetails.container.setFocus();
                        }
                        canvas.highlight.show(this,0);
                        navmanager.focus(this, false);
                        
                    </handler>
                    <method name="handlekeydown" args="k">
                        
                        switch( k ) {
                            case 38: // up arrow
                                pr.onmouseup.sendEvent();
                                return true;
                            case 40: // down arrow
                                this.onmouseup.sendEvent();
                                return true;
                            default:
                                return false;    
                        }
                        
                    </method>
                </footerbutton>
                <footerbutton name="bk" text="Back" width="45">
                    <handler name="onmouseup">
                        
                        container.hideDetails(false)
                        
                    </handler>
                </footerbutton>
            </view>

            <method name="showTools" args="show">
                if ( show ) {
                    this.tools.showanim.doStart();
                } else {
                    this.tools.hideanim.doStart();
                }
            </method>
            <method name="showDetailTools" args="show">
                if ( show ) {
                    this.detailtools.showanim.doStart();
                } else {
                    this.detailtools.hideanim.doStart();
                }
            </method>
            <method name="showArrowHelp" args="show">
                if ( show ) {
                    this.arrowhelp.showanim.doStart();
                } else {
                    this.arrowhelp.hideanim.doStart();
                }
            </method>
        </view>

    </view>

    <!-- HANDLERS AND METHODS -->

    <!-- hilite managed by navmanager -->
    <drawview name="highlight" visible="false" width="0" height="0">
        <handler name="oncontext" method="redraw"/>
        <handler name="onwidth" method="redraw"/>
        <handler name="onheight" method="redraw"/>
        <method name="redraw" args="v">
            if (! this.context) return;
            this.strokeStyle = 0xffcc00;
            this.lineWidth = 4;
            this.clear();
            this.beginPath();
            this.rect(0, 0, this.width, this.height);
            this.stroke();
        </method>
        <handler name="onfocused" reference="navmanager" method="showdel"/>
        <method name="hide">
            this.setAttribute('visible', false);
        </method>
        <method name="showdel" args="v">
            this.show(v, null);
        </method>
        <method name="show" args="v, speed">
            
            // Use 0 for speed to eliminate animations.
            if (v == null) {
                this.hide();
            } else {
                if (speed == null) speed = 150;
                this.setAttribute('visible', true);
                if ( v['getCanvasFocusRect'] ){
                    var f_rect = v.getCanvasFocusRect();
                } else {
                    var f_rect = [ v.getAttributeRelative('x', canvas),
                            v.getAttributeRelative('y', canvas),
                            v.getAttributeRelative('width',canvas),
                            v.getAttributeRelative('height',canvas) ]
                }
                // Ensures that the rectangle isn't outside the canvas.
                if(f_rect[0] < 0){
                    f_rect[0] = 0;
                }
                if(f_rect[1] < 0){
                    f_rect[1] = 0;
                }
                if(f_rect[2] + f_rect[0] > container.width){
                    f_rect[2] = container.width - f_rect[0];
                }
                if(f_rect[3] + f_rect[1] > container.height){
                    f_rect[3] = container.height - f_rect[1];
                }

                if(speed == 0){
                    this.setAttribute('x', f_rect[0]);
                    this.setAttribute('y', f_rect[1]);
                    this.setAttribute('width', f_rect[2]);
                    this.setAttribute('height', f_rect[3]);
                } else {
                    this.animate('x', f_rect[0] , speed);
                    this.animate('y', f_rect[1], speed);
                    this.animate('width', f_rect[2], speed);
                    this.animate('height', f_rect[3], speed);
                }
            }
            
        </method>
    </drawview>
    
    <include href="views/clips.lzx"/>
    
    <photo id="clipdrop" width="${fullview.width}" height="${fullview.height}" x="${fullview.x + photodetails.x}" y="${fullview.y + photodetails.y}" visible="false" opacity=".5">
        <attribute name="to_x" type="number" value="0"/>
        <attribute name="to_y" type="number" value="0"/>
        <handler name="oninit">
            this.intparent.setAttribute('visible', false);
        </handler>
        <method name="refresh">
            this.setAttribute('visible', false);
            this.intparent.setAttribute('visible', false);
            this.setAttribute('width', fullview.width);
            this.setAttribute('height', fullview.height);
            this.setAttribute('x', fullview.x + photodetails.x);
            this.setAttribute('y', fullview.y + photodetails.y);
        </method>
        <method name="drop_in">
            var clength = clips.content.subviews.length;
            this.setAttribute('opacity', .5);
            this.setAttribute('visible', true);
            this.intparent.setAttribute('visible', true);
            if(clips.content.subviews[0].visible == false){
                var cxpos = 0;
            } else {
                var cxpos = (clength % 3) * (54 + 28);
            }
            var cypos = Math.floor(clength / 3) * (54 + 20);
            this.setAttribute('to_x', clips.x + clips.content.x + cxpos);
            this.setAttribute('to_y', 150 + cypos);
            clips.bringToFront();
            this.bringToFront();
            this.dropin.doStart();
        </method>
        <animatorgroup name="dropin" process="sequential" start="false" onstop="clipdrop.refresh(); clips.drop_shut.doStart()">
            <animatorgroup name="shrink" process="simultaneous" start="false" onstop="clips.setAttribute('visible', true); clips.drop_open.doStart()">
                <animator attribute="width" to="54" duration="700" start="false"/>
                <animator attribute="x" to="${(container.width / 2) - 27}" duration="700" start="false"/>
                <animator attribute="y" to="50" duration="700" start="false"/>
            </animatorgroup>
            <animatorgroup name="drop" process="simultaneous" start="false" onstop="clips.addPhoto(container.lastphoto)">
                <animator attribute="x" to="${parent.parent.parent.to_x}" duration="700" start="false"/>
                <animator attribute="y" to="${parent.parent.parent.to_y}" duration="700" start="false"/>
            </animatorgroup>
        </animatorgroup>
    </photo>
</canvas>