Doing major surgery on my framework.

One of the initial important goals of my Custom Website Framework was to keep design and code seperated, so that changes to the design could be done without changing the code.

That goal was reached a long time ago, but the xslt snippets used for creating the output has been included in the project as resource files, so changing the design actually didn't need any changes to the code, but the code had to be recompiled anyway.

So now I'm changing this. I've moved the xslts snippet out of the code. They're now regular files, and these files will be loaded and cached when needed. As I was reworking this area of the code, I started using the generic asp.net cache object, instead of having to make my own with about the same features. It has a nice feature that will actually flush a file from the cache if the file is changed, so now I can make small changes to the xslt files and get the changes live right away without having to restart the application.

Another thing that has been bothering me, is the way I've been handling texts in the framework, or more correctly, localized texts. Instead of having these in the database, as they've been until now, I've also moved them into files. This makes it a lot easier getting someone to translate the site into another language. More on this soon.

Call of Duty: Modern Warfare 2

Every now and then a game is release that I just have to play.

Tuesday (2009.11.10) Call of Duty: Modern Warfare 2 (MW2) was released and after a quick "shoulder game", I just had to buy it. I played Call of Duty 4: Modern Warfare (MW) a lot with some friends. Both MW and MW2 are actually a lot more arcadish than what I usually like, but they're good fun and great games for some team play with the mates!

So MW2 is probably the game with the biggest hype ever, it has been released for PC, Xbox360 and PS3. Several other games have been postponed to avoid being released too close to the MW2 release date.

Unfortunately the PC version is pretty much like the console versions. Seriously this game is only going to be entertainment until a proper PC game is released (Battlefield: Bad Company 2). I know the company behind MW2 has to make money, and that is their main concern, but seriously guys... No dedicated servers!? Some times this is slightly annoying, some times a huge head-ache! Bad choice! Hardcore can now only be played after you reach level 19, and then only on 6vs6 maps? Bad choice! Rumor has it that there'll be no modding. Sorry guys, that's the best way to make players stick with a game! Bad choice!

A small hint to PC gamers behind firewalls, if the game tells you that your "NAT setting" is strict, you can forward TCP + UDP port 28960 to the computer you play on! Voila!

Even more OO javascript.

So where were we?

We have the class initialized, a reference to the link element and the element containing the html to show/hide. So because I'm a bit lazy, I'm going to use an effect from the Mootools framework, instead of making my own. The effect I'm going to use is Fx.Reveal. To get this effect, visit the Mootools more builder.

So when the link element is clicked, the effect will show/hide the content of the container.

this.effect = new Fx.Reveal(this.options.containerId);
this.options.linkId.addEvent('click', function(e) {
  // TODO:
}.bind(this));

To be able to access the ShowLink instance when the event fires, the instance (this) will be bound to the function.

this.options.linkId.addEvent('click', function(e) {
  if (e) {
    new Event(e).stop();
  }
  this.effect.toggle();
}.bind(this));

The last line in the function should be pretty obvious, the first lines, not so much. When you click a link, the browser will take you to the url of the link. That is not exactly what we want, we just want the effect to hide/show the content and nothing else, so to avoid the browser changing page, we stop the click event.

Object oriented javascript - part 2

Let's start off from the top. This is a small introduction to OO javascript classes, with mootools.

var ShowLink = new Class({Implements: Options,
                           options: {linkId: '',
                                     containerId: ''},
 initialize: function(options) {
  this.setOptions(options);
 }
});

These lines show the class definition and the initialize method, the method that is called when an instance is created. When creating these javascript classes, I always try making them as generic as possible, so i need to initialize the instance with some parameters.

To do this, I need the class to implement options, which gives me the possibility to create an instance with parameters.

With my ShowLink definition, my options/parameters are: linkId and containerId. With JSON, the methods are defined like: initialize: function(options), so that's the initialize method, and it takes one argument, options. The first line of the method, this.setOptions(options) stores the values and makes them readable like this: this.options.linkId and this.options.containerId.

As I wrote in the last post, this is some old code. Instead of using strings in the arguments, I will use (DOM) object references.

var ShowLink = new Class({Implements: Options,
                           options: {linkId: $empty,
                                     containerId: $empty},
 initialize: function(options) {
  this.setOptions(options);
 }
}

A small example.

So what's all this talk about object oriented javascript?

When building sites I often need to be able to make an effect/feature like: When the user clicks this link/image, a form will appear - like click the "contact us" link, and the "contact us" form will be visible.

So I've made a small javascript class that will do exactly that:

var ShowLink = new Class({Implements: Options,
                           options: {linkId: '',
                                     containerId: ''},
 effect: $empty,
 initialize: function(options) {
  this.setOptions(options);
  if (this.options.linkId != '' &&
      $(this.options.linkId) &&
      this.options.containerId != '' &&
      $(this.options.containerId)) {

   this.effect = new Fx.Reveal($(this.options.containerId));
   $(this.options.linkId).addEvent('click', function(e) {
    e.stopPropagation();
    this.effect.toggle();
    return false;
   }.bind(this));
   this.Hide();
  }
 },
 Hide: function() {
  this.effect.dissolve();
 }
});

This class is actually one of the first I did, so I'll use this, take it apart, and create a new class step-by-step to show you how this works.