Windows 8 App Development Tips and Tricks: Series Introduction

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:

Part 1

Topic 1: Using jQuery in Windows 8 Apps

Topic 2: Using a JavaScript Improve Animation of Page Transitions

Part 2

Topic 3: Fixing the Slide-bar Overlay

Part 3

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 Basic RSS reader was created by starting a new project with a template, more specifically the Javascript → Windows Store → Blank App template. Leveraging the Visual Studio template starts you off with a lot of built-in functionality for Windows 8 apps. If you want to learn more about the process of creating the reader, Microsoft has a great blog explaining how to do so here.

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

That is it for this week. We went over the topics we’re going to cover in the coming three weeks and did an overview of the app we’re going to improve upon. Next week, we will start out by covering using jQuery in Windows 8 applications, and how to use the Windows 8 specific JavaScript to create an animation when switching screens for a more fluid presentation and transition.

Stay tuned for Part 1, Part 2, & Part 3 in the series and remember: its about the journey, not the destination!

Also, be sure to follow @CrederaMSFT to stay abreast of the latest happenings in Microsoft.

• Microsoft
• JQuery
• Javascript
• Windows 8
• Visual Studio 2012
• .NET