Posts tagged Silverlight

One of the announcements at Mix 10 was the preview of NetFlix’s OData catalog API.  The Astoria team has been hard at work getting the new release of what is now called WCF Data Services (Formerly ADO.NET Data Services).  In Silverlight 4 the WCF Data Services Client is included as part of the Silverlight runtime which makes it very easy to consume OData Services.

OData?

OData is the Open Data Protocol which Microsoft created originally for ADO.NET Data Services.  The protocol was adopted by enough people that Microsoft focused more effort on it.  OData defines the structure & types for publishing data using HTTP and an Xml Format based on Atom (AtomPub) or JSON.  OData has roots in REST and focuses on using the HTTP protocol to enable easy data access.

OData defines methods to enable querying data sources using structured URIs.

WCF Data Services & Silverlight 4

With Silverlight 4 you can directly add service references to WCF Data Services and the models for the catalog are generated automatically.  The results of the add service reference yields this:

Once you have the service reference you can work with the data using the NetflixCatalog class which is a DataServiceContext class.  The context generated classes includes DataServiceQuery<T> properties for the main resources in the Netflix OData catalog.

 public partial class MainPage : UserControl
    {
        private DataServiceCollection<Genre> _genres;
        private Genre _selectedGenre;
        private NetflixCatalog _context;

        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            _context = new NetflixCatalog(new Uri               ("http://odata.netflix.com/Catalog/"));

            _genres = new DataServiceCollection<Genre>();
            _genres.LoadCompleted += Genres_Loaded;

            var query = (from g in _context.Genres orderby g.Name select g);
            _genres.LoadAsync(query);
        }

If you haven’t done a lot with events and delegates then jumping into Silverlight will be tricky at first.  To load all the genres, we use an event handler which will bind to ComboBox.  This also handles “Continuations”, which is the mechanism Data Services use to enable paging across large datasets.  With the following code we will continue loading genres until we have loaded all of them.

        private void Genres_Loaded(object sender, LoadCompletedEventArgs e)
        {
            if (_genres.Continuation != null)
            {
                _genres.LoadNextPartialSetAsync();
            }
            else
            {
                LoadingGenresLabel.Opacity = 0;
                GenreCombobox.ItemsSource = _genres;
                GenreCombobox.UpdateLayout();
            }
        }

Once all the genres are loaded in the ComboBox you can select one and it will load the titles for that genre.  To load the Titles for a Genre we can use the following code:

        private void GenreCombobox_SelectionChanged(object sender,         SelectionChangedEventArgs e)
        {
            _selectedGenre = GenreCombobox.SelectedItem as Genre;
            if (_selectedGenre != null)
            {
                if (_selectedGenre.CatalogTitles.Count == 0)
                {
                    CatalogTitleListBox.SelectedIndex = -1;
                    _selectedGenre.CatalogTitles.LoadCompleted +=                       GenreCatalogTitles_Loaded;
                    _selectedGenre.CatalogTitles.LoadAsync();
                    LoadingTextBlock.Opacity = 1;
                }
                else
                {
                    CatalogTitleListBox.ItemsSource =                             _selectedGenre.CatalogTitles;
                    CatalogTitleListBox.SelectedIndex = 0;
                }
            }
        }

As you can see, the code for working with a data service to retrieve data is pretty straight-forward.  All the code for this project can be found on CodePlex: Silverlight 4 Netflix.  If you have Silverlight 4 installed you can try Silverlight4Netflix out here.  Otherwise, enjoy the screenshots below!