Building Universal apps using WinJS: (01) Intro to WinJS

Sign in to queue

Description

In this series we are going to discuss about how we can create modern applications for both Windows and Windows Phone using WinJS. But first, let's make an intro for the new developers.

One year ago, Microsoft introduced a new way to develop applications for both Windows and Windows Phone, known as Windows Universal Apps. This technology promises to developers the ability to share code in both platforms.

This awesome new feature is possible because Windows Phone 8.1 and Window 8.1 apps are based on Runtime which called Windows Runtime (something different from .Net which is limited to create Desktop and Web apps).

Windows Runtime is a software layer that "sits on top" of the OS and contains a set of Application Programming Interfaces (APIs), in the form of a class library, that exposes the features of the platform to developers.

Generic Episode Image

Windows Runtime applications can be built with:

  • Windows XAML (C#/VB/C++)
  • WinJS (HTML + JS)
  • DirectX (C++)

The most common question from new developers is which programming language should they use?

Well this depends on your personal experience, your preference and on what kind of app you want to built.

If you want to create a game with great graphics, DirectX is a one way road.

On the other hand, if your goal is a modern application, you need to choose between Windows XAML and WinJS. If you prefer .NET and you are skilled at C#/VB/C++ then you should use the first one. If you are a web developer then WinJS is perfect for you.

In this series of blogs we will focus on WinJS because HTML5 is a common language and even students have learned it at school.

WinJS is an open source JavaScript library and provides helpers that facilitate the development of native Windows Store apps using HTML5 and JavaScript.

The library consists of modules and functions that expose the Windows Runtime in a way that is consistent with JavaScript coding conventions. WinJS makes it possible to add Windows UI controls in HTML. This is accompanied by support for data binding and a template engine.

Below you can find all the versions of WinJS:

  • WinJS 1.0
    • The first version of WinJS. It was released with Windows 8.0.
  • WinJS 2.0
      WinJS was released as open-source software under the Apache License on GitHub by popular demand and aimed at cross-platform and browser compatibility.
    • WinJS 2.0 for Windows 8.1
    • WinJS Xbox 1.0 for Windows
    • WinJS Phone 2.1 for Windows Phone 8.1
  • WinJS 3.0
    • Cross-browser/cross-platform support spanning the most popular desktop and mobile browsers, as well as HTML-based
    • Improved universal control designs.
  • WinJS 4.0
    • A Preview of WinJS 4.0 was announced on March 27, 2015

But enough with the intro! It's time to create our first application, study the Solution Explorer of our project, learn how to share code and run both Windows Phone and Windows app.

 


Create a WinJS Universal App

  1. Open Visual Studio 2013 and go to "File > New > Project".
  2. In the pop-up window select "Templates > JavaScript > Store Apps > Universal Apps > Blank App (Universal Apps)".
  3. Give a name to your project, select the location you want to save it and press ok.

Generic Episode Image

 


Solution explorer of the project

Solution Explorer is usually placed in the right side of Visual Studio as a tab. If you can't find it just press: "View > Solution Explorer (or Ctrl + Alt + L)".

Generic Episode Image

As you can see from the image there are three subfolders. The first one is for the Windows 8.1 project, the second one is for the Windows Phone 8.1 project and the third one contains all the shared code.

  • Windows 8.1 project folder
    • References - Contains a reference to the Windows Library for JavaScript and a reference to the shared project (third subfolder)
    • css - Contains all the stylesheets of the app.
    • images - Contains all the images of the app, included the necessary logos.
    • default.html - The base html of the Windows 8.1 app
    • package.appxmanifest – is nothing but an xml file that have different sets of exposed properties for your application and Visual Studio will open it in designer mode by default.
  • Windows Phone 8.1 project folder – Has exactly the same structure with the previous folder but all the files are referred to the Windows Phone app.
  • Shared folder - Contains all the shared/common files
    • js – Contains all the shared JavaScript files. By default Microsoft has the default.js file which has the basic code logic for the application lifecycle.

Generic Episode Image

 


Shared code

Finally let's make a mini demo and learn how to share code.

Open both "Windows 8.1 project > default.html" and "Windows Phone 8.1 project > default.html" and paste the following code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo1.Windows</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- Demo1.Windows references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <button>Press me</button>
    <br />
    <br />
    <h1></h1>
</body>
</html>

Open "Shared Project > js > default.js" and paste the following code:

// For an introduction to the Blank template, see the following documentation:
// https://go.microsoft.com/fwlink/?LinkID=392286
(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }

            //get necessary DOM elements
            var pressBtn = document.querySelector("button");
            var label = document.querySelector("h1");

            // add click event to the button
            pressBtn.addEventListener("click", function () {

                // on click change the inner text of <h1>
                label.innerText = "Hello World!"
            });

            args.setPromise(WinJS.UI.processAll());
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    app.start();
})();

 

Now when you tap the button, the inner text of the <h1> tag gets the value "Hello World".

As you can notice all of our code logic is placed in the shared folder!

 


Run the app

Now let's run our app and see how it looks in both Windows and Windows Phone devices.

  • Windows 8.1 app:  "Open Solution Explorer > right click on Windows 8.1 project > Set as StartUp Project > Run it with Local Machine".

Generic Episode Image

  • Windows Phone 8.1 app: "Open Solution Explorer > right click on Windows Phone 8.1 project > Set as StartUp Project > Run it with Emulator 8.1 WVGA 4 inch 512MB"

Generic Episode Image

 

Generic Episode ImageGeneric Episode Image

 

You can download the demo from here.

Tag:

WinJS

The Discussion

Add Your 2 Cents