• Choose a category
• All
• Classic-Fiction

key.note=note;

key.onmouseover=playNote;

}

}

};

Behaviour.register(myrules);

Most of the logic is the same as in our previous example, but the use of CSS selectors offers a concise alternative to programmatically locating DOM elements, particularly if we’re adding several behaviors at once. That keeps the logic out of the view for us, but it’s also possible to tangle the View up in the logic, as we will see.

4.2.2 Keeping the View out of the logic

We’ve reached the point now where the designers can develop the look of the page without having to touch the code. However, as it stands, some of the functionality of the application is still embedded in the HTML, namely, the ordering of the keys. Each key is defined as a separate DIV tag, and the designers could unwittingly delete some of them.

If the ordering of the keys is a business domain function rather than a design issue—and we can argue that it is—then it makes sense to generate some of the DOM for the component programmatically, rather than declare it in the HTML. Further, we may want to have multiple components of the same type on a page. If we don’t want the designer to modify the order of the keys on our keyboard, for example, we could simply stipulate that they assign a DIV tag with the class keyboard and have our initialization code find it and add the keys programmatically. Listing 4.4 shows the modified JavaScript required to do this.

Listing 4.4 musical_dyn_keys.js

var notes=new Array("do","re","mi","fa","so","la","ti","do"); function assignKeys(){

var candidates=document.getElementsByTagName("div");

if (candidates){

for(var i=0;ivar candidate=candidates[i];

if (candidate.className.indexOf('musicalKeys')>=0){

makeKeyboard(candidate);

Licensed to jonathan zheng

The View in an Ajax application

131

}

}

}

}

function makeKeyboard(el){

for(var i=0;ivar key=document.createElement("div");

key.className=notes[i]+" musicalButton";

key.note=notes[i];

key.onmouseover=playNote;

el.appendChild(key);

}

}

function playNote(event){

var note=this.note;

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

if (note && console){

console.innerHTML+=note+" . ";

}

}

Previously, we had defined our key sequence in the HTML. Now it is defined as a global JavaScript array. The assignKeys() method examines all the top-level DIV tags in the document, to see if the className contains the value musicalKeys. If it does, then it tries to populate that DIV with a working keyboard, using the makeKeyboard() function. makeKeyboard() simply creates new DOM nodes and then manipulates them in the same way as listing 4.4 did for the declared DOM nodes that it encountered. The playNote() callback handler operates exactly as before.

Because we are populating empty DIVs with our keyboard controls, adding a second set of keys is simple, as listing 4.5 illustrates.

Listing 4.5 musical_dyn_keys.html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

href='musical_dyn_keys.css'/>

Adding a second keyboard is a single-line operation. Because we don’t want them sitting one on top of the other, we move the placement styling out of the musicalKeys style class and into separate classes. The stylesheet modifications are shown in listing 4.6.

Listing 4.6 Changes to musical_dyn_keys.css

.musicalKeys{

Common keyboard styling

background-color: #ffe0d0;

border: solid maroon 2px;

position: absolute;

overflow: auto;

margin: 4px;

}

.toplong{