Silverlight: Using YUI

• Overview
• Fetching XML
• Further Reading

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;
    }
}
     

View Sample

Further Reading

Related information on the web is listed below.

• YUI Connection Manager