With the launch of Visual Studio 2012 and Windows 8 last year, a new paradigm emerged for .NET developers in Windows 8 apps. As with any paradigm shift or emergence of a new platform, programming for Windows 8 apps comes with its own little oddities. In this blog series, we will discuss some of these oddities, guide you through resolving the oddities and improving your overall app in the process.
The following three posts teach you step-by-step how to improve a newly created app. The series is designed to be a jumpstart for beginners who want to get some experience with creating Windows 8 apps and learn about the quirks that come with them. The posts will cover the following topics I experienced myself when trying to improve the app I was building:
Topic 1: Using jQuery in Windows 8 Apps
Topic 3: Fixing the Slide-bar Overlay
Topic 4: Changing the Splash Screen of your App
Topic 5: Adding Sharing to your App as a Source
The posts will include step-by-step instructions on how to get everything done, so even if you’re just starting you’ll be able to follow along and learn through the process. At the beginning and end of each post you’ll see a link to download the start and end project, so you can follow along with exactly what I have.
What You Need
Before we get started on the first topic, we should cover how the application we’re altering works and the prerequisites required. Make sure you have either a trial version, or a full copy of both Windows 8 and Visual Studio 2012. You can download them here. For our purposes you’ll only need the Express Edition of VS 2012, which you can get for free. Once you have Windows 8 and Visual Studio 2012, then download and open our sample Basic RSS project.
The App We’ll Create
The application is not very complicated, and we’ll give it a quick overview. In the default.html page near the bottom you should see two divs, one called “articlelist” and another “articlecontent.” When we start the app it obtains the articles from the RSS feed and displays them in the articlelist. Once we click on an article, it hides the articlelist div and displays the articlecontent div. On clicking the back arrow at the top of the page, it returns you to the article list.
If you open the default.js page, inside of the app.onactivated function you should see a line args.setPromise(WinJS.UI.processAll().then(downloadEngadgetBlogFeed)); This line tells the page to process the articlelist div with the attribute data-win-control=”WinJS.UI.ListView” and after that’s done run our RSS feed parser called downloadEngadgetBlogFeed.
The parser starts by running an asynchronous WinJS function called XmlHttpRequest, and once we get the xml response from engadget’s RSS feed of articles, the rest of the function reads that response and parses it. We have a function called cleanEngadgetContent so we only select each item’s desired nodes and package that into our content.
More Next Time
Also, be sure to follow @CrederaMSFT to stay abreast of the latest happenings in Microsoft.