Windows 8, the very beginning.
It was yesterday when I tweeted about my thought of beginning to write posts on Windows 8. Well, ah! Nobody favorited it, nobody retweeted it, even nobody replied to it. But the good thing is, I am going to do it it anyway. Windows 8, the platform of awesomeness. Released by Microsoft for common people around this past October. Yes you guessed it right, I don't come under the category of common people. I was working on Windows 8 even before it was released.
Instead of talking about me, which will never end, let's get our hand dirty in rather coding for Windows Store applications.
Making Windows 8 Store Applications
There are many ways to create a Windows Store application, in fact there are many different languages that can be used to code them too. Some of them are:
- The age old C++.
- The rather cool C#.
- The very awesome JavaScript.
We, as far as these articles are concerned, will prefer to use JavaScript, actually WinJS to be specific. WinJS incorporates the Windows library for JavaScript that provides a set of new controls designed for Windows Store applications, that enhances the power of rather powerful JavaScript in enormous ways. We will see this beauty, the elegance of JavaScript in the line of upcoming posts. For this article now, let us create a very simple Hello World application, and wrap it up.
To begin, you need to create a JavaScript project; choose Windows Store and choose the "Blank App" template.
![Windows8-Store-Apps.jpg]()
Once you are done, let Visual Studio prepare the project quickly. Once it is done being prepared, you will be left with a file called "default.js" alone! Not to worry. Next, go right to the Solution Explorer and choose to open "default.html". And yes, this is a view of your application. You need to write HTML to create the UI of the application. If you hate HTML, then please do follow the future articles, I bet that in the end, you'll come out loving it more than ever.
![Windows-store-apps.jpg]()
Meanwhile your default.html must be opened. The content of which must resemble this below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HelloWorld</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<!-- HelloWorld references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<p>Content goes here</p>
</body>
</html>
In the paragraph tag <p> remove the inner text and give it an id like this:
<body>
<p id="UIText"></p>
</body>
We ain't doing it simply by placing "hello world!!!" in the <p> tag. That would serve our purpose, but we are going to use JavaScript to display it instead.
Next you need to go to the "default.js" file that is the associated JavaScript file with the "default.html" that will look like this:
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(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());
}
};
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().
};
app.start();
})();
Don't get confused by all the stuff. There are many more comments than code. Have a look at line #15, what do you see? This part of the code will execute when the application is newly launched, and believe me that's all we need to spread our charm. Just place the following code there, and see the magic happen:
UIText.innerText = "Hello World!!!";
Which will make our JavaScript look like:
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(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.
UIText.innerText = "Hello World!!!";
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
}
};
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().
};
app.start();
})();
What we have done there is, instead of placing the text right away in the paragraph tag (<p>), we did the same using JavaScript by accessing the element by its id, and written our text in its innerText. Just hit F5 as usual, your app will run and will greet you with "hello world".