Creating Web Slices is extremely easy and fast, and at the same time it can provide amazing results. In this post I will show how the Swine Flu Web Slice has been created (in less then one hour!). The full project with source code is provided at the end of this post.
Before starting, you need a website (unless you already have one). For the sake of this scenario, we will use Microsoft Visual Web Developer 2008 Express Edition to create an ASP.Net Web Application.
IE8 Web Slices development is described in detail in this MSDN Article. In this scenario we want to have full control over the Web Slice content, so we will use an Alternative Display Source. We also want to customize the update and notification mechanism, so we will implement an Alternative Update Source. The overall architecture looks like this:
In talking with the CDC (Centers for Disease Control and Prevention) and the WHO (World Health Organization), they available made two data feeds:
Those feeds are downloaded and parsed in the code behind of the page, as follows:
private static DateTime GetLastRssUpdate()
using (WebClient client = new WebClient())
string content = Encoding.ASCII.GetString(client.DownloadData(Rss_Feed));
XmlDocument rssDoc = new XmlDocument();
Note that we are caching the feed on the server side, in order to improve the network performance. Once we have the data, we can use the ASP.Net Framework and LINQ to bind the data to our UI.
private void BindRssFeed()
string content = Cache.Get("SwineFluRssFeed") as string;
XDocument rssFeed = XDocument.Parse(content);
rssList.DataSource = (from item in rssFeed.Descendants("item")
Text = Short((string)item.Element("description")),
Url = (string)item.Element("link")
The second step is to customize a few properties of the web slices and define the logic that will notify the user when there is an update.
In order to do this, we will use a second page (SliceUpdate.aspx ).
<div class="hslice" id="SwineFlu">
<div class="entry-title" style="display: none">
Swine Flu Updates
<a href="http://visitmix.com/WebSlices/SwineFlu" rel="entry-content" style="display: none" />
<a href="http://www.cdc.gov/swineflu/" rel="Bookmark" style="display: none" target="_blank" />
<span class="ttl" style="display: none">15</span>
<div class="entry-content" runat="server" id="updateTrigger">
Let’s have a look more in detail to each section of the body:
The last step is to make the web slice discoverable. The CDC will soon include the web slice on their main site; in the meantime, the slice is available on the IE8 Addons Gallery.
'Swine Flu Updates',
Add to Internet Explorer
Note that the AddToFavoritesBar function point to the Alternative Update Source page followed by the ID of the slice (SliceUpdate.aspx#SwineFlu).
That’s it! With a couple of RSS feeds and a bunch of lines of code we made a very useful web slice!
The best part is that this Web Slice can easily be customized to show any other RSS or Twitter feed! ;-)
You can download the full project with the source code here.
You can preview the slice here.