weather.lzx

<!--=======================================================================-->
<!--                                                                       -->
<!-- weather.lzx                                                           -->
<!--                                                                       -->
<!-- Laszlo Application Language (LZX) Example                             -->
<!--                                                                       -->
<!--=======================================================================-->
<canvas width="240" height="320" bgcolor="#EAEAEA" title="Laszlo Weather" font="lztahoe8">
    <!-- the actual size of the app is:  width="240" height="320"
         this app is sized larger to appear consistent with other samples -->
    <splash/>

    <!-- FONTS -->
    <font name="lztahoe8">
        <face style="plain" src="lztahoe8.ttf"/>
        <face style="bold" src="lztahoe8b.ttf"/>
    </font>

    <font src="helmetr.ttf" name="Helvetica"/>
    <font src="helmetb.ttf" name="Helvetica" style="bold"/>

    <!-- IMAGE RESOURCES -->
    <resource src="tab.swf" name="tabtop"/>
    <resource src="weather_bg.jpg" name="weather_bg"/>
    <resource src="weather_splash2.jpg" name="weather_splash"/>
    <resource src="weather_topbar2.gif" name="weather_topBar"/>
    <resource src="slider_icon2.png" name="slider_icon"/>
    <resource src="zipbutton.swf" name="zipButtonArt"/>

    <!-- DATA SOURCE -->
    <dataset name="weatherdata" src="http://www.laszlosystems.com/cgi-pub/weather.cgi"/>

    <!-- LASZLO CLASSES -->
    <include href="base/basetabslider.lzx"/>
    <include href="lz/simpletext.lzx"/>

    <class name="image">
        <method name="applyData" args="d">
           if (d == null) { return; }
            setSource( d );
        </method>
    </class>

    <!-- WEATHER CLASSES -->

    <!-- CLASS: weathertab -->
    <!-- extends tabelement which a class defined in tabslider.lzx -->
    <!-- Also note that 'contentvisible' is defined in tabelement and is set -->
    <!-- to false when a tab is fully closed and to true when it begins to -->
    <!-- open -->
    <class name="weathertab" extends="basetabelement" clickable="false" minheight="25">
        <attribute name="label" value="default title" type="string"/>
        <attribute name="defaultplacement" value="details" type="string"/>

        <!-- openTab is a method of the tabSlider class, which will be the -->
        <!-- parent of instance of this class.  -->
        <view name="top" width="100%" font="lztahoe8" fontstyle="bold" onclick="classroot.parent.openTab(classroot,true)">
            <view name="bg" resource="tabtop" width="${parent.width}" stretches="width"/>
            <view name="icon" resource="slider_icon" x="2" y="3"/>
            <text name="titleboxsh" text="${classroot.label}" width="240" fgcolor="#3B4057" x="16" y="5"/>
            <text name="titlebox" text="${classroot.label}" width="240" fgcolor="#CAD0EC" x="15" y="4"/>
        </view>
        <view name="container" width="${parent.width}" visible="${classroot.contentvisible}" options="releasetolayout" y="25" clip="true">
            <view name="details" width="${parent.width}"/>
        </view>
        <resizelayout axis="y"/>

        <!-- METHODS -->
        <!-- the 'onopenstart' event is sent by the tabelement class' -->
        <!-- there is also an 'onopenstop' that is not used in this weather -->
        <!-- example -->
        <method event="onopenstart">
            this.top.bg.animate("opacity",.33,333,false);
            this.top.titlebox.setColor(0xFFFFFF);
        </method>

        <!-- the 'onclosestart' event is sent by the tabelement class' there -->
        <!-- is also an 'onclosestop' that is not used in this example -->
        <method event="onclosestart">
            this.top.bg.animate("opacity",1,333,false);
            this.top.titlebox.setColor(0xCAD0EC);
        </method>
    </class>

    <!-- CLASS: weatherSummary -->
    <class name="weatherSummary" font="Helvetica" fontsize="12" bgcolor="#000000" width="34" height="34" x="10">
        <image name="icon" width="32" height="32" stretches="both" x="1" y="1" datapath="@imageurl"/>
        <text name="day" x="42" fgcolor="#FFFFFF" width="140" fontstyle="bold" datapath="@label">Tonight</text>
        <text name="desc" x="42" y="14" fgcolor="#FFFFFF" width="140" datapath="@desc">T-storms possible</text>
        <text name="temp" x="168" width="60" fgcolor="#FFFFFF" fontstyle="bold" datapath="@temp">Hi 80 F</text>
    </class>

    <!-- MAIN: WEATHER APP -->
    <view id="weatherApp" x="0" y="0" width="240" height="320" clip="true" font="lztahoe8" fontsize="8">

        <view resource="weather_bg"/>

        <state name="splashstate" pooling="true" apply="true" onremove="parent.splash.setOpacity( 0 )" onapply="parent.splash.animate( 'opacity' , 1, 300)">
            <view name="splash" resource="weather_splash">
                <text id="error" fontstyle="bold" width="240" fgcolor="#000099" x="15" y="230"/>
                <view id="zipBtn" x="0" y="245">
                    <view name="bkgnd" resource="zipButtonArt" opacity=".7" onmousedown="parent.doMouseDown()" onmouseup="parent.doMouseUp()"/>
                    <text width="240" fgcolor="#222222" x="16" y="7"><b>Enter Zip Code:</b></text>
                    <text width="240" fgcolor="#FFFFFF" x="15" y="7"><b>Enter Zip Code:</b></text>
                    <edittext id="zipcode" fontstyle="bold" font="lztahoe8" width="80" x="120" y="5" height="20">
                        <method event="onkeydown" args="key">
                            if (key == 13) {
                                weatherApp.loadWeather();
                            }
                        </method>
                                     </edittext>
                    <text width="240" fgcolor="#222222" x="206" y="7">
                        <b>OK</b>
                    </text>
                    <text width="240" fgcolor="#FFFFFF" x="205" y="7">
                        <b>OK</b>
                    </text>
                    <method name="doMouseDown">
                        this.setAttribute('x', this.getAttribute('x') + 1);
                        this.setAttribute('y', this.getAttribute('y') + 1);
                        bkgnd.setResourceNumber(2);
                    </method>
                    <method name="doMouseUp">
                        this.setAttribute('x', this.getAttribute('x') - 1);
                        this.setAttribute('y', this.getAttribute('y') - 1);
                        bkgnd.setResourceNumber(1);
                        weatherApp.loadWeather();
                    </method>
                </view>
            </view>
        </state>

        <view name="topBar" resource="weather_topBar" y="-16" opacity="0" onmouseup="weatherApp.hideWeather()">

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

            <text name="zip" fontstyle="bold" fgcolor="#CAD0EC" width="100" x="194" y="1"/>

            <state apply="${parent.on == true}">
                <animator attribute="opacity" to="1" duration="333"/>
                <animator attribute="y" to="0" duration="333"/>
            </state>

            <state apply="${parent.on == false}">
                <animator attribute="opacity" to="0" duration="333"/>
                <animator attribute="y" to="-16" duration="333"/>
            </state>
        </view>

        <basetabslider id="weatherContent" name="content" x="0" y="15" height="305" opacity="0" slideduration="300" width="100%" datapath="weatherdata:/weather[1]">

            <weathertab name="tab1" label="Current Conditions" font="lztahoe8"> <!--  -->
                <view id="currentData" width="240" y="10" datapath="current[1]">
                    <view name="form" width="240" font="Helvetica" fontsize="14">
                        <text name="where" width="240" x="15" fgcolor="#FFFFFF" fontstyle="bold" datapath="where[1]/text()"/>
                        <image name="icon" x="18" y="23" width="64" height="64" stretches="both" datapath="/weather[1]/forecast[1]/day[1]/@imageurl"/>
                        <text name="temp" x="95" y="20" width="240" fontsize="60" fgcolor="#FFFFFF" fontstyle="bold" datapath="temp[1]/text()"/>
                        <text name="description" width="240" x="15" y="90" fgcolor="#FFFFFF" fontstyle="bold" datapath="desc[1]/text()"/>
                    </view>
                    <view name="moredata" x="15" pixellock="true">
                        <view name="labels" font="lztahoe8">
                            <text fgcolor="#FFFFFF" width="90">
                                <b>Humidity:</b>
                            </text>

                            <text fgcolor="#FFFFFF"><b>Barometer:</b></text>
                            <text fgcolor="#FFFFFF"><b>Windspeed:</b></text>
                            <text fgcolor="#FFFFFF"><b>Dewpoint:</b></text>
                            <text fgcolor="#FFFFFF"><b>Heatindex:</b></text>
                            <text fgcolor="#FFFFFF"><b>Last Update:</b></text>
                            <simplelayout axis="y" spacing="1"/>
                        </view>
                        <view name="fields">
                            <text name="humidity" width="160" fgcolor="#FFFFFF" datapath="humidity[1]/text()"/>
                            <text name="barometer" width="160" fgcolor="#FFFFFF" datapath="barometer[1]/text()"/>
                            <text name="windspeed" width="160" fgcolor="#FFFFFF" datapath="windspeed[1]/text()"/>
                            <text name="dewpoint" width="160" fgcolor="#FFFFFF" datapath="dewpoint[1]/text()"/>
                            <text name="heatindex" width="160" fgcolor="#FFFFFF" datapath="heatindex[1]/text()"/>
                            <text name="when" width="160" fgcolor="#FFFFFF" datapath="when[1]/text()"/>
                            <simplelayout axis="y" spacing="1"/>
                        </view>
                        <simplelayout axis="x" spacing="-10"/>
                    </view>
                    <simplelayout axis="y" spacing="10"/>
                </view>
            </weathertab>

            <weathertab name="tab2" label="Radar Maps">
                <view id="radarData" y="10" align="center">
                    <view name="shadow" x="3" y="3" width="173" height="130" bgcolor="#000000" opacity=".33"/>
                    <image name="radarscan" width="173" height="130" stretches="both" datapath="radar[1]/@src"/>
                </view>
            </weathertab>

            <weathertab name="tab3" label="Forecast">
                <view id="forecastData" y="10">
                    <weatherSummary datapath="forecast[1]/day"/>
                    <simplelayout axis="y" spacing="10"/>
                </view>
            </weathertab>

            <method event="oninit">
                // open "Tab1" as the default
                this.openTab(tab1,true)
            </method>

            <datapointer xpath="weatherdata:/*" ondata="processData();" onerror="showError();" ontimeout="showTimeout();">

                <!-- When data is received from the datasource, do this -->
                <method name="processData">
                    if ( this.getNodeName() == "error" ) {
                        error.setText("Error: " +
                                      this.getNodeAttribute( 'message' ) );
                        zipBtn.animate('x',0,333,false);
                        return;
                    }
                    error.setText("                               ");

                    zipBtn.animate('x',-2000,333,false);
                    weatherApp.showWeather();
                </method>

                <method name="showError">
                    error.setText("Server error: " +
                                   this.getDataset().getErrorString());
                    zipBtn.animate('x',0,333,false);
                </method>

                <method name="showTimeout">
                    error.setText("Error: Load timed out.");
                    zipBtn.animate('x',0,333,false);
                </method>
            </datapointer>

        </basetabslider>

        <!-- METHODS for weatherApp -->
        <method name="loadWeather">
            var z = zipcode.getText();
            zipBtn.animate('x',-2000,333,true);
            error.setText("Loading weather data...");
            //Debug.write("zip=" + z);
            weatherContent.datapath.getDataset().setQueryString({zip:  z});
            weatherContent.datapath.getDataset().doRequest();
            //Debug.write( "dataset: " + weatherApp.datapath.getDataset() );
            weatherApp.topBar.zip.setText(z);
        </method>

        <method name="showWeather">
            content.animate("opacity",1,333,false);
            topBar.setAttribute( 'on' , true );
            splashstate.remove();
        </method>

        <method name="hideWeather">
            splashstate.apply();
            zipBtn.animate('x',0,333,false);
            topBar.setAttribute( 'on' , false );
            content.setOpacity( 0 );
            content.openTab(content.tab1);
        </method>
    </view> <!-- END WeatherApp -->
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2001-2004 Laszlo Systems, Inc.  All Rights Reserved.              *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
<!-- @LZX_VERSION@                                                         -->

Cross References

Includes

Resources

Name Source Image
tabtop tab.swf
weather_bg weather_bg.jpg
weather_splash weather_splash2.jpg
weather_topBar weather_topbar2.gif
slider_icon slider_icon2.png
zipButtonArt zipbutton.swf

Classes

Named Instances