Getting Started With WinRT JavaScript

Written by Mike James

Wednesday, 04 January 2012

Article Index
Getting Started With WinRT JavaScript
Hello World

Page 2 of 2

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.

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

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

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.

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

Notice that the button's positioning follows the usual HTML layout rules - css float, tables etc. 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.

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.onmainwindowactivated =

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

What is different?

Using the above approach you can simply code your JavaScript app as if it was hosted by a web page.

Some things won't work, however. For example, you can't use alert() to pop up an alert box because Metro apps are full screen single windowed. There are alternatives but these are specific to WinJS.

If you want to take advantage of the extra features then there are a number of things that you have to master. In particular, you need to know about the WinJS controls that are provided and how to work with them using databinding.

You also need to be aware of the application's life cycle and how to use the promise object to work asynchronously. Finally you need to master both tile and toast notifications.

All of these topics will be covered in later articles.

Also look out for our forthcoming WinJS project.

Articles on WinRT JavaScript

Comments

or email your comment to: comments@i-programmer.info

To be informed about new articles on I Programmer, subscribe to the RSS feed, follow us on Google+, Twitter, Linkedin or Facebook or sign up for our weekly newsletter.

<< Prev - Next

Last Updated ( Wednesday, 18 January 2012 )