In this article we will explore Metro Style Application by performing a simple arithmetic operation using Windows Metro using HTML, CSS and JavaScript
Introduction
As MSDN says "Metro style apps are full screen apps tailored to your users' needs, tailored to the device they run on, tailored for touch interaction, and tailored to the Windows user interface. Windows helps you interact with your users, and your users interact with your app."
A Metro style app is an app built using HTML, CSS and JavaScript or XAML with (C#/VB/C++ no F# till date), on Microsoft's new APIs.It is a kind of application widget.It is cross-platform compatible (Windows 8 will support ARM with metro apps) and that standard x86 apps built the "old way" will still continue to work, but are not considered metro apps, nor are they cross-platform compatible.
Metro apps also make use of the cloud more than ever for data storage, and are required to stay open (user should not quit a metro app) unless rebooted.
Saying it in another way, Metro in itself is just a new API with UI design and uses XAML, HTML5, JavaScript , C# etc. as it's language to give it a shape.
Metro style application redesigns
- The Windows User Interface (more focus on clean typography and less on UI chrome)
- Have a full screen UI
- Introduced Flat colored "Live Tiles" (update user about the application and draw them into application)
- Touch-centric style
- Designed for multitasking(Snapped view, Filled view)can be packaged up and distributed via the "Windows Application store"
- Can be deployed in multiple locals and languages.
N.B.~On August 3rd, 2012, the "Metro" codename was dropped in favor of the term "Windows 8 Style UI". While "Metro" was said to be a code name, several reports suggest the name was dropped to avoid a potential trademark dispute. No new marketing terminology has been announced to represent the "Windows 8 Style UI" interface. (Obtained from Stackoverflow)
In this series of article, we will get ourself acquintained with the new Metro style of programming.So to start with we will make a simple calculator in the Metro style.
What we need to have for this experiment?
- Visual Studio 2012 Untimate RC
- Windows 8
- A Hotmail Account (we will come to know shortly)
So let us start our journey
Step 1:
Fire up VS 2012 Ultimate 2012 RC. Click File ->New ->Project.From the available templates, choose "JavaScript" -> Blank App.Enter a suitable application name (say "SimpleArithmeticOperation") with a proper location and click on "OK" button
Step 2:
For developing any kind of Metro style Apps for Windows 8, we need to get a developer license.Click on "I agree" button.
At this point of time we need to specify our hotmail account credentials.Once validated, it will display a message stating about the next date when we need to renew our credentials
And we will be welcomed with the below project structure
Step 3:
Open the "default.html" file and change the body design as under
<body>
<table>
<!-- For Input -->
<tr>
<table border="1">
<tr>
<td>Enter First Value:</td>
<td>
<input id="textValue1" type="text" /></td>
</tr>
<tr>
<td>Enter Second Value:</td>
<td>
<input id="textValue2" type="text" /></td>
</tr>
<tr>
<td>Result:</td>
<td>
<input id="txtResult" type="text" /></td>
</tr>
</table>
</tr>
<!-- For Operations -->
<tr>
<td>
<button id="btnAdd">Add</button>
<button id="btnSubtract">Subtract</button>
<button id="btnMultiply">Multiply</button>
<button id="btnDivide">Divide</button>
</td>
</tr>
</table>
</body>
Step 4:
Now open the "default.js" file which will be under the "js" folder.
Write the below code inside the "onactivated" event when the activation is of type launch
//add event listeners for the controls
document.getElementById("btnAdd").addEventListener("click", DoCalculation, false);
document.getElementById("btnSubtract").addEventListener("click", DoCalculation, false);
document.getElementById("btnMultiply").addEventListener("click", DoCalculation, false);
document.getElementById("btnDivide").addEventListener("click", DoCalculation, false);
Here we are using JQuery's "addEventListener" method for adding an event to the button(s).
Next declare a function by the name "DoCalculation" and write the below piece of code
function DoCalculation(event)
{
//get the operators i.e. button text
var operator = event.srcElement.innerText;
//placeholders
var firstInputValue = document.getElementById('textValue1').value;
var secondInputValue = document.getElementById('textValue2').value;
//result variable
var result = 0;
switch (operator) //operator are the button texts i.e.Add,Subtract,Multiply,Divide
{
case "Add": result = parseInt(firstInputValue) + parseInt(secondInputValue); break;
case "Subtract": result = firstInputValue - secondInputValue; break;
case "Multiply": result = firstInputValue * secondInputValue; break;
case "Divide": result = firstInputValue / secondInputValue; break;
}
//display the result
document.getElementById("txtResult").value = result;
}
The code is simple to understand.We are first capturing the button text to keep track of the fact as from which button has been triggered and then depending on the operation type, we are performing the operations.Fially we are displaying the values.
The complete code is
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
WinJS.strictProcessing();
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
//add event listeners for the controls
document.getElementById("btnAdd").addEventListener("click", DoCalculation, false);
document.getElementById("btnSubtract").addEventListener("click", DoCalculation, false);
document.getElementById("btnMultiply").addEventListener("click", DoCalculation, false);
document.getElementById("btnDivide").addEventListener("click", DoCalculation, false);
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
function DoCalculation(event) {
//get the operators i.e. button text
var operator = event.srcElement.innerText;
//placeholders
var firstInputValue = document.getElementById('textValue1').value;
var secondInputValue = document.getElementById('textValue2').value;
//result variable
var result = 0;
switch (operator) //operator are the button texts i.e.Add,Subtract,Multiply,Divide
{
case "Add": result = parseInt(firstInputValue) + parseInt(secondInputValue); break;
case "Subtract": result = firstInputValue - secondInputValue; break;
case "Multiply": result = firstInputValue * secondInputValue; break;
case "Divide": result = firstInputValue / secondInputValue; break;
}
//display the result
document.getElementById("txtResult").value = result;
}
app.start();
})();
Step 5:
So now the development part is over.Next we need to run it.Choose "Local Machine"
and run the application
Step 6:
That's cool.But we also want our application to appear in the "Search" charm.For that reason, open the "package.appxmanifest" file.Go to the "Declarations" tab.From the "Available Declarations" dropdown, choose "Search" option. Lastly click on the "Add" button.
Step 7:
Again run the application in the "Local Machine" mode.
Press "Windows" + F to bring the "Search" charm.We will find that our application is listed there.
References
- Previewing "Windows 8"
- Index of UX guidelines for Windows Store apps (Windows)
- .NET for Windows Store apps overview
- Windows Store app samples
- Getting started with Windows Store apps (Windows)
- Metro(design language)
- What's a Windows Store app? (Windows)
- Developing in HTML5 with JavaScript and CSS3 Jump Start
- Coding basic apps (Windows)
- Channel 9
Conclusion
Metro style application for Windows 8 is seriously cool and it is huge.This is just the starting point of the learning process.We will explore more soon and I will keep on updating about my learning on the same.Hope you like this article.Thanks for reading.Zipped file is attched with the article.