• Choose a category
• All
• Classic-Fiction

Binding the event-handler code

The JavaScript file (listing 4.3) binds the events to these keys programmatically. Listing 4.3 musical.js

function assignKeys(){

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

Find parent DIV

Licensed to jonathan zheng

128

CHAPTER 4

The page as an application

var keys=keyboard.getElementsByTagName("div");

Enumerate children

if (keys){

for(var i=0;ivar key=keys[i];

var classes=(key.className).split(" ");

if (classes && classes.length>=2

&& classes[1]=="musicalButton"){

var note=classes[0];

key.note=note;

Add custom attribute

key.onmouseover=playNote;

}

}

}

}

function playNote(event){

var note=this.note;

Retrieve custom attribute

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

if (note && console){

console.innerHTML+=note+" . ";

}

}

The assignKeys() function is called by window.onload. (We could have defined window.onload directly in this file, but that limits its portability). We find the keyboard element by its unique ID and then use getElementsByTagName() to iterate through all the DIV elements inside it. This requires some knowledge of the page structure, but it allows the designer the freedom to move the keyboard DIV

around the page in any way that she wants.

The DOM elements representing the keys return a single string as className property. We use the inbuilt String.split function to convert it into an array, and check that the element is of class musicalButton. We then read the other part of the styling—which represents the note that this key plays—and attach it to the DOM node as an extra property, where it can be picked up again in the event handler.

Playing music through a web browser is rather tricky, so in this case, we simply write the note out to the “console” underneath the keyboard. innerHTML is adequate for this purpose. Figure 4.4 shows our musical keyboard in action. We’ve achieved good separation of roles here. Provided the designer drops the keyboard and console DIV tags somewhere on the page and includes the stylesheet and JavaScript, the application will work, and the risk of accidentally breaking the event logic is small. Effectively, the HTML page has become a template into which we inject variables and logic. This provides us with a good way of keeping Licensed to jonathan zheng

The View in an Ajax application

129

Figure 4.4 Musical keyboard application running in a browser. The

colored areas along the top are mapped to music notes, which are printed out in the lower console area when the mouse moves over them.

logic out of the View. We’ve worked through this example manually, to demonstrate the details of how it’s done. In production, you might like to make use of a couple of third-party libraries that address the same issue.

The Rico framework (www.openrico.org/) has a concept of Behavior objects that target specific sections of a DOM tree and add interactivity to them. We looked at the Rico Accordion behavior briefly in section 3.5.2.

A similar separation between HTML markup and interactivity can be achieved with Ben Nolan’s Behaviour library (see the Resources section at end of chapter). This library allows event-handler code to be assigned to DOM elements based on CSS selector rules (see chapter 2). In our previous example, the assignKeys() function programmatically selects the document element with the id keyboard, and then gets all DIV elements directly contained by it, using DOM manipulation methods. We can express this using a CSS selector as

#keyboard div

Using CSS, we could style all our keyboard elements using this selector. Using the Behaviour.js library, we can also apply event handlers in the same way as follows: Licensed to jonathan zheng

130

CHAPTER 4

The page as an application

var myrules={

'#keyboard div' : function(key){

var classes=(key.className).split(" ");

if (classes && classes.length>=2

&& classes[1]=='musicalButton'){

var note=classes[0];