Create Your First WinJS Application

Kishor Bikram Oli
8y
5.3k
0
2

Article

In this article you will learn how to create your first Windows metro application (WInJS) apps using HTML/JS/CSS.

Let us start with creating a blank Universal Windows App.

Step 1:

Create a new project. Go to File, New, then Project. Under Other Languages, click JavaScript, then select Blank App (Universal Windows) or Blank App (Windows 8.1).

I’m choosing Blank App (Windows 8.1).

Name it “Hello WinJS” and click OK.

Step 2:

You have created your application. Now in the Solution explorer you’ll see default.html (To open Solution Explorer Go to View > Solution Explorer or Press Ctrl+W, S).

You will see folders css, images, js in solution explorer.

css folder contains all the css.
images folder contains all our images.
js folder contains all our js files.

In default.html controls like texbox, selectbox, radio buttons, etc. We can add any html pages as per our requirements.

Step 3:

Lets add a button in default.html with a click event on that button to show messages in popup dialog like the following:

<button onclick="showDialog()">Click Me</button>

Our complete HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello_WinJS</title>
<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>
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<p>Hello WinJS</p>
<button onclick="showDialog()">Click Me</button>
</body>
</html>

Step 4:

We will add a separate JavaScript file. Let’s add a script.js file and add reference in html as:

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

Right click on js folder and Add, Javascript File, then script.js,

Step 5:

In script.js, we will add a showDialog() function and add some code to display UI popups as:

function showDialog() {
var msg = new Windows.UI.Popups.MessageDialog("This is my first winJS application built using HTML, CSS and JS.", "Hello World!");
msg.showAsync();
}