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. We will then build a WinRT application targeting the Windows Store. We’ll try also to follow the Windows 8 UI 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 at the end the final solution to download. See it 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/buy & install Windows 8 RTM on your machine: http://msdn.microsoft.com/en-US/windows/apps/br229516.aspx where you also have a 90-day trial version available.
2 – Download & install Visual Studio 2012 Express RTM for Windows 8: http://msdn.microsoft.com/en-US/windows/apps/br229516.aspx which is free or you can use the paid versions of course.
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 21/08/2012 to implement the changes in the UI & in the code between Windows 8 Release Preview and RTM. In a general manner, if you need to migrate your application from RP, you should read this document: breaking changes document. In our case, the only impact was linked to the new UI & naming of Visual Studio.
Note 3: I’ve added a complementary post dedicated to WordPress and Community Server here: Windows 8 HTML5 Metro Style App: RSS reader in 30min – building your WordPress version
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: 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 RTM.
Step 1: creating a blank application
First thing you need to do is to launch Visual Studio 2012 and create a new JavaScript –> Windows Store Blank App project via “File –> New Project”:
Name it “SimpleChannel9Reader ” as we’re going to download the RSS stream of the Coding4Fun section of Channel9 available here: http://channel9.msdn.com/coding4fun/articles/RSS
Step 2: creating the HTML & CSS base of our main page
Open the “default.html” file which describes the first page that will be displayed when you’ll launch the application. Instead of the following HTML part:
<p>Content goes here</p>
Insert this one:
<div id="main"> <header id="banner"> <button id="backbutton" class="win-backbutton"> </button> <h1 id="maintitle" class="win-title">Welcome to Channel 9!</h1> </header> <section id="content"> </section> </div>
We now have a global div container with the “main” id embedding 2 sub-containers named “banner” and “content”. The header will be obviously displayed at the top of the page and the content section will be displayed just below.
Let’s add a bit of CSS to that by opening the “default.css” file stored in the “css” directory. You’ll see that there is already some predefined CSS to handle the various available Windows 8 views thanks to Media Queries.
In these 2 articles, we will concentrate our efforts only on the “fullscreen-landscape“ state. So jump into this section and insert the following piece of CSS:
#main {
width: 100%;
height: 100%;
}
#banner {
width: 100%;
height: 100%;
}
#backbutton {
}
#maintitle {
}
#content {
width: 100%;
height: 100%;
}
This simply indicates that we’d like to take all the available space for our 3 main containers.
Run your application by pressing the F5 key or by clicking on the following button:
Logically, you should now see this screen:
And you should also see an obvious design problem: the back button and the title are not aligned. Let’s resolve this by using Blend 5!
Step 3: first contact with Blend
Launch Blend and navigate to the folder where your SimpleChannel9Reader project is. Blend will then show that:
The goal here is to create 2 grids. The first one will be for the main container. It will be defined by 1 column that will take all the available width & by 2 lines. The 2nd one will be defined by 1 line & 2 columns for the back button and the title.
Let’s start by the select the “main” element by using the “Live DOM” window:
If you simply want to discover the CSS3 Grid specification, feel free to play with this IE Test Drive demo: Hands On: CSS3 Grid Layout
Ok, now that the display is properly switched into grid, we need to define our grid. For that, jump to the “Grid” part and declare the following properties:
Move the “maintitle” element into column 2 and center it vertically thanks to the “–ms-grid-row-align” property changed to “center”:
Select the “backbutton” and jump to the “Layout” part. Set a 54px top margin and a 40px left margin. If you haven’t missed something, you should now see that on the design surface:
But don’t panic, this ugly output is the expected behavior! We still have a bit of design to work on. But you can already see that the binding works correctly and that the control works fine with touch’ & mouse experiences. Moreover, the control automatically scales to the various resolutions. You’ll then not have the exact layout (number of columns & lines displayed) that the above screen in your case.
Step 5: using a template and modifying the design with Blend
We now need to change the way each element is drawn. This is exactly the purpose of the templating engine. A template is only a piece of HTML marked with WinJS attributes.
Navigate to the “default.html” page and add this piece of HTML just above the “main” part:
<div id="C9ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none;"> <div class="listItemTemplate"> <div class="listItemImage"> <img data-win-bind="src: thumbnail" /> </div> <div class="listItemTitle" data-win-bind="innerText: title"> </div> </div> </div>
It’s an HTML template marked with the “WinJS.Binding.Template” value. This will help WinJS to know what to do with this special piece of HTML after the processAll() execution. You’ll find also the usage of “data-win-bind” to define binding expressions. It will help the binding engine to know which JavaScript properties from the data source to map to the appropriate HTML nodes. Except that, you can use some classic HTML.
We now need to configure the WinJS control to not use the default template anymore but to use the new one above instead. It’s done by simply changing the options:
<div id="articlelist" data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: C9Data.ItemList.dataSource, itemTemplate: C9ItemTemplate }">
</div>
If you now run the application, you should have this screen:
It’s better but we’re not done yet. To go further in the design review, we need the help of our friend Blend.
So, let’s go back into Blend. It will ask you to reload all the modifications you’ve done inside Visual Studio. Once done, you’ll have that:
Aren’t you surprised? You should! Indeed, we see here the same visual output you will have when you’ll press F5 in Visual Studio. This means that Blend 5 is dynamically executing the JavaScript part of your application directly inside the designer! This is an awesome feature.
Thanks to that, you will be able to directly work on real data without being forced to put in place what we call “mocking”. It’s the cool part of JavaScript. Blend was able to execute the JS code that launch the XHR request and build the WinJS objects.
Under “default.css”, let’s add 2 new CSS rules. Click on the “+” button on the main media query:
And here is the result you should have:
We’re now going to resize the template’s images. For that, use the “Selection” pointer and click on one of the images:
See you in the next article for that : Windows 8 HTML5 WinRT App: How to create a small RSS reader in 30min (part 2/2)
<<<>>>
David Rousset
David Rousset is a Developer Evangelist at Microsoft, specializing in HTML5 and web development. Read his blog on MSDN or follow him @davrous on Twitter.
This article was reprinted with permission from Microsoft Corporation. This site does business with Microsoft Corporation.
