It was yesterday, when I tweeted about my thought of start writing posts on windows 8. Well, ah! nobody favorited it, nobody retweeted it, even nobody replied to it 
Windows 8, 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 8 application.
Making Windows 8 Store Applications
There are a lot of ways in which you can create a windows store application, in fact there are all different languages in which you can code them too. Some of them are mentioned below:
1. The age old C++.
2. The rather cool C#.
3. The very awesome JavaScript.
We, as far as these post are concerned will rather do our job in JavaScript, actually WinJS to be specific. WinJS incorporates windows library for Javascript which provides a set of new controls designed for windows store applications, which 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 post 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 opt the Blank App template.
Once you are done, let visual studio prepare the project for in quicky. Once it is done preparing you will be left with a file called default.js alone! Not to worry. Next, go right to the solution explore and choose open default.html. And yes, this is 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 upcoming posts, I bet at the end of all, you’ll come out loving it than ever.
Meanwhile your default.html must be opened.the content of which must resemble this below:
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8" />
5: <title>HelloWorld</title>
6: 7: <!-- WinJS references -->
8: <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
9: <!-- HelloWorld references -->
10: <link href="/css/default.css" rel="stylesheet" />
11: <script src="/js/default.js"></script>
12: </head>
13: <body>
14: <p>Content goes here</p>
15: </body>
16: </html>
In the paragraph tag <p> remove the inner text and give it an id like this:
1: <body>
2: <p id="UIText"></p>
3: </body>
We ain’t doing it simple by just placing “hello world!!!” in the <p> tag. That would served our purpose, but we are going to use JavaScript to display it instead.
Next you need to go to default.js file which is the associated Javascript file with the default.html which will look like this:
1: // For an introduction to the Blank template, see the following documentation:
2: // http://go.microsoft.com/fwlink/?LinkId=232509
3: (function () {
4: "use strict";
5: 6: WinJS.Binding.optimizeBindingReferences = true;
7: 8: var app = WinJS.Application;
9: var activation = Windows.ApplicationModel.Activation;
10: 11: app.onactivated = function (args) {
12: if (args.detail.kind === activation.ActivationKind.launch) {
13: if (args.detail.previousExecutionState !==
14: activation.ApplicationExecutionState.terminated) {15: // TODO: This application has been newly launched. Initialize
16: // your application here.
17: } else {
18: // TODO: This application has been reactivated from suspension.
19: // Restore application state here.
20: } 21: args.setPromise(WinJS.UI.processAll()); 22: } 23: }; 24: 25: app.oncheckpoint = function (args) {
26: // TODO: This application is about to be suspended. Save any state
27: // that needs to persist across suspensions here. You might use the
28: // WinJS.Application.sessionState object, which is automatically
29: // saved and restored across suspension. If you need to complete an
30: // asynchronous operation before your application is suspended, call
31: // args.setPromise().
32: }; 33: 34: app.start(); 35: })();Don’t get confused by the crap. There are lot of 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:
1: UIText.innerText = "Hello World!!!";
Which will make our JavaScript looks like:
1: // For an introduction to the Blank template, see the following documentation:
2: // http://go.microsoft.com/fwlink/?LinkId=232509
3: (function () {
4: "use strict";
5: 6: WinJS.Binding.optimizeBindingReferences = true;
7: 8: var app = WinJS.Application;
9: var activation = Windows.ApplicationModel.Activation;
10: 11: app.onactivated = function (args) {
12: if (args.detail.kind === activation.ActivationKind.launch) {
13: if (args.detail.previousExecutionState !==
14: activation.ApplicationExecutionState.terminated) {15: // TODO: This application has been newly launched. Initialize
16: // your application here.
17: UIText.innerText = "Hello World!!!";
18: } else {
19: // TODO: This application has been reactivated from suspension.
20: // Restore application state here.
21: } 22: args.setPromise(WinJS.UI.processAll()); 23: } 24: }; 25: 26: app.oncheckpoint = function (args) {
27: // TODO: This application is about to be suspended. Save any state
28: // that needs to persist across suspensions here. You might use the
29: // WinJS.Application.sessionState object, which is automatically
30: // saved and restored across suspension. If you need to complete an
31: // asynchronous operation before your application is suspended, call
32: // args.setPromise().
33: }; 34: 35: app.start(); 36: })();What we have done there is, instead of placing the text right away in the paragraph tag (<p>), we done the same through javascript by accessing the element via its id, and write our text in its innerText. Just hit f5 as usual, your app will run and will greet you with “hello world”.
Follow me on twitter https://twitter.com/Neelesh___ learn, and spread the learning.
More to come, stay tuned. Happy Reading!!!
Posts
0 comments