weather_component.lzx
<library>
<font src="helmetr.ttf" name="Helvetica"/>
<font src="helmetb.ttf" name="Helvetica" style="bold"/>
<font src="verity/verity9.ttf" name="Verity"/>
<font src="verity/verity9bold.ttf" name="Verity" style="bold"/>
<resource name="okeydokey">
<frame src="assets/btn_ok.png"/>
<frame src="assets/btn_ok_ovr.png"/>
<frame src="assets/btn_ok_dwn.png"/>
</resource>
<resource src="assets/weather_bg.jpg" name="weather_bg"/>
<dataset name="weatherdata" src="http://weather.yahoo.com/forecastrss" nsprefix="true" ondata="Debug.write('ondata recvd')"/>
<class name="weather_image">
<method name="applyData" args="d">
if (d == null) { return; }
setSource( d );
</method>
</class>
<class name="yahooImageCode">
<method name="applyData" args="d">
if (d == null) { return; }
var url = "http://l.yimg.com/us.yimg.com/i/us/we/52/" + d + ".gif";
setSource( url );
</method>
</class>
<class name="weatherSummary" font="Verity" fontsize="8" width="34" height="34" x="2">
<yahooImageCode name="icon" width="32" height="32" stretches="both" x="1" y="1" datapath="@code"/>
<text name="day" x="38" fgcolor="#000000" width="140" fontstyle="bold" datapath="@day">Tonight</text>
<text name="desc" x="38" y="14" fgcolor="#000000" width="140" datapath="@text">T-storms possible</text>
<text name="temp" x="120" width="60" fgcolor="#000000" fontstyle="bold" datapath="@high">Hi 80 F</text>
</class>
<style name="streetstyle" basecolor="0x97ABBE"/>
<class name="weather">
<view x="0" y="2">
<view name="headlogo" resource="assets/laszlo_weather_logo.png" x="5" stretches="both" width="${resourcewidth / 2}" height="${resourceheight / 2}">
<handler name="onclick">
lz.Browser.loadURL('http://www.laszlosystems.com', '_blank');
</handler>
</view>
<view width="1" height="${parent.headlogo.height}" bgcolor="${canvas.bgcolor == 0xAAAAAA ? 0x999999 : 0xAAAAAA}" x="${parent.headlogo.width + 10}"/>
<view name="enterzip" resource="assets/enter_zip_type.png" x="${parent.headlogo.width + 15}" y="5" stretches="both" width="${resourcewidth * .8}" height="${resourceheight * .8}"/>
<view x="${parent.enterzip.x + 5}" y="${parent.headlogo.height - this.height - 5}">
<simplelayout spacing="6" axis="x"/>
<edittext id="zipcode" width="55" height="22">
<handler name="onkeydown" args="key">
if(key == 13){
weatherApp.loadWeather();
}
</handler>
</edittext>
<multistatebutton name="okButton" resource="okeydokey" statenum="0" statelength="3" maxstate="1" y="3" onclick="weatherApp.loadWeather()"/>
</view>
<view resource="weather_bg" y="${parent.headlogo.height + 5}"/>
<view id="weatherApp" y="${parent.headlogo.height + 5}">
<basetabslider id="weatherContent" width="180" height="332" style="streetstyle" mintabheight="20" datapath="weatherdata:/rss[1]/channel[1]">
<tabelement name="tab1" text="Current Conditions" selected="true" text_x="20" fontstyle="bold" contentopacity=".8">
<handler name="onselect">
weatherContent.tab1.arrow.animate("rotation", 0, 500, false);
weatherContent.tab2.arrow.animate("rotation", -90, 250, false);
weatherContent.tab3.arrow.animate("rotation", -90, 250, false);
</handler>
<view name="arrow" resource="assets/arrow_open.png" placement="header" x="${this.xoffset + 5}" y="${this.yoffset + 5}" opacity="1" xoffset="${this.width / 2}" yoffset="${this.width / 2}"/>
<view id="currentData" width="180" y="2">
<view name="form" width="180" font="Helvetica" fontsize="14">
<attribute name="city" value="$path{'yweather:location/@city '}"/>
<attribute name="region" value="$path{'yweather:location/@region'}"/>
<text name="where" width="240" x="15" fgcolor="#000000" fontstyle="bold" text="${parent.city + ', ' + parent.region}"/>
<yahooImageCode name="icon" x="13" y="27" width="64" height="64" datapath="item[1]/yweather:condition/@code"/>
<text name="temp" x="69" y="22" width="240" fontsize="54" fgcolor="#000000" fontstyle="bold" datapath="item[1]/yweather:condition/@temp"/>
<text name="description" width="240" y="90" fgcolor="#000000" fontstyle="bold" datapath="item[1]/yweather:condition/@text"/>
</view>
<view name="moredata" pixellock="true">
<view name="labels" fontsize="8" font="Verity" fontstyle="plain">
<text fgcolor="#000000" width="90">
<b>Humidity:</b>
</text>
<text fgcolor="#000000"><b>Barometer:</b></text>
<text fgcolor="#000000"><b>Windspeed:</b></text>
<text fgcolor="#000000"><b>Sunrise:</b></text>
<text fgcolor="#000000"><b>Sunset:</b></text>
<text fgcolor="#000000"><b>Wind Chill:</b></text>
<simplelayout axis="y" spacing="3"/>
</view>
<view name="fields" fontsize="8" font="Verity" fontstyle="plain">
<text name="humidity" width="180" fgcolor="#000000" datapath="yweather:atmosphere[1]/@humidity"/>
<text name="barometer" width="160" fgcolor="#000000" datapath="yweather:atmosphere[1]/@pressure"/>
<text name="windspeed" width="160" fgcolor="#000000" datapath="yweather:wind[1]/@speed"/>
<text name="sunrise" width="160" fgcolor="#000000" datapath="yweather:astronomy[1]/@sunrise"/>
<text name="sunset" width="160" fgcolor="#000000" datapath="yweather:astronomy[1]/@sunset"/>
<text name="windchill" width="160" fgcolor="#000000" datapath="yweather:wind[1]/@chill"/>
<simplelayout axis="y" spacing="3"/>
</view>
<simplelayout axis="x" spacing="-24"/>
</view>
<simplelayout axis="y" spacing="12"/>
</view>
</tabelement>
<tabelement name="tab2" text="Radar Maps" text_x="20" fontstyle="bold">
<handler name="onselect">
weatherContent.tab1.arrow.animate("rotation", -90, 250, false);
weatherContent.tab2.arrow.animate("rotation", 0, 500, false);
weatherContent.tab3.arrow.animate("rotation", -90, 250, false);
</handler>
<view name="arrow" resource="assets/arrow_open.png" placement="header" x="${this.xoffset + 5}" y="${this.yoffset + 5}" opacity="1" xoffset="${this.width / 2}" yoffset="${this.width / 2}" rotation="-90"/>
<view id="radarData" y="10" align="center">
<view name="shadow" x="3" y="3" width="240" height="162" opacity=".33"/>
<image name="satellite" width="210" height="120" stretches="both">
<handler name="oninit">
this.setSource("http://weather.yahoo.com/images/ussat_440x297.jpg");
</handler>
</image>
<image name="radarscan" width="210" height="120" y="110" stretches="both">
<handler name="oninit">
this.setSource("http://weather.yahoo.com/images/us_radar_medium_usen.jpg");
</handler>
</image>
</view>
</tabelement>
<tabelement name="tab3" text="Forecast" text_x="20" fontstyle="bold">
<handler name="onselect">
weatherContent.tab1.arrow.animate("rotation", -90, 250, false);
weatherContent.tab2.arrow.animate("rotation", -90, 250, false);
weatherContent.tab3.arrow.animate("rotation", 0, 500, false);
</handler>
<view name="arrow" resource="assets/arrow_open.png" placement="header" x="${this.xoffset + 5}" y="${this.yoffset + 5}" opacity="1" xoffset="${this.width / 2}" yoffset="${this.width / 2}"/>
<view id="forecastData" y="5">
<weatherSummary datapath="item[1]/yweather:forecast[1-2]"/>
<simplelayout axis="y" spacing="5"/>
</view>
</tabelement>
</basetabslider>
<method name="loadWeather">
var z = zipcode.text;
weatherContent.datapath.getDataset().setQueryString({p: z});
weatherContent.datapath.getDataset().doRequest();
Debug.write ("Load Weather",z)
</method>
</view>
<view resource="assets/trim.png" y="${parent.headlogo.height + 5}" opacity=".5"/>
</view>
<view resource="assets/poweredby.swf" x="${(parent.width - this.width) / 2}" y="${canvas.height - this.height - 5}">
<handler name="onclick">
lz.Browser.loadURL('http://www.blogbox.com', '_blank');
</handler>
</view>
</class>
</library>
Cross References
Resources
Classes
Named Instances
