JavaScript, WinJs

Quick note on WinJS templates and controls

Today I was working streaming ( building my new JavaScript Audio Workstation. I wanted to use a template in a custom WinJS control but found it wasn’t in the samples.  Also, the MSDN documentation contained an error which made it even harder to get it to work.

Angular, Windows Store apps, WinJs

Angular in a Windows Store app – Servicing

Today I’m adding an AngularJS service to the Windows Store project in Visual Studio. This service is making a call to an external webservice which returns some JSON data. This controller uses a promise to handle the call to the service and when it’s fulfilled the data is shown on the screen. You can find the code:


WinJS Classes and Namespaces

WinJS provides you with a way to create namespaces and work with classes in your code. It provides functionality to create derivatives of your classes and combine them using mixins. Class and Namespace There are many frameworks that give JavaScript the feeling of working with OO. So does WinJS. WinJS uses the WinJS.Class.define function to define a class. The function takes 3 parameters. The first parameter is a constructor that is called when the object is instantiated. You can provide parameters to the constructor that can be used when instantiating the object. For example, in the code below a ‘name’…


List item delay in Pivot

In one of my apps I wanted to have the items in a list with the list being in a Pivot control. I wanted to have the items slide in with a little delay, like they are in the Windows Phone mail app. I’ve been looking for that a lot, but couldn’t find anything. Until I stumbled upon the Pivot Control Sample app. The actual solution is demonstrated in this sample. It doesn’t seem to be documented anywhere else… Here’s how it’s done… All you have to do to get the delay on the items, or basically any HTML inside…


Detecting Phone, Desktop or Web with WinJS

I’m my previous post I showed how you can add a website to a universal project and share some JavaScript between all three. This is nice, but I will run into a situation where you’ll have some code that is not supposed to run on one of the platforms. In the C# world you can use compiler directives in situations like this. In JavaScript this is not possible (Although you could create constructions that mimic directives using Grunt for example). WinJS has some functionality build in that can help finding out what platform you are using. There are two properties…


WinJS Promises

For a while now I wanted to dive a little deeper into Promises, so I decided to write this tutorial. For this tutorial I used the WinJS version as available on GitHub. If you want to follow along you’ll have to compile the code yourself. Which is very easy, but if you have any issues or questions please let me know and I’ll do a tutorial on that. What’s a “promise”? A promise is an object representing a value that is eventually returned by an operation. This object can be passed around like any other object. Various frameworks have various…

HTML5, JSON, TypeScript, Windows Store apps, WinJs

Combining WinJS, TypeScript, jQuery and KnockOut

In this tutorial we’re going to build a very simple Windows Store application that uses jQuery and Knockout to get some data from the internet and show this in a GridView. I’ll show you how you create a new project, get all the the TypeScript definitions you need, get data from a web service and bind that to the GridView control. I’m assuming you have at least a little TypeScript knowledge. If you don’t you should have a look at the tutorials on first. File – New Start by creating a new project using the template Store apps with…

CSS, Design, HTML5, Windows 8, Windows Store apps, WinJs, WinRT

72 design templates for Windows Store apps

I recently tweeted about some upcoming new design templates. At that time these templates were not released yet. Today I stumbled on them again. And it turns out that they are available for free on codeplex. You can see them all here. It’s not recommended to uses these templates as is. They’re provided as Visual Studio solutions in C# and JS and you should change the design to match your brand, of course. UPDATE May 9th 2013: Added 10 more templates to the list. UPDATE January 1st 2014: Added 12 more templates to the list. Here’s the entire list again.…

HTML5, WinJs

SFX in WinJS

When working on my entry for the Js13kGames contest I was looking for a synthesizer or sound generator for HTML5. I came across a javascript port of an a synthesizer in actionscript. It’s build by David Humphrey. Markus Neubrand added the parameter strings. It is available on github. Due to the time limit I only got it to work in Firefox at the time, but the library works in Chrome too. Unfortunately Internet Explorer is not supported. But, when porting the code to an Windows Store app I suddenly noticed that the sounds worked. I’ve created a small module around…

Expression Blend, Windows 8, WinJs

WinJs DesignTime Mode

While working on the port of my game Orbizoid to Windows 8 I ran into an issue with the starfield in de background of the game. The starfield was running in Expression Blend too. At first this was kinda funny, but soon the performance dropped and it became unworkable. There used to be a property to detect if you are running inside Expression Blend before, I hoped this was still available when working on Windows 8 applications in javascript. I had to search for a moment, but it is possible. var isInDesigner = Windows.ApplicationModel.DesignMode.designModeEnabled; if(!isInDesigner){ // code not running in…