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.
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.
Summary
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.
Comments
Last modified on 2013-05-03