Using YUI with Silverlight 1.0

Welcome, guest Sign In

My Projects
Tools & Services
APIs and Services
- Flickr
- Geo
- Mail
- Search
- Social
- Updates
- YAP
- YQL
Developer Tools
- Hadoop
- YUI
- YSlow
- View all »
Resources
- Blog
- YDN Theater
- Hack U

YDN Silverlight Developer Center

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

Silverlight: Using YUI

Overview

Fetching XML

Further Reading