dataimage.lzx

<!--=======================================================================-->
<!-- Laszlo Application Language (LZX) Example  : Image Loading            -->
<!--                                                                       -->
<!--=======================================================================-->
<canvas bgcolor="#EAEAEA" width="620" height="300">
    <!-- [2006-9-25 jgrandy] (LPP-2755) commented out  <splash/> -->

    <!-- FONT RESOURCES -->
    <font src="helmetr.ttf" name="Helvetica"/>
    <font src="helmetb.ttf" name="Helvetica" style="bold"/>

    <!-- IMAGE RESOURCES -->
    <resource src="horsetitle.png" name="horseTitle"/>
    <resource src="btn_art.png" name="rsrc_art"/>
    <resource src="btn_camera.png" name="rsrc_camera"/>
    <resource src="btn_animation.png" name="rsrc_animation"/>

    <!-- CLASSES -->
    <class name="bounceButton" bgcolor="#00769E" y="${(this.height * -1) + 40}" width="40" height="40">
         
        <attribute name="text" value="null" type="string"/>  
        <attribute name="mo_del" value="null"/>
        <attribute name="subresource" setter="this.setSubresource(subresource)" type="text"/>
        <attribute name="section" value="" type="string"/>
                 
        <text name="title" resize="true" text="${classroot.text}" font="Helvetica" fontsize="12" fontstyle="bold" fgcolor="#FFFFFF" oninit="setAttribute('visible', false)">
            <handler name="ontext">
                this.setAttribute('x', -this.getTextWidth() - 2 );
            </handler>
        </text> 
        
        <view bgcolor="#FFFFFF" x="2" y="2" width="${classroot.width - 4}" height="${classroot.height - 4}">
        </view>
        
        <view name="rsc" stretches="both" x="2" y="2"/>

        <method name="setSubresource" args="r">
            this.subresource = r;
        </method>
  
        <method name="init">
            super.init();
            this.rsc.setAttribute('resource', this.subresource);
        </method>
           
        <handler name="onmouseover">
            var anm = this.animate('height',20,200,true);
            if (!mo_del) this.mo_del = new LzDelegate ( this , "showText" );           
            this.mo_del.register ( anm , "onstop" );
            this.hilite = true;
        </handler>
        
        <handler name="onmouseout">
            this.animate('height',-20,200,true);
            this.hideText();
            this.hilite = false;
        </handler>
        
        <handler name="onmousedown">
            this.setAttribute('bgcolor', 0xFFC600);
        </handler>
        
        <handler name="onmouseup">
            this.setAttribute('bgcolor', 0x00769E);
            container.showSection(this.section);
        </handler>
 
        <method name="showText" args="v">
            if ( this.hilite == true ) {
                this.title.setAttribute('visible', true);
                this.title.setAttribute("opacity",.1);
                this.title.animate("opacity",1,200,false);
            }
        </method>
        
        <method name="hideText">
            this.title.setAttribute('visible', false);
        </method>
        
    </class>
    
    <class name="custom_image" onmouseover="container.hilitePicture( this, true )" onmouseout="container.hilitePicture( this, false )" onmousedown="container.doMouseDown()" onmouseup="container.doMouseUp()"/>

    <!-- BACKGROUND FRAME -->
    <view name="bkgnd1" bgcolor="#00A4DB" width="624" height="${canvas.height}"/>
    <view name="bkgnd2" bgcolor="#EFFFFF" x="4" width="612" height="${canvas.height - 4}"/>

    <!-- HEADER -->
    <view resource="horseTitle" oninit="this.bringToFront()">

        <view name="buttons" x="440" y="40">
            <bounceButton section="photos" subresource="rsrc_camera" text="Show Photos"/>
            <bounceButton section="animations" subresource="rsrc_animation" text="Show Animations"/>
            <simplelayout axis="x" spacing="2"/>
        </view>
        
    </view> 

    <!-- CONTAINER -->
    <view id="container" clip="true" x="4" y="67" height="${canvas.height - y - 4 }" width="${parent.width - 8}">

        <attribute name="currentSection" value="null"/>


        
        <view name="photos" width="100%" height="${parent.height}" oninit="immediateparent.currentSection = this">
            <scrollbar/>           
            <view width="100%">
                <!-- HILITE -->
                <view id="yellowRect" bgcolor="#FFC600" width="60" height="60" visible="false" options="ignorelayout"/>
                
                <!-- LINKS TO EXTERNAL RESOURCES  -->
                <custom_image resource="http://www.laszlosystems.com/images/horses/horse-2-sm.jpg"/>
                <custom_image resource="http://www.laszlosystems.com/images/horses/horse-3-sm.jpg"/>
                <custom_image resource="http://www.laszlosystems.com/images/horses/horse-4-sm.jpg"/>
                <custom_image resource="http://www.laszlosystems.com/images/horses/horse-5-sm.jpg"/>
                <custom_image resource="http://www.laszlosystems.com/images/horses/horse-6-sm.jpg"/>
                <wrappinglayout axis="x" xinset="10" yinset="20" spacing="10"/>
            </view>
        </view>

        <view name="illustrations" width="100%" visible="false">

            <wrappinglayout axis="x" xinset="10" yinset="20" spacing="10"/>
        </view> 
 
        <view name="animations" width="100%" visible="false">
             <custom_image resource="http://www.laszlosystems.com/images/horses/animations/horse-anm-1.swf"/>
             <custom_image resource="http://www.laszlosystems.com/images/horses/animations/horse-anm-2.swf"/>
             <custom_image resource="http://www.laszlosystems.com/images/horses/animations/horse-anm-3.swf"/>
             
            <wrappinglayout axis="x" xinset="10" yinset="20" spacing="10"/>
            <!-- If the swf is loaded at the beginning then it will 
                 automatically play before it is actually viewed 
                 so the view is incased in a view template so it will 
                 only get created when needed -->
            <!-- view play="false" name="anim1" resource="file:galofixe.swf" /-->
        </view> 
 
        <!-- METHODS for view "container" -->  
        <method name="hilitePicture" args="picture,show">
            if ( show == true ) {
                var x= picture.x - 2;
                var y= picture.y - 2;
                var w= picture.width + 4;
                var h= picture.height + 4;
                yellowRect.setAttribute("x",x);
                yellowRect.setAttribute("y",y);
                yellowRect.setAttribute("width",w); 
                yellowRect.setAttribute("height",h);
                yellowRect.setAttribute('visible', true);
            } else {
                yellowRect.setAttribute('visible', false);
            }
        </method>

        <method name="doMouseDown">
            yellowRect.setAttribute("x",yellowRect.x - 1);
            yellowRect.setAttribute("y",yellowRect.y - 1);
            yellowRect.setAttribute(
                            "width",yellowRect.width + 2);
            yellowRect.setAttribute(
                            "height",yellowRect.height + 2);
            yellowRect.setAttribute('visible', true);
        </method>

        <method name="doMouseUp">
            if (this.currentSection == animations ){ 
                    animations.anim1.stop();
                }  

            yellowRect.setAttribute("x",yellowRect.x + 1);
            yellowRect.setAttribute("y",yellowRect.y + 1);
            yellowRect.setAttribute(
                            "width",yellowRect.width - 2);
            yellowRect.setAttribute(
                            "height",yellowRect.height - 2);
            yellowRect.setAttribute('visible', true);
        </method>

        <method name="showSection" args="section">
            var s = this[section];
            if ( s != this.currentSection ) {
                var anm = this.currentSection.animate("opacity",0,200,false);
                var d = new LzDelegate(this, "fadeInNewSection", anm, "onstop");
                this.newSection = s;
            }
        </method>

        <method name="fadeInNewSection" args="v">
            this.currentSection.setAttribute('visible', false);
            this.newSection.setAttribute('visible', true);
            this.newSection.setAttribute("opacity",.1);
            this.newSection.animate("opacity",1,200,false);
            this.currentSection = this.newSection;
        </method>

    </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@                                                         -->

Cross References

Resources

Name	Source	Image
horseTitle	horsetitle.png
rsrc_art	btn_art.png
rsrc_camera	btn_camera.png
rsrc_animation	btn_animation.png

Classes

• <class name="bounceButton">
• <class name="custom_image">

Named Instances

• <view id="container">
• <view id="yellowRect">
• <view name="bkgnd1">
• <view name="bkgnd2">