The old new Hello World... Building a simple RSS reader for Windows 8 Metro with HTML and JavaScript

Sign in to queue


Writing a RSS reader used to be the new Hello World app (now I think it's writing a Twitter app, but anyway...) so when saw this great walk-through for creating a Metro Style App that consumes an RSS feed I thought it would make for a perfect Metro Monday post. Then when I saw the author was using the Channel 9 feed...!

Windows 8 HTML5 Metro Style App: How to create a small RSS reader in 30min (part 1/2)

Starting from scratch, we’re going to learn through these 2 tutorials how to build a small RSS reader with HTML5, CSS3 and WinJS, the Microsoft JavaScript framework for Windows 8 Metro Style Apps. We’ll try also to follow the Metro design guidelines by using Expression Blend 5. If everything goes fine, you should be able to follow these 2 articles in 30 minutes.

This first article will help you to create the welcome screen that will use a WinJS ListView control. This control will display all the blog posts recently published via nice thumbnails. The 2nd one will work on the detail view displayed when you’ll click on one of the items. At last, you’ll find a video at the end of this article playing in real-time the following steps as well as the final solution to download. See them as useful complementary resources if you need to clarify some parts of this article.

Pre-requisites: to follow these tutorials, you need first to:

1 – Download & install Windows 8 Release Preview on your machine:
2 – Download & install Visual Studio 2012 RC Express for Windows 8:

Note: If you’ve got a Mac, it works perfectly fine thanks to BootCamp or inside a virtual machine handled by Parallels for instance

Note 2: this article has been updated on 04/06/2012 to implement the changes in the UI & in the code between Windows 8 Consumer Preview and the Release Preview. In a general manner, if you need to migrate your application to RP, you should read this document: breaking changes document. In our case, the only impact where on the way to handle the XML elements returned by the XHR request. We’ve changed the selectors to switch from XPath via selectNodes to CSS selectors style via querySelectorAll.

Here is a brief summary of what we’re going to see in this article:

- Step 1: creating a blank application
- Step 2: creating the HTML & CSS base of our main page
- Step 3: first contact with Blend
- Step 4: loading the data with XHR and bind them to the ListView control
- Step 5: using a template and modifying the design with Blend
- Step 6: video demonstrating all the steps & source code to download

Note: these tutorials are based on the Tools for building Metro style apps session of the BUILD delivered by Chris Sell & Kieran Mockford. I’ve simply updated it for Windows 8 RP.


Windows 8 HTML5 Metro Style App: How to create a small RSS reader in 30min (part 2/2)

We’re now going to see how to display the details of each article. We will use for that a transition animation, we will play with the simulator and we will continue to discover Blend to use CSS3 Multi-columns for instance.

Like in the previous article, you’ll find a video as well as the source code to download at the end of the article.

This article is the second part of this one: Windows 8 HTML5 Metro Style App: How to create a small RSS reader in 30min (part 1/2)

During this article, we’ll see:

- Step 1: using the simulator
- Step 2: displaying the articles’ details
- Step 3: finishing the design of the detail view with Blend
- Step 4: video and source code to download



If you're thinking about Windows 8 HTML5 Metro app development this two part walk through might be the ticket to help you move from thinking to doing...

The Discussion

Add Your 2 Cents