Skip to main content

Good Behaviour

Posted 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 init.js: (behaviour.js is the library file.)

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 '#submit' string selects the submit button by ID and wires up its onclick event.

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