Post
Ask Question

Simple Windows Store Apps Using JavaScript

Introduction.

In this article I explain how to create your first Windows Store app using JavaScript. To create the Windows Store app in JavaScript you need the Windows 8 operating system and Visual Studio 2012. In this article you learn creation of the Windows Store app, adding HTML controls to your page, creation of an event handler and registration of an event handler for app launch.

How to create the Windows Store app using JavaScript.

  1. Open Visual Studio 2012
  2. Click on "File"
  3. Select "New"
  4. Select "Project..."
  5. At the left side select other language
  6. Select JavaScript
  7. Select Windows Store
  8. Select Blank App
  9. Give an appropriate name and location to your app
  10. Click OK.

Create-JavaScript-Windows8-app.png

Designing of HTML page.

Now open your default.html page. In the body of this page you see the following code:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>App1</title>

 

    <!-- WinJS references -->

    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />

    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>

    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

 

    <!-- App1 references -->

    <link href="/css/default.css" rel="stylesheet" />

    <script src="/js/default.js"></script>

</head>

<body>

    <p>Content goes here</p>

</body>

</html>


Modification of default page.

Replace the line <p>Content goes here</p> with the following code in the body in your default.html page:
 

<body>

   <center><h2>My First App</h2></center>

   <center> <p>Enter your name

    <input id="txt" type="text" />

    <button id="btn">Submit</button></p>

    <div id="msg"></div></center>

</body>

When you run your app the output screen look like the following:


JavaScript-app-in-windows8-apps.png



Creation of event handler.

Open your default.js page on clicking on the js folder. and write the following code after the app.oncheckpoint event and before the app.start(); event:

function buttonClickHandler(eventInfo)

    {

        var uname = document.getElementById("txt").value;

        var msgg = "Welcome    " + uname + "  !";

        document.getElementById("msg").innerText = msgg;

    }


Registration of the event handler for the app start.

To register the event handler we call addEventListener for the click event as follows:

var btnn = document.getElementById("btn");
btnn.addEventListener("click", buttonClickHandler, false);


The complete code of your default.html page is as in the following:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>hellow</title> 

    <!-- WinJS references -->

    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />

    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>

    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script> 

    <!-- hellow references -->

    <link href="/css/default.css" rel="stylesheet" />

    <script src="/js/default.js"></script>

</head>

<body>

    <center><h2>My First App</h2></center>

    <center> <p>Enter your name

    <input id="txt" type="text" />

    <button id="btn">Submit</button></p></center>

    <div id="msg"></div>

</body>

</html>

The complete code code of your .js page is as in the following:
 

// For an introduction to the Blank template, see the following documentation:

// http://go.microsoft.com/fwlink/?LinkId=232509

(function () {

    "use strict";

 

    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());

 

            var btnn = document.getElementById("btn");

            btnn.addEventListener("click", buttonClickHandler, false);

        }

    };

 

    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().

    };

    function buttonClickHandler(eventInfo) {

        var uname = document.getElementById("txt").value;

        var msgg = "Welcome    " + uname + "  !";

        document.getElementById("msg").innerText = msgg;

    }

 

    app.start();

})();


Your output is as in the following:

JavaScript-app-output-in-windows8-apps.png

Summary.

In this article I explained the creation of a simple Windows Store app using JavaScript. I hope you learn well.



 


Similar Articles