How to create an RSS Reader for Windows 8 with HTML5

In this article we will learn how to create an RSS Reader for Windows 8 with HTML5.

add to favorites

set as viewed

add a note

In order to learn the process of creating small RSS reader using HTML5, we need to have two softwares downloaded and installed in our system which are as follows:

Windows 8 RTM
Visual Studio 2012 Express RTM for windows 8

In order to create this windows 8 application, a step-by-step approach is followed. The steps that need to be taken are as follows:

Building a blank application
Building the HTML & CSS base of main page
First contact with Blend
Loading the data with XHR and bind them to the ListView control
Using a template and modifying the design with Blend

Now, let us discuss the first three steps in detail.

Step - 1: Building a blank application

The first process is to create new JavaScript in Windows Store blank app project via New Project and name the file as “SimpleChannel9Reader”.

Figure 1: Shows the picture of dialog box “New Project”

Step 2: Building the HTML and CSS base of main page

In this step, firstly we have to open default.html file which describes the first page that will be displayed when the application is launched.

Listing 1: Shows the HTML code that will be displayed after Step-2

<p>Content goes here</p>

Listing 2: Shows the code that should be replaced in place of Listing 1

<div id="main"> <header id="banner"> <button id="backbutton"> </button> <h1id="maintitle">Welcome to Channel 9!</h1> </header> <section id="content"> </section> </div>

After this, we have a global div container in which there is a main id which is embedded with two sub-containers which are named as follows:

Banner - It is the header which is displayed at the top.
Content - It is displayed just below the banner.

Now CSS is added to this by opening the default.css file which is stored in the css directory.

Listing 3: Shows the code to add the pieces of CSS

#main {
    width: 100%;
    height: 100%;
}
 
#banner {
    width: 100%;
    height: 100%;
}
 
#backbutton {
}
 
#maintitle {
}
 
#content {
    width: 100%;
    height: 100%;
}

We can run the application by pressing F5 or by either clicking the button shown below:

Figure 2: Shows the figure of the key to run the application

After clicking this option, the following screen appears.

Figure 3: Shows the figure of the screen which is displayed after clicking the Local Machine key or F5 key

After doing this, we get a problem i.e., the back button and the title are not aligned which are resolved by using Blend 5.

Step 3: First contact with Blend

In this step, we need to launch the Blend and navigate to the folder where we have saved the SimpleChannel9Reader project.

Figure 4: Shows the figure of the dialog box given by Blend

Here, the aim is to create two grids. The description of these two grids is as follows:

First Grid: This is for the main container. It is defined by one column that will occupy all the available width & by two lines.
Second Grid: It is defined for the back button and the title and is done by one line and two columns.

Now start the process by selecting the main element by using the Live DOM window.

Figure 5: Shows the Live DOM dialog box

Then, we jump to the “CSS Properties” part, select the #main rule and in the “Layout” window, and switch the display to “-ms-grid”.

Figure 6: Shows the Layout Window dialog box

In this process, we are using the CSS Grid Layout and after the display is correctly changed to gird, the next step is to define the type of grid required. To do this, we need to jump to the Grid part and define the properties.

Figure 7: Shows the dialog box to fill in grid properties

After specifying the properties, we will have a unique column that is displaying through the width of the screen and two lines which are described as follows:

The first line has a fixed height of 132px.
The second line covers the remaining space.

Figure 8: Shows the position of lines inside the Blend designer surface

After this, the content element is moved to the second line. It is done by selecting it into the “Live DOM”, then choosing the #content rule and moving it to its “Grid” properties. Then, Changing the “-ms-grid-row” value to 2.

Now, the first line is split into two columns so that we can place each element into right places. To do this, we need to select the “banner” element and switching its display property to-ms-grid and define 1fr line & two columns of 120px and 1fr.

Figure 9: Shows the dialog box of grid

Now, we need to move the “maintitle” element in column 2 and then center it vertically. It is done by changing the “-ms-grids-row-align” property by changing it to “center”.

Figure 10: Shows the dialog box of moving the “maintitle” element

At the last, we need to go to the “Layout” part by pressing the “Backbutton”. After this the margin is set by giving the following specification:

Top margin - 54px
Left margin - 40px

Figure 11: Shows the dialog box after setting the margin

Now, save the changes that are made and then go to the Visual Studio. In this, open default.css file. After opening this file, we get a blend.

Listing 4: Shows the code of generated “clean” CSS in the right rules

@media screen and (-ms-view-state: fullscreen-landscape)
{
 
    #main {
        width: 100%;
        height: 100%;
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 132px 1fr;
    }
 
    #banner {
        width: 100%;
        height: 100%;
        display: -ms-grid;
        -ms-grid-columns: 120px 1fr;
        -ms-grid-rows: 1fr;
    }
 
    #backbutton {
        margin-top: 54px;
        margin-left: 40px;
    }
 
    #maintitle {
        -ms-grid-column: 2;
        -ms-grid-row-align: center;
    }
 
    #content {
        width: 100%;
        height: 100%;
        -ms-grid-row: 2;
    }
}

The application is verified by pressing the F5 key.

After contacting the blend with the created blank application and HTML & CSS base of main page, we need to do the following steps, which are as follows:

Step 4: Loading the data with XHR and binding them to the ListView Control

In this step, we will go into the details of the code of the obtained in step 3.

The first thing we need to do is to use WinJS also known as Microsoft Windows Library for JavaScript SDK for inserting the control that will be in charge of displaying our articles’ thumbnails on the welcome screen. The WinJS is used for helping the JavaScript developers for implementing the new windows 8 UI experience in an easy and better way. By using WinJS, the whole system is provided with the following things:

A set of controls
A templating engine
A binding engine
Handles Namespaces, asynchronous calls and many more!

Now, in the Windows Store Projects we will find reference section of the “Solution Explorer”.

Figure 12: Shows the dialog box of Solution Explorer

In this, we will find two default style sheets i.e., dark and light themes provided as well as the JavaScript code. Now, we will use the ListView control which creates a grid layout to display the list of elements.

Listing 5: Shows the HTML code in the section tag by opening the “default.html”

<div id="articlelist" data-win-control="WinJS.UI.ListView"></div>

It is a simple classical div and is annotated with the data-win-control attribute.

Listing 6: Shows the code to transform simple div into a JavaScript ListView control

WinJS.UI.processAll();

If we forget to add the listing 2, then all the divs will become again some simple div. Now this ListView is feeded with some data from RSS feed.

Listing 7: Shows the code to add above the processAll() line

articlesList = new WinJS.Binding.List();
var publicMembers = { ItemList: articlesList };
WinJS.Namespace.define("C9Data", publicMembers);

In this, we need to declare the articleList variable at the top of the function just below the application for example, we declare a binding list() which is used to bind the data to the WinJS controls. After this, we need a function that will grad the data from RSS feed.

Listing 8: Shows the code to add to the function

var items = rss.responseXML.querySelectorAll("item");
for (var n = 0; n < items.length; n++) {
    var article = {};
    article.title = items[n].querySelector("title").textContent;
    var thumbs = items[n].querySelectorAll("thumbnail");
    if (thumbs.length > 1) {
        article.thumbnail = thumbs[1].attributes.getNamedItem("url").textContent;
        article.content = items[n].textContent;
        articlesList.push(article);
    }
}

The above code is self-explicit and selects the item nodes while accessing the properties. The name of the properties needs to be kept in mind, as they will be used later on. This function needs to be run in the starting phase of the application. It is run once the DOM parsing is done to build the WinJS controls.

Listing 9: Shows the code to do the above function

WinJS.UI.processAll().then(downloadC9BlogFeed);

Now, after this we need to specify the data source to the controls by going back to the HTML code.

Listing 10: Shows the code to modify the div associated to the ListView to change its options

At the ends, there is a need of basic CSS to help the control by jumping to the default.css file.

Listing 11: Shows the code to add the rules

#articlelist {
    width: 100%;
    height: 100%;
}
 
#articlelist .win-item {
    width: 150px;
    height: 150px;
}

Finally, the solution is run by pressing the F5 key.

Figure 13: Shows the picture displayed after pressing F5 key

The above picture shown has data in a very bad manner which cannot be understood. The next step is used to make it better and design it in a better way i.e., making the exact resolutions.

Step 5: Using a template and modifying the design with Blend

In this step, we will work on changing the design of each element. This is what template engine is known for and this verifies the use of WinJS in our programming.

The step starts by navigating to the default.html page.

Listing 12: Shows the code to be added to main page

This code is marked with WinJS.Binding.Template which will help the WinJS to get a direction of what to do. In this coding, data-win-bind is used to define the binding expressions which will help the binding engine to know which JavaScript properties from the data source to map to the appropriate HTML nodes.

Listing 13: Shows the code to configure the WinJS control to not use the default template

Figure 14: Shows the image after running the application

Figure 15: Shows the image after reloading all the modifications which are done inside the Visual Studio in the Blend

In this way, we learn that Blend 5 is a dynamic tool for executing the JavaScript. Now, under default.css file, we will add two new CSS rules.

Figure 16: Shows the dialog box for adding the CSS rules

In the above dialog box, the following selectors are added:

.listItemTemplate
.listItemTemplate img

In order to change the size, we just need to go the sizing panel which is located on the right. Finally, after going back to the Visual Studio and pressing F5 we get the final layout.