Creating First Windows Store App using JavaScript and HTML in Visual Studio 2012

Microsoft’s new windows operating system revealed previous year – Windows 8 supports different environment of application. These applications are developed in an updated platform of Visual Studio. Visual Studio 2012 supports different developing tools or platforms like, C#, C++, XAML, JavaScript, F#, Visual Basic. So, here in this tutorial we will be developing starting Windows 8 apps for Windows Store using JavaScript and HTML.

In here, we will be discussing how to start app development for Windows 8 using Visual Studio 2012. I have installed Visual Studio Premium 2012 in my laptop; I hope the versions won’t make many changes with properties and options.

Before you start

Start Building First Windows 8 App

Step 1 – Open Microsoft Visual Studio 2012

Step 2 – Create File ->  New Project

Step 3 – In the left pane, expand Installed, then expand Templates, then expand JavaScript and select the Windows Store template type. The dialog’s center pane displays a list of project templates for JavaScript.

Create Windows Store apps using JavaScript and HTML on Visual Studio 2012

Create Windows Store apps using JavaScript and HTML on Visual Studio 2012

For this tutorial, we use the Blank App template. This template creates a minimal Windows Store app that compiles and runs, but contains no user interface controls or data. We’ll add controls and data to the app over the course of these tutorials.

Step 4 – In the center pane, select the Blank App template.

Step 5 – In the Name text box, enter “HelloCStudents“.

Step 6 – Uncheck the Create directory for solution checkbox.

Step 7 – Click OK to create the project.

Visual Studio creates your project and displays it in the Solution Explorer.

Launching the Windows 8 App

You have created a simple app just now. Why not to launch the app for first time? Press F5 to to build, deploy, and start your app. A default splash screen appears first. The splash screen is defined by an image (splashscreen.png) and a background color (specified in our app’s manifest file).

Windows 8 Apps development with Visual Studio 2012

It doesn’t do much—yet—but congratulations, you’ve built your first Windows Store app!

There’s no such button to close the app directly. To close the app there’s a shortcut, slide from the top edge toward the bottom edge of the screen or press Alt-F4. You will also find your app on the Start screen now. So, to reopen the app you can click on the tile on Start Screen or Press F5 on Visual Studio.

To stop debugging the app, press Alt+Tab to return to Microsoft Visual Studio. In Visual Studio, click Debug > Stop debugging to close the app. You can’t edit in Visual Studio while you’re debugging.

Modifying Content in Windows 8 Apps

The file that appears at first screen is ‘default.html’ so you need to edit the file so as to change the content in Windows 8 Apps. Modifying content would be easier as Visual Studio 2012 on JavaScript app supports HTML and HTML5 codes. So, you must have understood by now. All you need to do is replace the existing HTML codes with your new HTML codes.

To Modify Content

Step 1 – Change the content by replacing the codes in body section on file named ‘default.html’. Create headings says, “The Computer Students Windows 8 App Tutorial”  or some text that asks the user’s name, an input element to accept the user’s name, a button, and a div element. Assign IDs to the input, the button, and the div.

<body>

<h2>The Computer Student's Windows 8 Apps Tutorial</h2>

<h3>HelloCStudents</h3>

<p>What's your name?</p>

<input id="nameInput" type="text" />

<button id="helloButton">Say "Hello"</button>

<div id="greetingOutput"></div>

</body>

 

Step 2 – Run the App

Building first Windows 8 apps with JavaScript

Now, in modified app, you will see a input text box to write name, and also a button captioned Say, Hello!, yet we have not created an event handler for the button there, now to create an event handler some codes are to be done with JavaScript.

Creating an Event handler

Events are handler with JavaScript codes, so by default there’s a file named ‘default.js’ inside ‘js/default.js’. So, all you need to do is edit the codes inside the file.

Step 1 – Open the default.js file.

Step 2 – Replace the existing code with

(function () {

"use strict";

WinJS.Binding.optimizeBindingReferences = true;

var app = WinJS.Application;

var activation = Windows.ApplicationModel.Activation;

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());

// Retrieve the button and register our event handler.

var helloButton = document.getElementById("helloButton");

helloButton.addEventListener("click", buttonClickHandler, 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 buttonClickHandler(eventInfo) {

var userName = document.getElementById("nameInput").value;

var greetingString = "Hello, Computer Student " + userName + "!";

document.getElementById("greetingOutput").innerText = greetingString;

}

app.start();

})();

Step 3: Run your App now to see what event you have just created.

Event Handling in Windows 8 Apps with JavaScript

Style our start page

It’s easy to customize the look and feel of your app. Windows Store apps let you use Cascading Style Sheets, Level 3 (CSS3), much like you would for a website.

The default.html that Visual Studio created for us contains a reference to the Windows Library for JavaScript style sheet:

To switch to the light style sheet

In your default.html file, replace the reference to the dark style sheet with light style sheet by replacing ui-dark.css by ui-light.css

<!-- WinJS references -->

<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />

What does that change?

Building First Windows 8 apps with JavaScript

What further you want to do with your app is up-to you now, I know you won’t stop only at this. Leave your comment about the app you have developed with Windows 8.


You can follow us on Twitter, add us to your circle on Google+ or like our Facebook page . We will be providing you with best online tutorial on Programming, Database, Data Structures, Engineering, Case Studies and Computer Fundamentals.

Creating First Windows Store App using JavaScript and HTML in Visual Studio 2012 was last modified: September 6th, 2014 by Luzan Baral

Trackbacks/Pingbacks

  1. How to fix error 0x80073cf9 when install store apps in Windows 8 - [...] you can try again by installing new Windows Store Apps from Store on Start Screen, and if every steps …
  2. C++ Program on Temperature Conversion 'Celsius to Kelvin to Fahrenheit' - [...] program will let you convert temperature from one unit to other unit. The first program will convert Celsius to …
  3. How to Download and Get Started with Android Studio - [...] start building a new app, click New Project.This starts the New Project wizard, which helps you set up a project …
  4. How to download Microsoft Visual Studio Professional 2013 for Free - […] .NET apps, writing blazing fast code with C++ AMP, or testing and debugging a cloud-connected HTML/JavaScript app that runs …
  5. How to add Charm bar Settings (Privacy, About) in Windows Store App - […] See: Creating First Windows Store App using JavaScript and HTML in Visual Studio 2012 […]

Leave a Reply

%d bloggers like this: