Post
Ask Question

Create Your First WinJS Application

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:

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

Our complete HTML

  1. <!DOCTYPE html>  
  2.   
  3. <html>  
  4.   
  5. <head>  
  6.   
  7.     <meta charset="utf-8" />  
  8.   
  9.     <title>Hello_WinJS</title>
  10.   
  11.     <!-- WinJS references -->  
  12.   
  13.     <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />  
  14.   
  15.     <script src="//Microsoft.WinJS.2.0/js/base.js"></script>  
  16.   
  17.     <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>  
  18.   
  19.    
  20.   
  21.     <!-- Hello_WinJS references -->  
  22.   
  23.     <link href="/css/default.css" rel="stylesheet" />  
  24.   
  25.     <script src="/js/default.js"></script>  
  26.   
  27.     <script src="js/script.js"></script>  
  28.   
  29. </head>  
  30.   
  31. <body>  
  32.   
  33.     <p>Hello WinJS</p>  
  34.   
  35.     <button onclick="showDialog()">Click Me</button>  
  36.   
  37. </body>  
  38.   
  39. </html>  
Step 4:

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

  1. <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:

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

Step 6:

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

  1. body {  
  2.     background-color:blueviolet;  
  3. }  

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:


Similar Articles