Iris Classon
Iris Classon - In Love with Code

WinRT JS app guide: Introduction

What we will cover

In this post we will introduce our next guide on creating Windows Store Apps, this time with JavaScript and HTML.

Windows Store App guide with JavaScript and HTML

A couple of months ago we walked through the steps of creating a Windows Store application in C# and XAML using Telerik graph controls. We will in the next few weeks recreate the application in JavaScript and HTML using similar steps explaining and comparing the implementation done with the two languages.

Language projections explained:

In WinRT we have something called language projections. The language projections allow us to access the same APIs from different languages such as C#, JS, C++ and VB. That is the reason why Windows Store Apps can so easily be created using different languages, without any loss of performance or functionality.

The application we made last time was an application where a user could plan and track study activities and rate them according to importance, urgency and worth. The user could then analyze statistics in regards to time estimates and time spent, as well as how he or she prioritized the different activities.

Fom the last guide

As a quick reminder let’s have a look at the steps:

  • Creating a WinRT application step by step: From idea to publishing

  • Step 1: The idea

  • Step 2: The Plan

  • Step 3: Creating the basic UI

  • Step 4: Adding RadControls for WinRT/Metro

  • Step 5: Adding the model and some helper classes

  • Step 6: Adding a DataTemplate to the ListView

  • Step 7: Using CollectionViewSource in WinRT

  • Step 8: Typography and color compliance, styling up the app and the RadControl chart

  • Step 9: Adding the editing field

  • Step 10: Adding a lightweight database (SQLite) and CRUD support + two-way element binding

  • Step 11: Using a valueconverter to work with element visibility

  • Step 12: Async CRUD with SQLite and an awesome piechart

  • Step 13: Adding a horizontal chart and custom pallets for the charts

  • Step 14: Adding layout awereness and snapped view, disabling portrait view

  • Step 15: Exporting data as a text file

  • Step 16: Sharing content by contract in 4 easy steps

  • Step 17: Adding required app images for multiple scale factors

  • Step 18: Running the WACK tool and submitting to the Windows Store

Although we will be matching the steps there will be a few changes, as we can learn from the previous implementation and improve the application. Don’t forget we are making this app together so please feel free to make suggestions as well.

Since we worked on the C# app Telerik has released more controls both for XAML and HTML and we will be using some of the new controls. I’ll make sure that the app is fully functional even without the controls, but I want to show how you can incorporate third party controls and how in particular these controls work so well with our app.

Our first step will be the third step, as we are reusing the same plan from last time, the plan can be found here. Basically the plan sums up our intent and the features of the app, as mentioned earlier. The first step in this plan is to put together the UI and that step will be covered in the next blog post.


In this post we covered what the guide will do which is to recreate the XAML and C# Windows Store App that we programmed in the previous step by step guide.


Leave a comment (via email)

Last modified on 2013-05-03