In this article you will learn how to create your first Windows metro application (WInJS) apps using HTML/JS/CSS.
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: