Developer Network Home - Help

Using YUI with Silverlight 1.0 - Yahoo! Developer Network

Overview

Since Silverlight 1.0 uses JavaScript as its programming language, you can easily take advantage of existing JavaScript code and libraries such as YUI.

Fetching XML

The following sample replicates the Yahoo! Weather example from the YUI Library Connection Manager example. It displays the result using Silverlight objects instead of the returned HTML.

function MyApplication10() { } MyApplication10.prototype = { Initialize: function(plugIn, userContext, rootElement) { this.plugIn = plugIn; // Get and store object references this.txtLocation = rootElement.FindName("txtLocation"); this.txtDate = rootElement.FindName("txtDate"); this.txtConditionsLabel = rootElement.FindName("txtConditionsLabel"); this.txtConditions = rootElement.FindName("txtConditions"); this.txtForecastLabel = rootElement.FindName("txtForecastLabel"); this.cnvForecast = rootElement.FindName("cnvForecast"); this.ellSpinner = rootElement.FindName("ellSpinner"); }, FetchData: function(zip, units) { this.ellSpinner.Visibility = "Visible"; this.Clear(); this.txtLocation.Text = "Loading..."; var queryString = "?p=" + encodeURI(zip) + "&u=" + encodeURI(units); var url = "../../../assets/weather.php" + queryString; var request = YAHOO.util.Connect.asyncRequest( "GET", url, { scope:this, success:this.DataReceived, failure:this.DataFailed }); }, DataReceived: function(result) { this.ellSpinner.Visibility = "Collapsed"; var root = result.responseXML.documentElement; if(root != null) { try { this.txtLocation.Text = root.getElementsByTagName("description")[0].firstChild.nodeValue; this.txtDate.Text = root.getElementsByTagName("lastBuildDate")[0].firstChild.nodeValue; this.txtConditionsLabel.Text = "Current Conditions:"; var nodeUnits = getElementsByTagNameNS("yweather", "units", root)[0]; var nodeCondition = getElementsByTagNameNS("yweather", "condition", root)[0]; this.txtConditions.Text = nodeCondition.getAttribute("text") + ", " + nodeCondition.getAttribute("temp") + nodeUnits.getAttribute("temperature"); this.txtForecastLabel.Text = "Forecast:"; // Remove any existing forecast info this.cnvForecast.Children.Clear(); // Loop all forecast items and dynamically create content var forecasts = getElementsByTagNameNS("yweather", "forecast", root); var nodeForecast; var txtForecast; var index; for(index = 0; index < forecasts.length; index++) { nodeForecast = forecasts[index]; txtForecast = this.plugIn.Content.CreateFromXaml( '<TextBlock FontFamily="Arial" FontSize="14" Canvas.Top="' + (index * 20) +'" Text="' + nodeForecast.getAttribute("day") + " - " + nodeForecast.getAttribute("text") + ". High: " + nodeForecast.getAttribute("high") + " Low: " + nodeForecast.getAttribute("low") + '"/>'); this.cnvForecast.Children.Add(txtForecast); } } catch(e) { this.ShowError("ERROR: Error parsing data: " + e.message); } } else { // Clear any previous result and show error message this.ShowError("ERROR: Could not retrieve data."); } }, DataFailed: function(result) { this.ellSpinner.Visibility = "Collapsed"; // Clear any previous result and show error message this.ShowError("ERROR: " + result.status + " " + result.statusText); }, Clear: function() { this.txtLocation.Text = ""; this.txtDate.Text = ""; this.txtConditionsLabel.Text = ""; this.txtConditions.Text = ""; this.txtForecastLabel.Text = ""; this.cnvForecast.Children.Clear(); }, ShowError: function(message) { this.Clear(); this.txtLocation.Text = message; } }

Further reading

Related information on the web is listed below.

YUI Connection Manager

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings