The New York Times Silverlight Kit

  • Article

Logo.pngToday we are excited to announce a new alliance with the New York Times around a new Silverlight Kit for the New York Times APIs.  The New York Times has made a number of services freely available to software developers as REST services at their Developer Network:

  • Article Search
  • Best Sellers
  • Campaign Finance
  • Community
  • Congress
  • Movie Reviews
  • NY State Legislature
  • Real Estate
  • Times Newswire
  • Times People
  • Times Tags

Since Silverlight works very well with REST services, we wanted to make it easy for designers and developers to use these services in their applications.  To do this we are releasing with the New York Times a New York Times Silverlight Kit which includes CLR objects and Value Converter to enable designers and developers to take advantage of these services in their applications.  I first started using the New York Times APIs in my winning entry to the Circus Mashimus Contest at South by Southwest.  In building the kit we had a few goals:

  • Make it easy for designers and developers to use the APIs with little to no coding: all XAML
  • Include Design-Time sample data to facilitate crafting experiences in Expression Blend and Visual Studio
  • Use the MVVM Design Pattern to separate components for test-ability and data binding.

To get an idea of what can be built with the kit, you can take a look at the Artist Explorer and Demo Site, but I’d like to walk through one of the kit components, the NYTimes.TimesTag CLR object and how it could be used.

Times Tags

The New York Times has developed a tag set of controlled vocabularies for descriptive subject terms, geographic locations, organization (including companies), and people and they’ve made it available via the TimesTags API.  The API operates on a subset of about 27,000 of the entire set of tags.  Tags are ranked according to their frequency in current usage.  Using this API, you can do partial text matching on terms and get the controlled vocabularies of tags in the New York Times.  You would then typically use these tags to perform exact searches using the New York Times Articles Search API.  This API is perfect for the Silverlight Toolkit AutoCompleteBox.  You can test it out on the Articles & Tags and TimesTags Tabs of https://xmldocs.net/nyt demonstration application.  To try it out, type “wash” into the edit box and here is what you get:

image

This is all possible because the both the term and the dictionary name are returned.  In the data template for each returned item, there is a Value Converter, DictionaryWebdingConverter, that converts between the dictionary name and a WebDings character.  This user interface is implemented entirely in XAML – no code behind in the application.  The “magic” behind the scenes is a custom attached property nyt:TimesTags.Service that is part of the New York Times Silverlight Kit. 

 <inputToolkit:AutoCompleteBox x:Name="Query" 
                    Width="300"                      
                    VerticalAlignment="Center"
                    DataContext="{StaticResource Tags}" 
                    SearchMode="None" 
                    IsTextCompletionEnabled="False" 
                    ItemsSource="{Binding Tags}"
                    ItemTemplate="{StaticResource TagResultTemplate}" 
                    ValueMemberBinding="{Binding Value}"
                    nyt:TimesTags.Service="{StaticResource Tags}"/>

To see the entire XAML, look at this page that documents the TimesTag CLR class.

Most, but not all of the New York Times APIs are in the kit today for you to download and start integrating into your applications.  An example of how you might use the kit could be this.  Let’s say you were making a game to teach about wind power and you wanted to current news about Wind Power as part of the application (WIND POWER is part of the New York Times tag list so we can search on that directly):

image

This interface would be designed in XAML like this (Take note of the <nyt:Articles/> element in the <UserControl.Resources/>, the <DataTemplate/> and the <ListBox/> that binds to the ArticlesDS):

 <UserControl x:Class="WindFarmer.Page" d:DesignWidth="640" d:DesignHeight="480" 
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"  
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:ve="clr-namespace:Microsoft.VirtualEarth.MapControl;assembly=Microsoft.VirtualEarth.MapControl"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:nyt="clr-namespace:NYTimes;assembly=NYTimesSilverlightKit" 
    xmlns:d="https://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" >
    <UserControl.Resources>
        <nyt:Articles x:Key="ArticlesDS" Fields="body, title"   
                      d:IsDataSource="True" Query="des_facet:[WIND POWER]"/>
        <DataTemplate x:Key="NewsItemTemplate">
            <Grid ToolTipService.ToolTip="{Binding Body}">
                <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" 
                           Text="{Binding Mode=OneWay, Path=Title}" TextWrapping="Wrap" 
                           FontFamily="Times New Roman"/>
            </Grid>
        </DataTemplate>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <ve:Map Grid.Row="1"/>
        <TextBlock Text="Wind Farmer" FontFamily="Trebuchet MS" FontStyle="Italic" FontSize="24" 
                   TextAlignment="Left" Margin="4"/>
        <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
                   Text="Created by Michael S. Scherotter" TextWrapping="Wrap" 
                   TextAlignment="Right" Margin="4,4,4,4" Grid.Row="2"/>
        <controls:Expander Header="News" HorizontalAlignment="Right" Grid.RowSpan="2" 
                           IsExpanded="True">
            <Border BorderBrush="DarkGray" CornerRadius="4" Background="#AFFFFFFF" 
                    VerticalAlignment="Top" BorderThickness="1"> 
                <StackPanel>
                    <ListBox 
                        ItemsSource="{Binding Results, Source={StaticResource ArticlesDS}}" 
                        ItemTemplate="{StaticResource NewsItemTemplate}" Background="#00FFFFFF" 
                        BorderThickness="0"/>
                    <TextBlock Text="Copyright 2009 The New York Times" 
                               FontFamily="Times New Roman"/>
                </StackPanel>
            </Border>
        </controls:Expander>
    </Grid>
</UserControl>

As the New York Times API and Silverlight evolve, we will keep the kit up-to-date and provide the full API that’s surfaced in the REST API. What kind of imaginative uses can you think of for this kit in your application?  We’d love you feedback and ideas.