Create Your First WinJS Application

Kishor Bikram Oli

10y15.4k19100Article

UWP Universal Windows AppWinJS Application

19 Comments

Join the conversation! Your thoughts help the community grow.

Vignesh Mani10y ago
Good one
- Kishor Bikram Oli10y ago
  Thank you sir!
Shakti Singh Dulawat10y ago
Nice looking forward for more series on it
- Kishor Bikram Oli10y ago
  Thank you and sure sir, more series are on the way!
Sr Karthiga10y ago
good one
- Kishor Bikram Oli10y ago
  Thank you sir!
Sr Karthiga10y ago
Nice explanation
- Kishor Bikram Oli10y ago
  Thank you sir!
Kuppurasu Nagaraj10y ago
Nice Sharing...
- Kishor Bikram Oli10y ago
  Thank you sir!
Kishor Bikram Oli10y ago
Thanks everyone. :)
Debasis Saha10y ago
Good One..
- Kishor Bikram Oli10y ago
  Thank you sir!
Humayun Kabir Mamun10y ago
Nice...
- Kishor Bikram Oli10y ago
  Thank you sir!
Rahul Kumar Saxena10y ago
Good Show
- Kishor Bikram Oli10y ago
  Thank you sir!
Vignesh Mani10y ago
Nice
- Kishor Bikram Oli10y ago
  Thank you sir!

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

Step 6:

You can add some CSS for background in default.css like:

body {
background-color:blueviolet;
}

Step 7:

Now we are ready to run our application. Hit F5 and run the application. Click on Click Me button, we will get a Popup dialog.

That’s it.

Thanks. Happy Coding!

Read more articles on Universal Windows Platform: