JavaScript, WinJs

Quick note on WinJS templates and controls

Today I was working streaming (https://livecoding.tv/sorskoot) 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.

HTML5, Presentation, UWP app

Speaking about JavaScript UWP apps.

Last week I was invited by iSense to give a presentation about JavaScript Frameworks in Universal Windows Platform Apps. I decided my personal goal was to show people that JavaScript is a perfectly legit language of writing your apps for Windows 10, specially when you have a web development background. I started with an introduction about the way the JavaScript UWP apps work in Windows 10 and talked a bit about the great support of ES6 in Microsoft Edge. I then demonstrated how easy it is to convert a web application to a hosted UWP app, including what you could do in…

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: https://github.com/sorskoot/AngularWinjsDemo

WinJs

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’…

Angular, Windows Store apps

Angular in a Windows Store app

I was trying to use Angular JS in a Windows store app and had some issues with Angular being “unsafe”. Using Angular JS in a JavaScript Windows Store app turned out to be pretty easy. Here’s how to do it: First create a new app. Install Angular JS though NuGet. Add a scripts tag to your default.html. <script src=”Scripts/angular.js”></script> Running the app at this point will result in the following error: The trick to get around this error is to enable CSP (Content Security Policy) and the most convenient part is that Angular has a directive to set that. All…

WinJs

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…

WinJs

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

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…

TypeScript, Windows Store apps

Windows Store app with TypeScript and Knockout

In this tutorial we’re going to make a very simple Windows Store app that uses TypeScript. The app is going to use Knockout to handle user input to search patterns on http://colourlovers.com. I assume you have read my previous tutorial on how to set up TypeScript compilation in a Windows Store app. We’ll start with an empty project after adding TypeScript compilation. Packages First we’ll start by adding our dependencies through NuGet. We have a dependency on KnockoutJS, because this is what we need for our bindings. To make the request to colourlovers we are going to use jQuery. First…

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 http://TypeScriptLang.org first. File – New Start by creating a new project using the template Store apps with…