Getting Started With Metro JavaScript
Written by Ian Elliot   
Wednesday, 11 April 2012
Article Index
Getting Started With Metro JavaScript
Hello World
Private Variables

 

The Immediate Function Pattern

The general form of an immediate function is:

(function(){
//...
})();

This defines a function as being the instructions between the curly brackets {} and then executes it immediately by ending it with the usual ().

In this particular case we have two event handling function defined where we are invited to put our startup code and a final call to a custom Application object's start method.

What is the point of doing things this way?

The first is that defining variables using:

var myVariable;

anywhere within the immediate function would make them local to the function.That is as soon as the outer function finishes the variables are destroyed.

This is the big advantage of this approach in that you don't pollute the global namespace but now the only namespace you have is local to the function. Suppose you really want to create a variable that is accessible after the immediate function has completed? At this point you might be thinking of creating a global variable.

In most JavaScript implementations if you forget to use the var in front of the declaration then the variable becomes global. This is fine but it is easy to leave off the var and hence create a global variable by accident.

To stop you making this error there is a

'use strict';

statement at the top of the file which tells the system to implement a set of strict syntax rules - one of which is that every variable has to be declared using var.

So unless you remove the use strict statement you can't actually define a global variable and removing the use strict isn't a good idea.

WinJS also solves the problem of the single local namespace by introducing some facilities to add global objects and properties to the global namespace. We will come back to exactly how this works in a later chapter but all you have to do is use the WinJS.NameSpace object's define method:

What really matters is that you realize that any variables you declare within the immediate function are not global and are destroyed before the main part of you JavaScript code ever gets to run. Of course there are exceptions to this rule. Any function or variable that you assign to a property of an existing global object will not vanish after the immediate function completes. This is how the event handlers manage to survive.

Isn't This Too Complicated?

Some JavaScript programmer look at the structure of a WinJS application and think that its unnecessarily complicated. In fact as all of the features and facilities introduced by WinJS are simply standard JavaScript you can ignore all of them and work as if you were building HTML and code in a browser.

In other words you don't have to use the structure provided by the Visual Studio if you don't want to. However, for the moment let's stick with it and I'm sure you will see that it makes good sense to structure your programs in this way.

Hello World

As an example of getting an app running let's place a button on the screen and hook up an event handler to change the button's text to the usual greeting when it is clicked.

This is a deliberately simple example. If you want something more complicated you can always take a look at the official documentation's example which, as always is more about impressing you with how powerful the system is rather than getting you started.

First we need a button and we might as well use an HTML5 button for the job - you can use HTML Input tag if you want in more or less the same way:

<body>
<button id="Button1">Click Me</button>
</body>

Put this code in place of the "Content Goes Here" line in the default.html file.

The JavaScript is also very simple:

// TODO: startup code here
document.addEventListener("click",MyClickHandler);

The MyClickHandler function can be defined in a number of places but there is no need for it to be global so it can be defined within the immediate function:

var MyClickHandler = function () {
var Button1=
document.getElementById("Button1");
Button1.textContent = "Hello World";
}

You have to work in the usual HTML/JavaScript way and use the getElementById method to return the DOM object corresponding to the button. Obviously if you are going to access the button a lot you probably should store the reference. There is also the small matter of making sure that the button has actually been created before this code runs but for an HTML object created by tabs there is no problem. Later we will have to be more careful.

If you run the code you will see the button appear and when you click it the message will replace the ClickMe caption.

 

button

 

Notice that the button's positioning follows the usual HTML layout rules - css float, tables etc.You can defined styles that are "local" to the application in the default.css file. The WinJS framework has its own style sheet which in the case of this project is ui-dark.css.

There are some additional layout controls but these are not HTML5 standard components but part of the WinJS extensions. They work well but if you use them your app isn't going to be portable to a standard web browser - but then your JavaScript is already non-standard.

Also notice the use of the addEventListener method to attach the event handler. This is the preferred way of doing the job in HTML5 and it is a mystery why the template uses the more traditional

WinJS.Application.onactivated =

style of setting an event handler. If possible always use addEventListener because it allows you to set multiple event handlers.

Notice that you do not have to set onClick in the button's tag which is something you will see in incorrect sample code. The addEventListener will add the handler to the object specified for the event specified - "click" in this case.

If you are not familiar with using addEventListener you might be puzzled as to why the handler is added to the document rather than the button?

The answer is that in this case it is easier and makes for a simpler example. The reason it works is that when the user clicks on the button the event bubbles up to containing objects until it finds a handler. In this case it bubbles all the way up to the document object before it is handled. Of course if there are more controls in the application you need to check the event parameters passed to the handler to find out which one generated the event.

Alternatively you can attach the event handler to the control you want it to respond to. For example the following works just as well and only responds to a button click:

// TODO: startup code here
var Button1= document.getElementById(
"Button1");
Button1.addEventListener("click",
MyClickHandler);


Last Updated ( Wednesday, 29 August 2012 )
 
 

   
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.