Voice Of A Developer: Adding WinJS To Your Web App

Introduction

Before moving further, let us look at the previous articles of the series

JavaScript

JavaScript is a language of the Web. This series of articles will talk about my observations learned during my decade of software development experience with JavaScript, and what mistakes a developer generally makes and what differences they should be aware of.

WinJS is a Windows library for JavaScript. WinJS provides the controls. You need to make your app professional, equipped with the modern UI controls and include JS, CSS, and HTML all in one place. It is an open-source library by Microsoft and the source code is available at GitHub.

What’s the use of WinJS?

WinJS contains the standard implementation of Win 8 controls which aren’t covered by HTML5. It makes it possible to add Windows UI controls in HTML such as:

AppBar
DatePicker
FlipView
Flyout
ListView
Rating
SemanticZoom
TimePicker
ToggleSwitch
Tooltip
ViewBox

and many more…

I found these controls pretty cool as it enhances your webApp UI experience. Microsoft developed this for a universal experience across Win 8 and HTML apps, where you can add WinJS.

Which frameworks are supported by WinJS?

WinJS provides support to the three popular JavaScript frameworks via adapters. These are:

Angular
React
Knockout

What is an adapter?

An adapter is a slim layer, which facilitates the usage of WinJS controls with the above three frameworks. Hence, there are different adapters available.

Create your first WinJS application

I will leverage the AngularJS adapter to build my first WinJS Application. I use the Yeoman Angular generator to scaffold my Application. Yeoman is a fantastic tool to kickstart new projects. For more information, visit here.

Setup basic AngularJS webapp

Go to command prompt, type YO and it will show you the list of installed generators.

Now, fire YO commands again and create a project using the “Angular” generator and it will prompt multiple options. Hence, select accordingly.
Now, you are done with your basic scaffold Application.
Run the basic Application, using GRUNT command. The default port on which it runs is 9000.

Output
Go to the directory and the basic structure is ready for you.

Add WinJS in your application

There are multiple ways to include WinJS in your Application.

Download WinJS from GIT.
Refer to CDN.
Use command prompt tools npm, bower [I prefer this way].
Fire the commands shown below in your WebApp console location.

npm install winjs

bower install winjs

This will install WinJS files under the app\bower_components folder.
As I mentioned earlier, we’ll add the AngularJS adapter, hence, fire the command shown below:

bower install angularjs-winjs

Goto directory app\bower_components and see the folder structure, shown below:

Modify below files as

index.html: For our WebApp, we shall include all the relevant WinJS and the adapter files:
1. <script src="bower_components/angular/angular.js"></script>
2. <script src="bower_components/angular-route/angular-route.js"></script>
3. <script src="bower_components/winjs/js/base.js"></script>
4. <script src="bower_components/winjs/js/ui.js"></script>
5. <script src="bower_components/angular-winjs/js/angular-winjs.js"></script>
6. <link href="bower_components/winjs/css/ui-dark.css" rel="stylesheet" />
The index.html will be transformed, as shown below:
1. <!doctype html>
2. 
3. 
4. 
5. 
6. <html class="no-js">
7. 
9. <head>
10. <meta charset="utf-8">
11. <meta http-equiv="X-UA-Compatible" content="IE=edge">
12. <title></title>
13. <meta name="description" content="">
14. <meta name="viewport" content="width=device-width">
15. 
17. 
18. <link rel="stylesheet" href="styles/main.css">
19. 
20. </head>
22. <body ng-app="NewAppApp">
23. 
27. 
32. 
33. <div class="container" ng-view=""></div>
35. 
36. <script>
37. (function(i, s, o, g, r, a, m)
38. {
39. i['GoogleAnalyticsObject'] = r;
40. i[r] = i[r] || function()
41. {
42. (i[r].q = i[r].q || []).push(arguments)
43. }, i[r].l = 1 * new Date();
44. a = s.createElement(o),
45. m = s.getElementsByTagName(o)[0];
46. a.async = 1;
47. a.src = g;
48. m.parentNode.insertBefore(a, m)
49. })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
51. ga('create', 'UA-XXXXX-X');
52. ga('send', 'pageview');
53. </script>
54. <script src="bower_components/angular/angular.js"></script>
55. <script src="bower_components/angular-route/angular-route.js"></script>
56. <script src="bower_components/winjs/js/base.js"></script>
57. <script src="bower_components/winjs/js/ui.js"></script>
58. <script src="bower_components/angular-winjs/js/angular-winjs.js"></script>
59. <link href="bower_components/winjs/css/ui-dark.css" rel="stylesheet" />
61. 
62. <script src="scripts/app.js"></script>
63. <script src="scripts/controllers/main.js"></script>
64. 
65. </body>
67. </html>
App.js: We know this is the starting file of AngularJS and we shall include WinJS module dependency, as shown below:
1. 'use strict';
2. angular.module('NewAppApp', ['winjs', 'ngRoute'])
3. .config(function($routeProvider)
4. {
5. $routeProvider
6. .when('/',
7. {
8. templateUrl: 'views/main.html',
9. controller: 'MainCtrl'
10. })
11. .otherwise
12. ({
13. redirectTo: '/'
14. });
15. });
Main.html: Modify main.html file and include the directive win-rating, as shown below:
1. <win-rating max-rating="maxRating" user-rating="rating"></win-rating>
2. <div>
3. <h2 class="win-h2">Rating: {{rating}}</h2>
4. <input class="win-slider" type="range" min="1" max="{{maxRating}}" ng-model="rating" />
5. </div>
6. <div>
7. <h2 class="win-h2">Maximum Rating: {{maxRating}}</h2>
8. <input class="win-slider" type="range" min="1" max="50" ng-model="maxRating" />
9. </div>
Main.js: In above main.html, we are using two variable, “rating” and “maxRating,” and we can initialize their value in MainCtrl (controller),
1. 'use strict';
3. angular.module('NewAppApp')
4. .controller('MainCtrl', function($scope)
5. {
6. $scope.rating = 1;
7. $scope.maxRating = 5;
8. });
Output

See that the “win-rating” directive has added stars according to the value of the slider.

You can download the code shown above from my GitHub Repository.

Note: Once you clone, please don’t forget to run “node install” and “bower install” commands.

There are many other such Win 8 controls which you can try:

win-date-picker: Add below code in “main.html” and date control will show up,
1. <win-date-picker current="date" on-change="dateChanged()"></win-date-picker>
Output
win-date-picker: Add the code shown below in “main.html” and click the button to see flyout effect.
1. <button id="flyoutAnchor">Flyout!</button>
2. <win-flyout anchor="'#flyoutAnchor'">Happy coding!</win-flyout>
Output
win-time-picker: Add the code generated below in “main.html” and see time control.
1. <win-time-picker current="time"></win-time-picker>
Output

There are many other nice controls available and you can do a lot to enhance your UI experience.

Playground

If you would like to try using WinJS without installing the above stuff, you can go to two playgrounds.

Test the various samples that are provided. For example,

Summary

Please try the GitHub code and samples given above. I appreciate your feedback.

6 Comments

Join the conversation! Your thoughts help the community grow.

Santhakumar Munuswamy10y ago
Nice share
Guest User10y ago
Thanks guys! please help me to understand, what more topics are you interested to read ...
Vignesh Mani10y ago
Nice
Raja10y ago
Good One..
Debasis Saha10y ago
Nice one..
Thiruppathi R10y ago
Nice info..