Internet Explorer DOMDocument & XPath

I discovered a couple of interesting things about Internet Explorer’s MSXML2.DOMDocument object. It turns out that there are essentially two “production-quality” versions of it available: 3.0 and 6.0. Version 6.0 is much the better version, but it’s quite new, and not available on all systems. This means that in IE7 and IE8, instantiating a new MSXML2.DOMDocument object gives you version 3.0.

Now most of the time, this isn’t a problem. Today, though, I was constructing an XPath expression that used the substring() function; something like this:

//Element[substring(Child, 1, 3)='abc']

This will pull all Elements with a Child element whose value’s first three characters are “abc”. Not particularly complex. It turns out, though, that version 3.0 or the DOMDocument doesn’t actually use XPath as its default language: it uses a bastardised version of XPath called “XSLPatterns”, which just so happens to not support the substring() function at all.

So how do we deal with this situation? One way is to always instantiate version 6.0 of the DOMDocument:

xd = new ActiveXObject('msxml2.DOMDocument.6.0')

The problem with this approach is that, like I mentioned earlier, you can’t always be guaranteed that your users will have version 6.0 installed (even though it’s a free download). The safer way to deal with this problem is to switch the expression language to XPath in your 3.0 object:

xd = new ActiveXObject('msxml2.DOMDocument');
xd.setProperty("SelectionLanguage", "XPath");

The advantage of this approach is that you’re not specifying a version, so when MS eventually changes the default to 7.0 (or whatever), your code will work without a problem.

For more information on this, check out  this blog post from Microsoft’s XML team, which goes into a little bit more detail.

Quiet Rituals

Completed: Thursday, April 16, 2009 (Download)

Finally, after quite a while, I’ve got a new track out. 🙂 It’s been sitting on my computer for a couple of weeks now, and there are still a few things in it that I would like to iron out, but my inability to get the time to do so means that it’s just been bugging me. So now I’ve decided to just put it up as is.

Anyway, the track itself is quite a simple piece: I did, in fact, try to make it simple. It’s somewhat influenced by Ravel’s Bolero and the Newsboys’ The Orphan, in that it is constantly building by both adding and removing layers. It’s also, perhaps, influenced a bit by some of Coldplay’s stuff: I was listening to Viva La Vida and Prospekt’s March recently, and I was interested to note that in lots of those tracks there’s the same ‘kick on every beat’-type thing going on.

Let me know what you think.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Javascript-generated tables and rowspan

At work, I’ve recently been putting together a nice little calendar-like utility using Javascript. Basically, it has to generate a table consisting of cells which may span multiple rows. Surely the solution is simple enough: just set the rowspan on each td as we create it. Unfortunately, that doesn’t work, at least not in Firefox.

It appears that in Firefox, if you create a td and set its rowspan to some value when there are no rows for it to expand into, the attribute will be completely ignored, even if you add rows afterwards! Needless to say, this is very annoying. The solution? Build your table backwards.

The code I have now is something like this (note that I’m developing using the Mootools framework):

var tbl = new Element('table');
var trs = [];

for (var i = 0; i < 4; i++) {
  var tr = new Element('tr');
  tr.grab(new Element('td', {
    'html': 'Cell ' + i
  }));
  if (i % 2 == 0) {
    tr.grab(new Element('td', {
      'rowspan': 2,
      'html': 'Span ' + (i / 2)
    }));
  }
  trs.push(tr);
}

for (var i = trs.length - 1; i >= 0; i--) {
  tbl.grab(trs[i], 'top');
}

What does this code do? Well basically, we’re creating a table with ten rows and two columns; the cells in the right-hand column each occupy two rows. The result will be something like this:

Cell 1 Span 1
Cell 2
Cell 3 Span 2
Cell 4

MooTools and OO Javascript development

I’ve started work on a new project at my job — a fairly complex AJAX application for the education sector. For this project, I’ve been allowed to essentially choose my own direction, and I’ve chosen to implement the clientside Javascript using the MooTools framework. I’ll say it right here: I’m absolutely loving it.

What I’m really enjoying about MooTools is the object-orientedness it brings to development. Although syntactically it’s a little bit weird at first, the ability to create, extend, and implement classes makes my development progress much more quickly, and in a more efficient way. Add to that the plethora of utilities (like the .each prototype for arrays) and shorthand functions (like $ to replace document.getElementById), and all of a sudden Javascript development becomes a bit more, well, flexible.

I’m not saying that you can’t accomplish cool things in Javascript outside of MooTools (or other frameworks, for that matter); my point is that I believe you can accomplish cool things in Javascript more quickly using a good framework, which should really come as no surprise. Perhaps the reason I’m so enjoying this type of development, to the point of blogging about it, is that up till now, I’ve been stuck working in a non-frameworked, very non-OO Javascript development paradigm.

I mentioned the curious syntax that accompanies MooTools.  To create a new class, for example, you would probably write something like this:

var myClass = new Class({
  Implements: Options,
  options: {
    optionA: 'monkey',
    optionB: 'pony'
  },
  initializer: function(options) {
    this.setOptions(options);
    this.doSomeStuff();
  },
  doSomeStuff: function() {
    alert(this.options.optionA + ' eats ' + this.options.optionsB);
  }
});

And then you would initialise it like this:

var myInstance = new myClass({
  optionA: 'Big Pony'
});

Although it looks a bit weird, it’s actually not too bad. There are really only two problems I have with it:

  1. Remembering to put commas in all the right spots.
  2. Geany, my preferred IDE (cf. Geany IDE: Tango dark colour scheme) can’t pick up classes and members properly (actually, at all) in this style.

Other than that, though, I’m really enjoying it.