Online Book Reader

Home Category

Choose a category
All
Classic-Fiction

AJAX In Action [68]

By Root 4159 0

If we rewrite our DIV tag as

and define an event handler like this

function importFeedData(event){

importData("datafeed3.xml", mytextbox.value);

}

then the arguments are encapsulated within the importFeedData() function, rather than an anonymous event handler. This allows us to reuse that functionality elsewhere, keeping the concerns separate and the code DRY (at the risk of repeating myself, DRY means “don’t repeat yourself ”).

The Controller is still embedded in the HTML, however, which might make it hard to find in a large application.

To keep the Controller and the View separate, we can attach the event programmatically. Rather than declare an event handler inline, we can specify a marker of some sort that will later be picked up by the code. We have several options for this marker. We can attach a unique ID to the element and specify event handlers on a per-element basis. The HTML would be rewritten as

and the following code executed as part of the window.onload callback, for example: var dfBtn=document.getElementById('dataFeedBtn');

dfBtn.onclick=importFeedData;

If we want to perform the same action on multiple event handlers, we need to apply a non-unique marker of some sort. One simple approach is to define an extra CSS class.

Adding events indirectly using CSS

Let’s look at a simple example, in which we bind mouse events to keys on a virtual musical keyboard. In listing 4.1, we define a simple page containing an unstyled document structure.

Licensed to jonathan zheng

126

CHAPTER 4

The page as an application

Listing 4.1 musical.html

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

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

Keyboard

b Keys on our

"keyboard"

We declare the page to conform to XHTML strict definition, just to show that it can be done. The keyboard element is assigned a unique ID, but the keys are not. Note that the keys designated b are each defined as having two styles. musicalButton is common to all keys, and a separate style differentiates them by note. These styles are defined separately in the stylesheet (listing 4.2). Listing 4.2 musical.css

.body{

background-color: white;

}

.musicalKeys{

background-color: #ffe0d0;

border: solid maroon 2px;

width: 536px;

height: 68px;

top: 24px;

left: 24px;

Licensed to jonathan zheng

The View in an Ajax application

127

margin: 4px;

position: absolute;

overflow: auto;

}

.musicalButton{

border: solid navy 1px;

width: 60px;

height: 60px;

position: relative;

margin: 2px;

float: left;

}

.do{ background-color: red; }

.re{ background-color: orange; }

.mi{ background-color: yellow; }

.fa{ background-color: green; }

.so{ background-color: blue; }

.la{ background-color: indigo; }

.ti{ background-color: violet; }

div.console{

font-family: arial, helvetica;

font-size: 16px;

color: navy;

background-color: white;

border: solid navy 2px;

width: 536px;

height: 320px;

top: 106px;