ArgumentException: Building a Silverlight RSS reader - part 1

In this series of posts, I'm going to look at building a simple RSS reader in silverlight. I chose an RSS reader as it covers a number of typical scenarios including;

Cross domain requests - where you can't guarantee the target domain has a cross domain policy in place.
A configurable source on the host server controlling which RSS feeds the reader should display.
Creating a skinnable UI
Touching on things silverlight can't yet do (display HTML natively for example).

So kicking off, I'm going to create a new solution as follows;

I've selected a new silverlight application and named it RSSReader.UI.Components (as it may contain other components later). I've also chosen to create a directory for the solution and named this SilverlightRSSReader.

VS.NET then asks us how we want to run the application. In this case, I'm going to want to write code on the website too, so I've chosen to create a new ASP.NET web project solution and named it RSSReader.UI.Web

This then gives us the following solution structure;

This needs some tidying up before we begin. First off, delete default.aspx and the test page.html. Finally rename the testpage aspx to default.aspx and also tidy up the source to something more akin to the following;

        1: <%@ Page Language="C#" AutoEventWireup="true" %>

       2: <%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>

       3:  

       4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

       5:  

       6: <html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">

       7: <head runat="server">

       8:     <title>RSSReader.UI.Components</title>

       9: </head>

      10:  

      11: <body style="height:100%;margin:0;">

      12:     <form id="form1" runat="server" style="height:100%;">

      13:         <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

      14:  

      15:         <div id="silverlightHost" style="height:100%;">

      16:  

      17:             <asp:Silverlight ID="Xaml1" runat="server" PluginBackground="Transparent" Windowless="true"

      18:                 Source="~/ClientBin/RSSReader.UI.Components.xap" 

      19:                 MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />

      20:  

      21:         </div>

      22:     </form>

      23: </body>

      24: </html>

You finally want to set the default.aspx page to be the page used on start up. You can do this by right clicking on it in solution explorer and clicking set as start page.

If you run your application now, it should compile correctly and show you a rather underwhelming blank silverlight application. Let's correct that and get the basic form and structure of our application ready.

The following is a wireframe for how I want my application to look:

Creating this basic layout is extremely simple using XAML, but first, we want to pull in an image resource for the branding and change the html body colour. Copy in rss.png from the attached zip file, and put it in a new folder called Resource within your silverlight application.

Finally, add the following to the head section of default.aspx;

<style>
    BODY
    {
        background-color: black;
    }
    #silverlightHost
    {
        background-color: Transparent;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
    }
</style>

This is simply setting the window to be black coloured (after all, every silverlight app must be black - it's an unwritten law !!). If you're wondering why we're not just setting the background in the silverlight and instead are setting that to transparent - the reason will become apparent later when we have to have the browser show HTML and we need it to look like it's within our silverlight app.

Next, in your silverlight app, add a reference to System.Windows.Controls.Data - this gives us the data grid component to use in our app.

Finally, open page.xaml and use the following skeleton code;

       1: <UserControl x:Class="RSSReader.UI.Components.Page"

       2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

       3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

       4:     xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data">

       5:  

       6:     <Grid>

       7:         <!-- The main UI stack -->

       8:         <StackPanel Margin="10,10,10,10">

       9:  

            <!-- Top bar area -->

            <Grid Background="Black">

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="Auto"/>

                    <ColumnDefinition Width="Auto"/>

                    <ColumnDefinition Width="*"/>

                </Grid.ColumnDefinitions>

  

                <Image Source="Resource/rss.jpg" Margin="0,0,10,0"/>

  

                <TextBlock Grid.Column="1" Margin="0,6,0,0" FontSize="18" Foreground="White">RSS Exemplar</TextBlock>

  

                <ComboBox x:Name="_availableFeeds" Grid.Column="2" Margin="0,6,0,0" IsEnabled="False" 

                      VerticalAlignment="Top" HorizontalAlignment="Right" Height="30" MinWidth="250">

                </ComboBox>

            </Grid>

  

            <!-- Grid binding to articles -->

            <data:DataGrid x:Name="_articleList" AutoGenerateColumns="False">

                <data:DataGrid.Columns>

                    <data:DataGridTextColumn Header="Published Date" Width="150"/>

                    <data:DataGridTextColumn Header="Title"/>

                </data:DataGrid.Columns>

            </data:DataGrid>

  

            <!-- Todo: content preview pane -->

            <!-- Todo: status area and skin selector -->

        </StackPanel>

    </Grid>

  

</UserControl>

Run your application and you should see:

Hardly the most exciting application in the world so far, but it gives us everything we need to build on in the next articles. If you want to skip ahead and try to move the application on, go ahead, the next topics will cover;

Getting data and binding to it
- Getting available feeds for the combo box
- Getting feed data from the RSS feed itself using an intermediate, marshalling, service.
- Adding a service reference
Displaying and interfacing to HTML
- Silverlight can't display HTML directly, we need to display the article content itself by asking the HTML host to do it. This article will cover integration to HTML, and will result in a positioned DIV in the correct place beneath the silverlight app to show the post content. (This is why our silverlight is made transparent)
Skinning the application and changing skins
- This will cover making the app look pretty(ish) and how to dynamically change skins on the fly.

For now, have a good Christmas.

ArgumentException

Tuesday, 16 December 2008

Building a Silverlight RSS reader - part 1 - getting the skeleton structure ready

Download the source code here

1 comment: