Introduction
In this article, I will discuss how to work with JavaScript and HTML 5 in a Windows 8 Metro Application. Here we simply take a button and show the current data and time. So, we make this using the JavaScript and HTML 5, make an application in Metro UI in Windows 8.
We have to follow the steps given below.
Step 1:
First of all open VS2011 and create a new Windows Metro Style Application with the following steps.
- Select File > New Project. The New Project dialog box opens.
- In the Installed pane, select JavaScript template.
- Select the Windows Metro style template type.
- In the center pane, select Application.
- Enter a name for the project.
![javascripttemplate.gif]()
Step 2: In the Solution Explorer we have to see there are many files such as CSS and JavaScript files and choose here any file but we have to choose default.HTML.
![solutionexplorer.gif]()
Step 3: Open the default.html page and enter the following code. But we can also add any logic in HTML page.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MyAppliction</title>
<!-- WinJS references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/ui.js"></script>
<script src="/winjs/js/binding.js"></script>
<script src="/winjs/js/controls.js"></script>
<script src="/winjs/js/animations.js"></script>
<script src="/winjs/js/uicollections.js"></script>
<script src="/winjs/js/wwaapp.js"></script>
<script src="/winjs/js/res.js"></script>
<!-- MyAppliction references -->
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
<script type="text/javascript">
function ClickHere() {
document.getElementById("btnhello").value = Date();
}
</script>
</head>
<body>
<input type="button" style="color:#ffd800" value="Click Here" id="btnhello" onclick="ClickHere()" />
</body>
</html>
Step 4: In this step we have to configure the package.appxmanifest"; see in the Solution Explorer and choose file.
![package.gif]()
Step 5: After configuring, build the application and run this application. It is shown in the emulator given below.
![output1.gif]()
Click on the button and see the result given below.
![output2.gif]()
In the Windows 8, the Metro Style Application will be deployed in this form shown as below.
![showinmyapp.gif]()