Windows Store App Development Series : Part 3 – Hello World App

Hello,

In this article, we will create our first Windows Store App. To begin with we will create a very simple Hello World App using JavaScript Blank App template. And then we will look into different options that Visual Studio 2012 provides to debug and run the app.

Assuming that the software required to build Windows Store App is installed on your machine, if not please refer to Windows Store App Development Environment section in first article of this series.

So without anymore delay lets code!

Hello World App

As I explained in the second article in this series, Visual Studio 2012 provides different templates like Blank App, Grid App, Split App, Fixed Layout App and Navigation App to build a Windows Store App. Each of these templates provides boilerplate code to develop specific type of app. Since we are creating a very simple ‘Hello World’ app in this article, we will use a Blank App template.

Just to make it easy to understand, I am providing a step by step instruction to build the app. I will also explain the code that gets generated by default.

  1. Run Visual Studio 2012 Express. If you are running it for the first time, you will be asked to get the developer license. Please refer to earlier post in this series or follow the onscreen instructions to get the required license.
  2. Click on File – New Project menu option.
  3. In the New Project dialog box, select JavaScript language option and from the available template list, select ‘Blank App’ option.
  4. Provide the project name as ‘HelloWorld’, select the project save path and click Ok.
  5. You’re done! Hit F5 to run the application and you should see output as shown below

 HelloWorldOutput

Congratulations, you have just created your first Windows Store App without writing a single line of code!

Hello World App Source Code

As mentioned earlier, Visual Studio creates a default.html, default.css and default.js file for a Blank App template. Lets understand the code these files contain.

default.html

This is the application entry point which gets loaded first when application starts. Lets take a look at the source code.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello Windows Store App World</title>

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

    <!-- HelloWorld references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <h1>Content goes here</h1>
</body>
</html>

Like any other HTML file, it contains references to CSS and JavaScript files. Few important points to note

  • The !DOCTYPE html attribute at the top indicates that the web page follows HTML 5 standards and we can to use all useful HTML 5 tags in this web document.
  • WinJS references section contains a reference to built-in JavaScript and CSS files declared in Windows Library [Refer to folder Windows Library for JavaScript 1.0 under solution explorer].
  • By default a Blank App template contains two application CSS files ui-dark.css and ui-light.css, which controls the application presentation. You can change the default CSS as per your app requirement.
  • JavaScript files base.js and ui.js provides common functionalities related to JavaScript APIs and user interface widgets etc, which we will cover in future articles.
  • WinJS references starts with // instead of /.  // refers to shared library rather than files in your app package.
  • Application references [HelloWorld references in this case] section contains a reference to associated default.css and default.js file, which controls the presentation and behaviour of default page respectively.

default.js

This file controls the behaviour of default page [default.html]

(function () {
    &quot;use strict&quot;;

    WinJS.Binding.optimizeBindingReferences = true;

    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.
            }
            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();
})();
  • Above defined JS code contains a self executing JavaScript function which gets executed when application starts.
  • var app = WinJS.Application defines the app handler.
  • var activation = Windows.ApplicationModel.Activation is used to identify the app activation kind. As we will see later on in Windows Store App life cycle, an app can be activated from other applications like search contract, file share etc,
  • onactivated function definition code block is primarily useful to identify app activation kind i.e. whether the app has been newly launched or resuming from suspension state.
  • Though oncheckpoint function is empty in above code, its primarily used to to save app state before it gets suspended. You don’t have to worry about this event handler for HelloWorld app as we will cover this in future article.
  • WinJS.UI.processAll function instantiates all the WinJS controls declared in default.html file. WinJS controls are the special HTML controls that contains data-win-control attribute. Note, we don’t have any WinJS controls defined in HelloWorld app, however its useful to include this function call if you’re planning to include any WinJS controls in future.
  • And finally app.start() actually starts the application. It ensures that all the events declared in the functions are properly queued up for processing.

default.css

This file controls the presentation of default page [default.html]. It contains few stubs for defining styles for different app views.

body {
}

@media screen and (-ms-view-state: fullscreen-landscape) {
}

@media screen and (-ms-view-state: filled) {
}

@media screen and (-ms-view-state: snapped) {
}

@media screen and (-ms-view-state: fullscreen-portrait) {
}

We will discuss media queries in detail in next article.

Build and run the app

You are all set to run your first app. Visual Studio 2012 provides three options to build and run the app. These are – Local Machine, Simulator and Remote Machine.

Run options

Lets understand each of these options in brief.

Local Machine – Most of the time you will execute your app using this setting. Once you run the app, it gets deployed to your machine and visual studio debugger process attach itself to the app, using which you can easily debug it.

Simulator – If you want to know how the application will actually display on device, this is the option you need to choose. Once run, simulator provides different options like rotation, touch input, resolution which makes it easy to verify the app behaviour for different resolutions and view states.

Remote Machine – This option allows you to develop an app on one machine [on which Visual Studio is installed], but run it on different machine which may / may not have Visual Studio installed. This setting is particularly useful when Visual Studio machine does not support functionality required for Windows Store App such as touch input, rotation, camera etc. I strongly recommend you to read this MSDN article to understand the setup required to use this option.

Summary

In this article, we have successfully implemented our first Windows Store App [feel good about it :)], had a detail look at the boilerplate HTML, JS and CSS code Visual Studio generates. Finally, we looked at different options available in Visual Studio to run Windows Store App.

In the next article, we will look into Windows Store App view state, resolution and CSS media queries.

Thanks.

Leave a Reply