 |
Search |
 |
|
|
Good BehaviourPosted by tomwhite on July 19, 2005 at 2:00 PM PDT
One of the things that writing Object Oriented systems encourages you to consider is: what is the responsibility of each class in the system? For example, the Model-View-Controller pattern separates responsibility for the user model, the user interface, and the control logic into three classes. So far, so old hat. Well, perhaps not in the world of Web Development. While AJAX sets the world alight, there is a related re-awakening in JavaScript's relation to (X)HTML and CSS.
It may seem obvious that HTML is the model, CSS the view, and JavaScript the controller, but how many times have you seen this kind of mess?
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Behaviour demo</title>
</head>
<body onload="document.getElementById('textbox').focus(); return false;">
<form id="form" action="results.html" method="get">
<p>
<input type="text" id="textbox" name="query" />
<input type="submit" id="submit" value="Go"
onclick="this.value='Searching...'; document.getElementById('form').submit();" />
</p>
</form>
</body>
</html>
While we're all carefully making sure the server-side stuff is all Model 2 compliant, we're churning out
tangled up code at the web layer. Those onload and onclick attributes
really stick out. It feels wrong, but we haven't been sure how to fix it.
But now, a slew of articles and blogs are defining a new set of best practices, overturning old assumptions such as JavaScript necessarily hinders accessibility. From a practical point of view, Ben Nolan's Behaviour may be all you need. It allows you to inject unobtrusive JavaScript behaviour to inert HTML. For instance, the previous JavaScript is taken out of the HTML...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Behaviour demo</title>
<script type="text/javascript" src="behaviour.js"></script>
<script type="text/javascript" src="init.js"></script>
</head>
<body>
<form id="form" action="results.html" method="get">
<p>
<input type="text" id="textbox" name="query" />
<input type="submit" id="submit" value="Go" />
</p>
</form>
</body>
</html>
... and applied independently using CSS selectors in
Behaviour.addLoadEvent (
function() {
document.getElementById('textbox').focus();
}
);
var rules = {
'#submit' : function(element) {
element.onclick = function() {
this.value='Searching...';
document.getElementById('form').submit();
}
}
};
Behaviour.register(rules);
The There's way more to explore on the aforementioned sites, but I'm already beginning to feel like a better web citizen. Let's hope it finds its way into some of the Java AJAX kits, such as the Java BluePrints Solutions Catalog. »
Related Topics >>
Open Source Comments
Comments are listed in date ascending order (oldest first)
|
|
|
||
|
