Reusable components

For our example we will build some beautiful buttons that look like this:

You should check out the demo before proceeding - glimpse at the code also. I have built the buttons both in JavaScript and in HTML. If you don't understand my JavaScript, then please check out AJS reference [my JavaScript library].

Using HTML

HTML isn't a programming language, it's a markup language. Because of this, the only way to reuse something is by the copy-paste method. This produces a lot of HTML and has following disadvantages:

• Your code becomes less readable
• When you want to change something about the button you must rewrite every button's HTML
• It consumes bandwidth

Check out ALL the HTML code it takes to create 2 almost identical buttons:

<table class="button" cellpadding="0" 
  onmouseover="btnMouseOver(this)" 
  onmouseout="btnMouseOut(this)"
  onclick="btnClick(this)"
  onmousedown="btnDown(this)"
  onmouseup="btnUp(this)">
  <tr>
    <td><img src="images/btn_bg_l_off.gif" alt="" class="left" /></td>
    <td class="middle">
      <img src="feed.gif" />RSS feed
    </td>
    <td><img src="images/btn_bg_r_off.gif" alt="" class="right" /></td>
  </tr>
</table>

<br />

<table class="button" cellpadding="0" 
  onmouseover="btnMouseOver(this)" 
  onmouseout="btnMouseOut(this)"
  onclick="btnClick(this)"
  onmousedown="btnDown(this)"
  onmouseup="btnUp(this)">
  <tr>
    <td><img src="images/btn_bg_l_off.gif" alt="" class="left" /></td>
    <td class="middle">
      <img src="comments.gif" />View comments
    </td>
    <td><img src="images/btn_bg_r_off.gif" alt="" class="right" /></td>
  </tr>
</table>

Using JavaScript

JavaScript is of course a real programming language - why not use it to create reusable components?
The same buttons can be created by following JavaScript code:

<script> 
  AJS.documentInsert(createButton('feed.gif', 'RSS feed'));
  AJS.documentInsert(AJS.BR());
  AJS.documentInsert(createButton('comments.gif', 'View comments'));
</script>

When you want to change the button you will only need to alter one place, namely in createButton function.

Advantages of this method:

• Less code means more readable code
• Less code means bandwidth benefits
• Rendering of the button is delegated to createButton function. This means that changes only need to be made one place, namely in createButton.

The only pitfall is that old browsers aren't supported and the rendering code is a bit more complicated, createButton function looks like this:

function createButton(image, text) {
  var img_l = AJS.IMG({src: 'images/btn_bg_l_off.gif', 'class': 'left'});
  var img_r = AJS.IMG({src: 'images/btn_bg_r_off.gif', 'class': 'right'});

  var table = AJS.TABLE({'class': 'button', cellpadding: 0});
  var tbody = AJS.TBODY();
  AJS.ACN(table, tbody);
  AJS.ACN(tbody, AJS.TR(
        AJS.TD(img_l),
        AJS.TD({'class': 'middle'}, AJS.IMG({src: image}), text),
        AJS.TD(img_r)));

  AJS.AEV(table, 'mouseover', function() { btnMouseOver(table) });
  AJS.AEV(table, 'mouseout', function() { btnMouseOut(table) });
  AJS.AEV(table, 'click', function() { btnClick(table) });
  AJS.AEV(table, 'mousedown', function() { btnDown(table) });
  AJS.AEV(table, 'mouseup', function() { btnUp(table) });
  return table;
}

The hack

Of course, this would not be possible without a hack ;) AJS has a nice function called AJS.documentInsert, it uses document.writeln to insert a DOM object. The method looks like this:

function documentInsert(element) {
  document.writeln('<span id="dummy_holder"></span>');
  AJS.swapDOM(AJS.$('dummy_holder'), element);
}

When to use this method

Most of the frameworks today have some kind of a template system. Using a template system gives you a lot of advantages - like ability to create a function similar to createButton. The problem by using a template system is that you get tied up to your template system.

By using JavaScript you basically are only tied up to JavaScript - - i.e. you create true reusable components. And that is the beauty of it!