Test your technical skills online, appear in Virtual Interview and be ready for job!
Twitter Twitter LinkedIn YouTube Google
Be Interview ready ! | Search
Make friends on DotNetFunda.com and expand your network!
Winners

Win Prizes

Announcements
Like us on Facebook
Sponsor
Top Articles Author
Wed, 16-Apr-2014 Authors
All Time Authors
Sourav.Kayal
39750
SheoNarayan
34800
Niladri.biswas
33350

Latest members | More ...


(Statistics delayed by 5 minutes)
Ads

Perform a simple arithmetic operation using Windows Metro using HTML, CSS and JavaScript - Step by Step - DAY 1

Niladri.Biswas
Posted by under Windows Metro category on for Beginner level | Points: 250 | Views : 2222 red flag
If you found plagiarised (copied) or inappropriate content,
please let us know the original source along with your correct email id (to communicate) for further action.

In this article we will explore Metro Style Application by performing a simple arithmetic operation using Windows Metro using HTML, CSS and JavaScript

 Download source code for Perform a simple arithmetic operation using Windows Metro using HTML, CSS and JavaScript - Step by Step - DAY 1


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

  1. The Windows User Interface (more focus on clean typography and less on UI chrome)
  2. Have a full screen UI
  3. Introduced Flat colored "Live Tiles" (update user about the application and draw them into application)
  4. Touch-centric style
  5. Designed for multitasking(Snapped view, Filled view)can be packaged up and distributed via the "Windows Application store"
  6. 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?

  1. Visual Studio 2012 Untimate RC
  2. Windows 8
  3. 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

  1. Previewing "Windows 8"
  2. Index of UX guidelines for Windows Store apps (Windows)
  3. .NET for Windows Store apps overview
  4. Windows Store app samples
  5. Getting started with Windows Store apps (Windows)
  6. Metro(design language)
  7. What's a Windows Store app? (Windows)
  8. Developing in HTML5 with JavaScript and CSS3 Jump Start
  9. Coding basic apps (Windows)
  10. 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.

Page copy protected against web site content infringement by Copyscape
Found interesting? Add this to:




About the Author

Niladri.Biswas

Full Name: Niladri Biswas
Member Level: Platinum
Member Status: Member
Member Since: 10/25/2010 11:04:24 AM
Country: India
Best Regards, Niladri Biswas
http://www.dotnetfunda.com

Technical Lead at HCL Technologies Ltd.
Login to vote for this post.

Comments or Responses


Login to post response.

Comments / Responses
Select text & click toolbar to format. Formatting appears in viewmode only. HTML Tags are not allowed.
Bold Italic Underline Paragraph Title Code  Link 
 Wait ... Processing ..... please wait.

Comment using Facebook