I’ve gotten very satisfied with the set of tools I’m currently using when writing JS tests, so much so that I’d thought I’d write a blog post about it.

I write my tests either using Chai and Sinon or Jasmine. I also use a forked version of JSCovReporter to show me code coverage information. Whilst writing and developing the tests I’d either run them in a browser (and manually refresh) or via phantomjs. This means that most of the time my tests are being tested in either firefox or a webkit-based browser. Of course before committing, the tests are checked manually in all browsers in case of cross browser issues.

This last step though is now replaced with a tool called testem. Testem is a command line tool that automates the running of your tests in any specified useragents and displays the results in the terminal. It’ll detect changes in the test files and automatically reruns the tests. It can also run the tests in CI mode which means the results are output in TAP format from which Jenkins can parse and generate reports.

So now, instead of having a browser open whilst writing tests, I run a command like this:

1

$ testem -f testem.json

and windows for Chrome, Safari and Firefox are opened, the tests are run and results are displayed (The browsers and tests page(s) are specifed in the testem.json file). Alternatively you can also run it headlessly using phantomjs if you don’t need a browser.

The results looks like this:

The browser windows are kept open so subsequent changes will trigger the re-run of the tests. Though, in this example, only the above browsers were specified, I can add other browsers manually just by opening the same url in a different browser. At work for instance, where I work on an iMac with 8gigs of memory and have access to multiple mobile test devices, I would also have tabs for all the IE’s running via a vm, iOS simulator and a couple of android phones. So now, rather than wait for Jenkins or perform a quick manual check of the tests in each browser before committing, I know pretty much straight away if a test fails because of a cross-browser issue.

The icing on the cake is that only a small change to your spec runner files is required:

1
2
3
4
5
6

<!-- Testem support -->
<script type="text/javascript">
    if (location.hash.indexOf('#testem') !== -1) {
        document.write('<script src="/testem.js"></'+'script>');
    }
</script>

It’s a bit ugly but the conditional is there so there the test page can be run manually without testem.

CI mode

Running testem in CI mode is done using the “ci” parameter:

1

$ testem -f testem.json ci -b Chrome

The results are displayed in TAP format which can be piped to a file which Jenkins can be configured to read from. Full configuration of Jenkins can be found on the testem use with jenkins documentation page.

Code Coverage

I use a forked version of JSCovReporter to generate the coverage report. It’s forked to remove the dependency on backbone.

In order for JSCovReporter to render the report the tests need to be run against pre-instrumented code so when each statement in the files are run they can be counted. This is done using CoverJS like so:

1

$ coverjs ./*.js -o ./instrumented

The above command instruments the specified files and outputs them into an directory called instrumented. These files should then be included in the test page in order for the code coverage report to be generated correctly.

Integrated usage

The test page for my very small micro lib preposterous uses both testem and JSCovReporter so should serve as a simple integrated example.

The preposterous project page is a autogenerated composite page of the latest version of the project Readme and chaijs test report. There is also a coverage page that includes the code coverage report (click on the file name on the right or scroll down to see the full report).

The source code for both the tests reports (minus the project Readme) can be found in the test directory and shows how to integrate both testem and JSCovReporter into a test runner page.

I’ve been playing with Rhino. Specifically, reading in json objects, turning that into normal, runnable objects and saving that to a file so browsers can run it. More specifically, the code that transforms the JSON to an object in the browser should be exactly the same as the one that runs in Rhino. That way I don’t have to maintain two different versions.

I’m working on an idea that requires reading in JSON objects and creating objects with methods and properties based on that JSON and could be normally done per request of the page. Obviously, if the JSON is pretty much static, it would be best if we could save the resulting object to a file and reference that file in our pages instead. It would save 1) the request for the JSON file and 2) processing to create the final object. There are two steps to do this.

1. Transform the JSON

2. Saving the object

Transform the JSON

Easy, enough. Iterate through the JSON object, create new object and add methods and properties to it as you see fit. To save it though you need a String representation of the object. Gecko’s toSource() method helps there.

Saving the object

In Rhino, make use of Java’s FileWriter object and save it to the filesystem. If your object is really simple then that’s probably it and you’ll be able to run the object in your browser. If your final object makes use of closures then you’ll get errors, obviously, as the variables the closures have reference to, aren’t being created at all when the code is run in the browser. Solution (when run in Rhino) is to turn those methods that use closures into strings and add the variables in via regexp or whatever and then eval it!! Remember, it’s only done in Rhino, so it’s only done once. One thing to note, you don’t have to replace every occurence of that variable name, only the first one (or add a initialisation statement for that variable to the function). Now when the code is written out to file (and read back in by the browser) the variables will have a valid value.

For simple types, like String or numbers, this will work fine. For objects or arrays, you could use toSource() but that just dumps out a object literal of the object at that time and not a reference which is what you really need. The other thing is you’ll have a large object dump in the final code which makes the final code much much larger than you need. The solution then is store these objects in an Array or manager object (outside this system) and retrieve them as needed within your final code.

Here’s an example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.
.
o[sMethodName] = function(varA,varB){
var f = function(var1){
//Use of an objManager to retrieve object we need
//varA and varB have no value in Rhino
objManager.getObj(var1).method(varA,varB);
};
//so for rhino
if ((typeof this["load"] == "function") && (typeof this["Packages"] == "function")) {
//so get string version of function
var fString = f.toString();
//replace variable names with actual variable value.          
fString = fString.replace('varA', '"' + varA + '"');
fString = fString.replace('varB', '"' + varB + '"');
return eval(fString);
}

return f;

}(a,b);
.
.
.

There you go. Ugly, more than probably not robust but it’s the only way I’ve found to do what I need to do for my use case; admittedly probably not a common usage scenario.

Is there a better way?

Design Patterns

Whenever I code a widget, there’s two resources I look to. One is Yahoo!’s Design Pattern library and the other is Jennifer Tidwell’s Designing Interfaces book. It’s from this book and more specifically the explanation of the Multi-Level Undo pattern that ActsAsUndo is based on.

Basically the Multi-Level Undo pattern says that if users can navigate through their action history and undo their actions, then they can explore their own work paths quickly and safely. The most obvious desktop example of a navigable history is Photoshop’s history panel.

The pattern states that these kind of actions should be undoable:

• Text entry for documents or spreadsheets

• Database transactions

• Modifications to images or painting canvases

• Layout changes — position, size, stacking order, or grouping in graphic applications

• File operations, such as deleting or modifying files

• Creation, deletion or rearrangement of objects such as email messages or spreadsheet columns

• Any cut, copy, or paste operation

There are apps like these available on the web and some do have some simple undo/history functionality. These do tend to be only a single step undo and then, only for actions that change and save a new state eg move to trash. But also other actions that users make but perhaps don’t yet want (or need) to save should also be undoable and at a multiple level too. So, how do we as implement something like the Multi Level Undo interaction pattern? We use the Memento software design pattern.

Demos

Two of Jennifer’s examples are text entry and stacking order changes. I thought these would be relatively simple examples to use for demo purposes. Here’s the text entry demo and also the stacking order demo. I used the demo of the YUI’s sortable list which I hope they don’t mind. If you want, take a look at these to see whats going on before reading on.

Text entry

The first example I’ll cover is the text entry one. It’s a simple example of a textarea in which users can enter text and save snaphots. The original class has two properties el and sValue. el represents the textarea and sValue, the textarea’s value. It has a method called setText() whichs sets sValue to the value of the textarea.

Finally we have a snapshotText() method which calls setText(). We wire a button element to this method.

1
2
3
4
5
6
7
8
9
10
11
12

YAHOO.NT.UI.TextUpdate = function(elId,sGroup,sPreviewId) {
  this.el = document.getElementById(elId);
  this.sValue = this.el.value;
}
YAHOO.NT.UI.TextUpdate.prototype.setText = function(sValue) {
  this.sValue = this.el.value = sValue;
}
YAHOO.NT.UI.TextUpdate.prototype.snapshotText = function() {
  if (this.sValue != this.el.value) {
    this.setText(this.el.value);
  }
}

We can add undoable functionality by augmenting it with YAHOO.Acts.as.Undoable. This adds a sCaretakerGroup property and undo(),redo(),revert() and restore() methods. All we need to do is subscribe to the ‘stateLoaded’ event and make a call to saveState() of the Caretaker to record the initial state. We can do this in the constructor of out TextUpdate object or a init() method if we choose to use one.

1
2
3

this.sCareTakerGroup = sGroup;
YAHOO.NT.CaretakerRegistry.subscribe(this.sCareTakerGroup,'stateLoaded',this.restore,this,true);
YAHOO.NT.CaretakerRegistry.saveState(this.sCareTakerGroup,'New',{'args':[this.sValue],'execute':this.setText,'oScope':this});

The first line just sets up a property that allows us to identify a caretaker to manage our states (more on this later).

The second line subscribes to an event called ‘stateLoaded’ and sets the callback to our restore() method.

Then, the third line saves our initial state. We need to do this so the revert() method can revert to the initial state. The callback we specify here depends on your object

So now our TextUpdate class looks like this :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

YAHOO.NT.UI.TextUpdate  = function(elId,sGroup,sPreviewId) {
  this.el = document.getElementById(elId);
  this.sValue = this.el.value;

  //Interact with caretaker 
  this.sCareTakerGroup = sGroup;
  YAHOO.NT.CaretakerRegistry.subscribe(this.sCareTakerGroup,'stateLoaded',this.restore,this,true);
  YAHOO.NT.CaretakerRegistry.saveState(this.sCareTakerGroup,'New',{'args':[this.sValue],'execute':this.setText,'oScope':this});
}

YAHOO.NT.UI.TextUpdate.prototype.setText = function(sValue) {
  this.sValue = this.el.value = sValue;
}

YAHOO.NT.UI.TextUpdate.prototype.snapshotText = function() {
  if (this.sValue != this.el.value) {
     this.setText(this.el.value);
    //saves value to caretaker 
    YAHOO.NT.CaretakerRegistry.saveState(this.sCareTakerGroup,null,{'args':[this.sValue],'execute':this.setText,'oScope':this});
  }
}
//make undoable
YAHOO.augment(YAHOO.NT.UI.TextUpdate,YAHOO.Acts.as.Undoable);

The last line adds the undoable functionality to the TextUpdate object. (see next code snippet)

But what’s all this caretaker stuff? Well, the Memento software design pattern is an established pattern that helps to implement undo functionality. I touched on the Memento pattern in an earlier post about object-oriented Actionscript.

The Memento pattern has three classes; Originator, Caretaker and Memento. Basically using these three classes, the Memento pattern works likes this:

If an Originator wants its state or some of its state to be undoable or redoable, then it must save its state to a Caretaker. This Caretaker will manage the various states (Mementos) of our Originator. (isn’t it lovely terminology?)

Using this as a premise, we can devise a simple ‘framework’ for adding multi level undo functionality to our apps. We don’t need (or want) to create lots of class hierarchy for our apps but the only classes we need to create revolve around the Caretaker object. Each object that we need undo functionality for, we have a corresponding caretaker. To manage multiple Caretaker objects (since perhaps multiple objects need a separate history), we use a CaretakerRegistry singleton object to do so. This allows Caretaker objects to be registered and created, if not done so already. It also acts as proxy to caretaker objects as all calls to Caretakers are made via the CaretakerRegistry. A registry also allows multiple objects to monitor state changes of an Originator. See the HistoryList section for an example of such an object

Interaction is achieved using CustomEvents. Caretaker objects fire ‘stateLoaded’ and ‘stateSaved’ events. Originator objects subscribe to the ‘stateLoaded event. Any other object that is interested in the state of our Originator will subscribe to both ‘stateLoaded’ and ‘stateSaved’ events. Each event passes the Memento object to each listening object.

Everytime the state of our object has changed and needs to be saved, we call the saveState method (see line 19) of our object’s Caretaker which makes a note of the new state and fires off a ‘stateSaved’ event.

Here are the methods that ActsAsUndoable adds.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

/**
 * redo changes
 */
 undo : function() {
  YAHOO.NT.CaretakerRegistry.loadState(this.sCareTakerGroup);
 },

/**
 * Redo changes
 */
 redo : function() {
  YAHOO.NT.CaretakerRegistry.loadState(this.sCareTakerGroup,-1);
 },
  
/**
 * Revert to initial text value
 * 
 */
revert : function() {
  YAHOO.NT.CaretakerRegistry.loadState(this.sCareTakerGroup,0);
},
  
/**
 * 
 * 
 * @param {Object} oState Object containing callback to call with specified 
 * arguments and scope. Fields are :
 * 
 * {Array}   oState.args Array of arguments to call callback with
 * {fn}          oState.execute Calblack function
 * {Object}  oState.oScope Object to use as scope for callback
 */
restore : function(oState) {
  if (oState.execute) {
  oState.execute.apply(oState.oScope,oState.args);   
  }
}

Our object also has undo(),redo(),revert() methods, all of which call the loadState() method of the Caretaker. This, in turn, fires off a ‘stateLoaded’ event. Because our originating object subscribes to the ‘stateLoaded’ event it is passed the Memento object, which represents the state of the object that it needs to be undone, redone or reverted to. The listening method of our object that the custom event fires to is called restore(). This is the method that sets the state of our object. The restore() method is passed an object with three properties. These are args,execute, and oScope and are defined when we save the state via the saveState() method. Our restore() simply calls the method specified in execute passing as args those specified in args using oScope as the scope for the method.. I restore the state of the object like this (via a method call) rather than simply overwriting some properties with older properties as often some logic needs to be run as well; just resetting the properties probably won’t suffice in anything other than a very simple widget). The best way to do that is via existing methods on our originating object. For the pattern heads out there, this way is similar to the command pattern without actually creating Command objects – the existing methods are the Commands.

Stacking Order

The stacking order demo is similar. I rewrote the example to reflect the changes needed to make the reordering done by single method (orderLi). Also I haven’t augmented it with ActsAsUndoable as I don’t use the undo, redo or revert functionality in the UI. The source for YAHOO.example.DDApp is probably a good example to view if you want to see how to add undoable functionality without using augmentation.

History List

The History List object is one that listens to state changes of a given object and renders them in a list. It shows how other objects besides the Originator can monitor changes of state. Clicking on each item in the list, rolls back the state of that object to the state. You just initialise it with the id of the container and the CaretakerGroup that the object you’re providing a history for is using.

Each link in the history list is a named anchor. However in the update() method, we stop the Event so the browser doesn’t actually add it to its own history. We don’t want the act of navigating through the history of our own actions within our task to interfere with the history of our browser.

We can create a new HistoryList object that monitors changes to our object by this :

1

hl = new YAHOO.NT.UI.HistoryList('hlistCont','textArea');

The first is the id of an element in which to render the history list. The second is the name of the caretaker group to monitor. The list is rendered to the document and any saves, reverts, undo etc are shown in this list.

Resources and notes :

• The ActsAsUndoable was an interim tongue-in-cheek working name but I kinda like it. The Acts.as namespace is a bit overkill but it fits pretty well and will work out nicely in future things I want to post about.

• Accessibility – we should set the tabindex of our textarea or list to -1 and focus() them when a history list item is clicked or pressed. See this making ajax work with screen readers article from Juicystudio *

• For the textUpdate example I’ve used the word ‘snapshot’ rather than ‘save’ as ‘save’ would probably mean save permanently to most people. Another button called save could easily be added that would do a true save via normal form functionality. It could even be done using AJAX and the Browser History manager from the YUI library, which would add an item to the history list. Having said that, we don’t want to confuse user with two histories; browser history and what I call User Interaction History.

• I used the terms as specified as in the Memento Design Pattern. These aren’t the clearest names and I was in two minds of calling Caretaker and CaretakerRegistry, UserActionManager and UserActionManagerRegistry. But I suppose these objects can be used for things other than user actions so I kept the design pattern language.

You can download the examples and js files. One of these days I’ll make my subversion repo public but for now old fashioned zip files will have to do.

Finally, thanks to Tony Kabalan for being a sound board and inputting some useful ideas.

The actual ‘problem’ wasn’t actually anything to do with the core behaviour of a tabbed interface. After all, the mechanics of such a problem is pretty simple; hide one element, show another. No, I wanted to make the tabs draggable and closeable, much like an OS tab that can be seen in Firefox or Eclipse. Using the YUI library, making the tab draggable is relatively straight forward but it did result in some duplicated code which I didn’t like. That was the ‘problem’.

Essentially, it was like this: My original code had two objects, the YAHOO.NT.TabsModule and YAHOO.NT.Tab. The TabsModule was the managing object for each of the Tab objects. If I wanted to make it draggable I need Tab to extend YAHOO.util.DDProxy. No problem there except of course there has to be additonal logic in the Tab object to do so and also manage the dragging ‘n’ dropping. Subclassing Tab would have worked but again code would be duplicated in those methods that needed the changes. But then you get into the trouble of class trees. For instance, DraggableTab subclasses Tab and so does Closeable Tab. But what if I wanted a Draggable and Closeable Tab? That’d be a little trickier to do while still maintaining some sense of clean code.

The rather clean solution turns out to be AOP. Quickly, AOP allows us to easily add new code to existing code without editing it. It does this by essentially wrapping the original code so that the new code runs ‘before’,‘after’ or ‘around the original code. These are the so called ‘aspects’. So it turns out that to make a Tab draggable I’d need to add new methods (my own as well as YAHOO.util.DDProxy) as well as fiddle with a few existing Tabs methods:

Here I’ve outlined which methods have been aspected (is that the right term?) and what the new code adds to the original.

• YAHOO.NT.TabsModule.init is after aspected by both YAHOO.NT.DraggableTabs and YAHOO.NT.CloseableTabs – both adds a new CustomEvent which listens to all existing Tab instances

• YAHOO.NT.TabsModule.selectTab is before aspected by YAHOO.NT.CloseableTabs – adds logic to detect to close tab.

• YAHOO.NT.Tabs.initTab is after aspected by both YAHOO.NT.DraggableTabs and YAHOO.NT.CloseableTabs – adds new configuration logic, custom event creation

• YAHOO.NT.Tabs.activateTab and YAHOO.NT.Tabs.deactivateTab are both after aspected by YAHOO.NT.CloseableTabs – adds logic to show/hide close icon.

Though, AOP in Javascript certainly isn’t new, I really like the relatively clean way its allowed me to separate behaviours without duplicating any code.

AOP is a way of changing the behaviour of existing code without modifying it. It does this by providing, what AOP calls, advice at certain join points. In plain english, it provides a way of adding additional behaviour (advice) at certain points in your program (join points). For example, adding logging functionality to your code is a standard example. Generally, you don’t want every method in your code to contain logging code. It’s not really part of the core base code. AOP provides an easy way of doing without modifying your code. But because of the way AOP works, you can add as many behaviours as you want to, to any object.

What and how?

AOP provides three aspects called before, after and around. This means that you can add additonal behaviour before, after or around certain points in your code of your own choosing. I’ve created a static class called YAHOO.Abstract.Aspect that I use to add advices to other objects. It’s a very simple one and just adds the three advices to an method.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

YAHOO.Abstract.Aspect = function() {
  aAspects = [];
  aAspects["before"]=function(oTarget,sMethodName,fn) {
      var fOrigMethod = oTarget[sMethodName];
  
      oTarget[sMethodName] = function() {
        fn.apply(oTarget, arguments);
        return fOrigMethod.apply(oTarget, arguments);
      };
  };   
  //after
  aAspects["after"]=function(oTarget,sMethodName,fn){
      var fOrigMethod = oTarget[sMethodName];
      oTarget[sMethodName] = function() {
          var rv = fOrigMethod.apply(oTarget, arguments);
          return fn.apply(oTarget, [rv]);
      };
  };   
  //around
  aAspects["around"]=function(oTarget,sMethodName,aFn){
      var fOrigMethod = oTarget[sMethodName];
      oTarget[sMethodName] = function() {
            if (aFn && aFn.length==2) {
              aFn[0].apply(oTarget, arguments);
              var rv = fOrigMethod.apply(oTarget, arguments);
              return aFn[1].apply(oTarget, [rv]);
            }
            else {
              return fOrigMethod.apply(oTarget, arguments);
            }
          
          };
    };
  return {      
      advise : function(oTarget,sAspect,sMethod,fAdvice) {
          if (oTarget && sAspect && sMethod && fAdvice && aAspects[sAspect]) {
              //decorate specified method
              aAspects[sAspect](oTarget,sMethod,fAdvice);
          }
          return oTarget;
      }
  }
}();

For instance, if I wanted to add a before advice, I’d do something like the following :

1

YAHOO.Abstract.Aspect.advise(obj,'before','method',function() { alert('before')});

After advice is similar:

1

YAHOO.Abstract.Aspect.advise(obj,'after','method',function() { alert('after')});

Adding around advice is slightly different as you have to provide two methods, one for before and one for after:

1
2
3
4
5
6
7

YAHOO.Abstract.Aspect.advise(obj,'around','method',[function() {
              alert('before');
              },
              function() {
              alert('around');
              }]
);

All arguments are passed transparently to the original methods and for all after methods, the return value of the original method is passed in.

Let’s see how easy it is using the standard logging example. Its an simple but probably unpractical example.

This example add a simple logging behaviour for every method of a specified object. When a method is called, it is logged and so are its arguments. It also displays the methods return value, if any. For this example, it makes use of Firebug and some of its console functions, specificially group and groupEnd. These basically indent and outdent grouped console.log outputs. So how do we write the behaviour? Well, before a method is called, we want to start a new console group and also output which method was called and also any arguments if any were passed. Something like this:

1
2
3
4

function() {
  window.console.group('Entered method %s',sMName);
  window.console.log("Received arguments: %o",arguments);
}

Then when a method has returned we want to log that the method has returned and any return value it may returned.

1
2
3
4
5

function() {
  window.console.log("Returned : %o",rv  || 'zilch');
  window.console.log('Exited method %s',sMName);
  window.console.groupEnd();
}

In AOP terminology these would be termed “before” and “after” advice. But since there is also “around”, we can use that instead so we only modify each method once.

So, the full code to add this logging behaviour to any object would be like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

YAHOO.namespace('YAHOO.NT');
  YAHOO.NT.trace = function(oTarget) {
      for (var p in oTarget) {
          if (typeof oTarget[p] == 'function') {
              (function (){
              var sMName = p;   
              var cnsl = window.console;             
                  YAHOO.Abstract.Aspect.advise(oTarget,'around',sMName,[function() {
                          cnsl.group('Entered method %s',sMName);
                          cnsl.log("Received arguments: %o",arguments);
                      },
                      function(rv) {
                          cnsl.log("Returned : %o",rv  || 'zilch');
                          cnsl.log('Exited method %s',sMName);
                          cnsl.groupEnd();
                      return rv;
                  }]);
              })()
          }
      }
  }
}

The above code creates a new namespace so we don’t pollute the global namespace and a new method called trace. All it does it receive a target object and adds the around advice to each method that it finds. It’s also possible to extend this so that it receives another parameter which would state a whitelist or blacklist of methods to advise (or not). The actual call to advise any object, let’s say the Dom object of YUI :

1

YAHOO.NT.trace(YAHOO.util.Dom)

You can see the output on the example page.

What else can AOP be used for?

• Profiling – very similar to the trace, but instead maintains a timing of how long each method took.

• Event firing on attribute changes – if you use getters and setters and when a set method has been called, automatically fire a valueChanged custom event. In practice, can really only be used when external entities change an objects property (Its not wise for an object to call its own setter method).

• Validation of methods arguments – validate passed arguments to a method, specifically setter methods though any type of method can be used.

• Convertors – bridge output from one object to another incompatible object

• Provide an alternate to subclassing – use mixins instead of subclassing to add more and more behaviours while reducing amount of code duplication. I’ve used this for a widget and its really useful. I hope to be posting about that in a few days.

Is it useful?

I think it can be, in some cases. It means careful consideration about how you design your code, but I can envisage a small library using AOP or similar metaprogramming techniques. Often in larger javascript apps, there are many similar types of objects doing similar things. These are often utility objects which interact with different parts of your code but still have quite a lot of similarity within them. Why not use metaprogramming techniques to write these duplicated parts of your code using your own code as a base?

Where else is it used?

AOP in javascript isn’t new to the Javascript world. Here’s the post about aspects I first read about using JS late last year (and I’ve just noticed recently updated). It was Justin Palmer’s post though that got me thinking about AOP in widgets. The examples there uses Beppu’s ActsAsAspects class. There’s no difference between between that one and mine in terms of functionality except Beppu’s version adds a couple of things to the target object which I didn’t want to do. Also Dojo uses it in its event classes.

It’s been a while.

Been busy with work, life and stuff.

But feel like posting again so I’ve changed servers and got a temp design up, which will change soon.

So let’s see what happens.

The semantic web won’t be in wide use yet but the University of Southhampton has released an interface to a new semantic web interface called mSpace. They have an example interface searching for classical music which currently is Mozilla only. It is javascript driven and uses xmlhttprequest to retrieve the data. The client source code is even available on sourceforge.

One of the coolest things about liveSearch is the keyboard navigation where users, when the input field has the focus, the user can navigate through the results using the up and down keys on the keyboard. Because of the pageSet script I’ve done in the past I initally implemented paging functionality into the original liveSearch script including navigating through the pages with the left and right arrow keys.

I then thought about making it easier to implement something like this on various blogging and CMS systems. This led me to using XML to load config data. As a result, liveInfo has a skinnable, plug-in architecture and as its completely object oriented, more than one liveInfo element can be used on a page. The small PHP framework fully supports XMLRPC (using incutio’ XMLRPC library) and SOAP (using nusoap )webservices and should be easily portable to other languages for use in CMS or blogging systems written in that language.

I’ve also enabled it to work with opera 7+ as well as IE 5+ and Gecko based browsers. It should also work on Safari and other browsers though I haven’t been able to test this. Please report any problems and I’ll try and fix it. For browsers that support it, it uses document.importNode to display the data so it should also work on those documents that are true XHTML documents.

You can see it running on this blog. The wordpress search liveInfo element is a simple database based system, while the SynTV Search Listings LiveInfo element is a XMLRPC based service which retrieves search result from SynTV. The download comes with a demo page which also includes a Google the search element which uses Google SOAP API.

The complete feature set can be seen in the following list.

• Support for more browsers

  • Internet Explorer 5+ (Win)

  • Gecko based browsers

  • Opera 7+

  • Should work with IE Mac, Konqueror etc. Needs testing

• Multiple LiveInfo elements on one page

• Pageable results (Keyboard navigation via left, right, up and down keys)

• Support for forms with multiple elements

• Cacheable Results

• Dynamic forms

• Skinnable Results

• Plugin support (services)

• Webservices support (via plugins)

I’ve also put up a page describing how liveInfo works but in short all a plugin writer has to do is write a class extending the liveInfo class or subclass and implement two methods. Then write an XML file denoting config values, cache time, form HTML and results HTML . If needed, the writer can provide a css file too. All the user has to do is extract the plugin into the plugins directory and add a few lines in their page.

Technorati Tags: xmlhttprequest | liveInfo |

From the client side, LiveInfo improves upon the original in the following areas:

• Support for more browsers
  • Internet Explorer 5+ (Win)
  • Gecko based browsers
  • Opera 7+
• Should work with IE Mac, Konqueror etc. Needs testing
• Multiple LiveInfo elements on one page
• Pageable results (Keyboard navigation via left, right, up and down keys)
• Support for multiple element forms

Utilising a small backend framework, LiveInfo also provides the following functionality

• Cacheable Results
• Dynamic forms
• Skinnable Results
• Plugin support (services)
• Webservices support (via plugins)

LiveInfo comes with four services. These are as follows:

• Wordpress search – Searches a wordpress blog
• Google Search – A simple Google search. Uses Googles SOAP API.
• SynTV Search – Search UK TV listings using the syntv.com XMLRPC webservice
• SynTV Listings – Displays UK TV listings using the syntv.com XMLRPC webservice

The latest version of liveInfo can be found on my downloads page.

Installation

Extract the zip and upload the liveInfo directory to your server. I recommend uploading it to the root directory. Wherever you upload it, edit the liveInfoDir node in the liveInfo/liveInfo.xml file to point to it. The value should be a relative path and must not have an ending /. Any new services should be copied into the services directory and any css files into the css directory. Lastly make sure the cache directory is writable. You’ll need to edit the xml file for each service to suit your install but instructions are given

How it works

When a user interacts with a form, using either the XMLHttpRequest object or an iframe depending on browser capability, a request is made to the server. Whatever the results the server returns some XML from which the relevant elements are extracted and displayed.

The xml document that is returned by the server is actually an XML document with a html namespace. The reason for this is that the normal method of using innerHTML to rewrite elements won’ work on some browsers that support true XHTML documents (xml files sent with the correct application/xhtml+xml header). The workaround for this is to use the document.importNode method to import nodes from one document into another. Note this compatibilty with true XHTML documents was one of the last features to be put in and hasn’t yet been tested fully on true XHTML documents. I will update when I test more fully.

Javascript

The javascript for LiveInfo is object-oriented. The liveInfo object is responsible for extracting the form details, showing and navigating through the results. The liveInfo object utilises the xmlClient object which is responsible for contacting the server and returning the results to the liveInfo object.

The XMLClient object

For browsers that can make use of the XMLHttpRequest object, the xmlClient simply instantiates the XMLHttpRequest object and sends the request through. For those browers that don’ have have XMLHttpRequest capability, it uses iframes. Unfortunately, its not easy to detect when a page has finished loading within an iframe so we check for a close tag for a specifed tagName which we call a closureNode (also the root node). When we encounter this, we extract and return the results.

The LiveInfo Object The LiveInfo object is really quite customisable. There a few other elements besides the actual results to display. There is a title element, a status element to display information, the page controls and other UI elements. The methods available to customise different aspects of the liveInfo page element.

The constructor for the object takes four parameters. The first is the url for the liveinfo.php. The second and third are the service name and operation name respectively. The last parameter is the name or id of the nominated form element that is to trigger the liveInfo display. There can be more than one element that triggers liveInfo but only one can be the nominated element. The nominated element is also checked for text input if it is an text field or that a choice is selected if a select element.

The status text that is displayed on various events (search, error, progress,result) is fully customisable and is based on using a token within a string which is replaced with the required value. This allows a degree of support for other languages. The default token is “?” but this can be changed with the setStatementToken method. There are four statements and these can be changed via the setSearchStatement, setErrorStatement, setProgressStatement and setResultStatement methods.

Like the original, the results are navigable via the keyboard but this can be turned of via the setActivateKeys method.

The amount of time (in secs) the results are shown before automatically disappearing can be changed from the default of 5 seconds using the setDisplayTimeout method.

Debugging can be turned on or off via the setDebug method

When a user hits the return key, the form defaults to submitting the form to the required page. This behaviour can be turned off with the setSubmit method.

We can also add a custom method that is called whenever the liveInfo is triggered but before the request is sent. An example of why we might want to do this is to sent the field of a hidden value to something depending on the value of others form elements. To add this custom method we use the addOnTriggerMethod which takes a function as a parameter.

The default validation method in liveInfo simply checks that text is entered in text field elements and that at least one option is selected for select elements. You can replace this with a custom validation method using the replaceValidateMethod method. Like addOnTriggerMethod, this takes a function as a parameter.

Examples of calling these methods can be seen below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

setStatementToken("|");
setSearchStatement("custom searching for msg |");
setErrorStatement("Custom error msg: |");
setProgressStatement("Streaming data...|");
setResultStatement("Displaying items | to | out of |");
setActivateKeys(false);
setDisplayTimeout(10);
setDebug(true);
setSubmit(false);
addOnTriggerMethod(function()  {
          if (document.getElementById("synTVgetSearch_timeslot").value!="WHATSONNOW")
              document.getElementById("synTVgetSearch_time").value=0;
          else {
              date = new Date();
              var hours = date.getHours();
              var mins = date.getMinutes();
              hours = (hours < 10) ? '0' + hours : hours;
              mins = (mins < 10) ? '0' + mins : mins;
              document.getElementById("synTVgetSearch_time").value=hours+""+mins;
          }
      });
replaceValidateMethod(function() {
  //validation js here
});

Framework

The framework is currently coded in PHP but it should be easily ported to other languages.

The plugin architecture is based on an abstract class called liveInfo. This class and all plugins (services) have an associated xml file which defines configuration values. The liveInfo.xml file contains default configuration values for the system. The xml files for services can override the values in the default xml file. For instance, the liveInfoContainer node contains the html (div container) that displays the results and pagecontrols. This can be used by all services or a service can have a liveInfoContainer node in its xml file which is used instead. This is what makes liveInfo skinnable. Every service also has an associated class which is a subclass of the liveInfo class.

The best way to describe how liveInfo is to use an example. The next two sections describe how to put a liveInfo element on a page and how to write a service.

Putting liveInfo on your page

We’ll use the google service as an example. The google service displays results from Google.

Inside the head section of your page or template, put the following bit of php

1
2
3
4
5
6
7

include_once('<path>liveInfo.php');
$liveInfoMan = liveInfoManager::getLiveInfoManager();
$liveInfoMan->addService('google','Search');
//output a string of all the css link tags for all the services
echo $liveInfoMan->getClientsCode("css");
//output a string of all the js for all the services
$jsCode  = $liveInfoMan->getClientsCode("js");

Replace <path> with the install path of LiveInfo in line 2. Line 3 instantiates the LiveInfoManager object. This object is responsible for managing the liveInfo elements that are on the page. Remember, its possible to have more than one. We add the service that we want via the addService method in line 4. The addService method takes two parameters; serviceName and opName. In this case the serviceName is “google” and the opName is “Search”. If you have other services, you would add them here. Each service has a associated css file and line 6 outputs the css link tag for each service. Line 7 stores the javascript object creation code into the $jsCode variable.

Also in the head section we need to load the js files and create the function that is called when the document has loaded. This function creates all the liveInfo objects for each of the services on the page

1
2
3
4
5
6
7
8
9

<script type="text/javascript" src="[path]js/xmlclient.js"></script>
<script type="text/javascript" src="[path]js/liveinfo.js"></script>
<script type="text/javascript" src="[path]js/onload.js"></script>
<script type="text/javascript"><!--//-->< ![CDATA[//><!--
  function liveInfoServices() {
       <?php echo $jsCode;   ?>
  }
//-->< !]]>
</script>

Replace [path] with the path of your liveinfo install. The $jsCode is the javascript that inits the liveInfo objects for each element on the page. It would look like this :

1
2
3

wordpressSearch = new liveInfo("http://www.nodetraveller.com/liveInfo/liveInfo.php","wordpress","Search","s");
wordpressSearch.init();
wordpressSearch.setSubmit(true);

Now within your page or template, wherever you want, you can output the form and result HTML with the following:

1
2

echo $liveInfoMan->getClientCode("google","Search","form");
echo $liveInfoMan->getClientCode("google","Search","resultsHTML");

And that’s it. The actual form and html is actually defined in the service xml, which is what we’ll look at next.

A Service

Default values are stored in liveInfo.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<liveInfo>
        <liveInfoDir>/liveInfo</liveInfoDir>
  <cssLink>http://yourdomain.com/liveInfo/css/liveInfo.css</cssLink>
        <cacheTTL>3600</cacheTTL>
  <liveInfoContainer>
  <![CDATA[
 <div id="[<infoName>][<opName>]_liveInfo" class="liveInfo" >
 <div id="[<infoName>][<opName>]_liveInfoStatus" class="liveInfoStatus">
     <a href="javascript:void(0)" id="[<infoName>][<opName>]_liveInfoClose" class="liveInfoClose" onclick="[<infoName>][<opName>].hideLiveInfo();" title="Close">X</a>     
     <div id="[<infoName>][<opName>]_liveInfoPageControls" class="liveInfoPageControls">
         <a id="[<infoName>][<opName>]_liveInfoNext"  class="liveInfoNext" onclick="[<infoName>][<opName>].next()" title="Next results" >&raquo;</a>
         <a id="[<infoName>][<opName>]_liveInfoPrev" class="liveInfoPrev" onclick="[<infoName>][<opName>].previous();" title="Previous results" >&laquo;</a>
     </div>
     <div id="[<infoName>][<opName>]_liveInfoTitle" class="liveInfoTitle">[<infoName>]</div><div id="[<infoName>][<opName>]_liveInfoStatusText" class="liveInfoStatusText"></div>
 </div>
 <div id="[<infoName>][<opName>]_liveInfoResults" class="liveInfoResults"></div>
</div>]]>
  </liveInfoContainer>
</liveInfo>

The liveInfoDir points to the install directory of liveInfo. This is used by the js liveInfo object. The cacheTTL node defines the default time in seconds to cache the service. This can be overridden by a service. The cssLink points to the location of the default css stylesheet. This can also be overridden by a service. Also overrideable by a service is the liveInfoContainer node. This defines the HTML that is displayed when results are shown. The [<infoname>][<opname>] is used as placeholders and is replaced by the serviceName and opName in the final output on a page eg googleSearch. The structure of this node can change but note that the event handlers, id and class names should be the same. You should be able to add new elements also.

The google service xml looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<liveInfoProvider>
  <name>Google</name>
  <description>you need a description?!</description>
  <link>http://www.google.com</link>
  <cacheTTL>3600</cacheTTL>
  <key>Use your own google key</key>
  <q></q>
  <start></start>
  <maxResults>10</maxResults>
  <filter>true</filter>
  <safeSearch>false</safeSearch>
  <restrict></restrict>
  <lr></lr>
  <liveInfoOperations>
      <liveInfoOperation>
          <liveInfoOperationName>Search</liveInfoOperationName>
          <liveInfoDescription>Get Search Results</liveInfoDescription>
          <client>
              <liveInfoForm>
                  <![CDATA[<form onsubmit="return [<infoName>][<opName>].submit()"  id="[<infoName>][<opName>]_liveInfoForm" class="[<infoName>][<opName>]_liveInfoForm" method="get" action="./">
<input type="text" id="googlesearch" size="15" onkeypress="[<infoName>][<opName>].execute()" />
</form>]]>
              </liveInfoForm>
              <liveInfoJS>
              <![CDATA[
     [<infoName>][<opName>]= new liveInfo("[<liveInfoURL>]","[<infoName>]","[<opName>]","googlesearch");
[<infoName>][<opName>].init();               
]]>
              </liveInfoJS>
              <cssLink>http://yourdomain.com/css/googleLiveInfo.css</cssLink>
          </client>
      </liveInfoOperation>
  </liveInfoOperations>
</liveInfoProvider>

The name, description and link nodes are there for informational purposes about the service. On line 6 we can see that this service is set to cache for only 15 mins. The key, q, lr, start, maxresults, filter, safesearch and restrict nodes are google webservice parameters. If a service needs service specific config values, they can be defined here in the xml and the service will pick it up.

Now every service has at least one operation. Here we define one called search. Google’s webservice also provides a spelling operation. If we wanted to, we would have another liveOperation node which defines the information needed for that operation. The important nodes here are the liveInfoOperationName and the client nodes. The liveInfoOperationName identifies the operation and is used by the liveInfoManager to load up the correct service operation. The client node has a liveInfoForm node which is where the form for the service is defined. To note here is the keypress event handler event for the element that is to trigger the liveInfo. This event can be used on other elements if the form has more than one element. The liveInfoJS node contains the javascript code to create the liveInfo js object. Any parameters or customisation is set here. See the Javascript section for more information. Finally the cssLink node defines the link to the stylesheet for this service.

It’s possible that a form element is dynamic. For instance, a select element’s options are loaded from the database. In this case, we can specify a method to call which will output the element. To do this we put the following in the relevant place. An example

1

<opCall>getDays</opCall>

When the service encounters the node, it calls the getDays method and inserts the return value in the form

The PHP

An abstract class called liveInfo defines the interface which any service must implement. It also provides some helper methods for outputting xml, debug info and caching methods. The constructor looks like this.

1
2
3
4
5
6
7
8

class googleLiveInfo extends soapLiveInfo {
  var $serviceName = "google";
 
  function googleLiveInfo($opName=null) {
      parent::soapLiveInfo();
      $this->opName = $opName;
      parent::initialise();
  }

The Google webservice is a soap service. Besides the liveInfo abstract class, the liveInfo framework is supplied with two subclasses called rpcLiveInfo and soapLiveInfo. These subclasses include the required library for using XMLRPC or SOAP. So if your service uses XMLRPC or SOAP you should subclass one of these methods. If not, then you should just subclass the liveInfo class. Its important that you do this and call the parent constuctor (see line 5). Calling the parent constructor, loads the default liveInfo.xml then calling the initialise() method, loads the service’s xml file initialising the object with the data in the xml file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

function getLiveInfo($query) {
      if ($this->debug) 
          $this->dumpVariable('RECEIVED QUERY PARAMS: ',$query);
      # Set google parameters
      $parameters = array(
        'key'=>$this->key,
        'q' => $query['googlesearch'],
        'start' => '0',
        'maxResults' => '10',
        'filter' => $this->filter,
 
        'restrict' => $this->restrict,
        'safeSearch' => $this->safeSearch,
        'lr' => $this->lr,
      );
      $cache = $this->getCache($this->serviceName.$this->opName);
      switch($this->opName) {
          case "Search":
              //if not using a cache use this line
                                // $result = $this->getSearch($parameters);
                                $result = $cache->call(array(&$this,'getSearch'),$parameters);
              break;
      }
      if ($this->debug) {
          $this->dumpVariable('LIVEINFO RESULT (XML) : ',$result);
      }
      if($this->debug)
          return $this->packageResult($this->packageDebug($this->debugStr).$result);
      else return $this->packageResult($result);
}

When a request from a liveInfo page element, its the getLiveInfo that is called. If cache is needed we get a cache object by calling the getCache method, then we call the getSearch method via the cache object’ call method. If a cache is not needed, then we would just call the getSearch method directly. Then the results are packaged for return. Note also debug data is also added if debug mode is on. The getSearch method sets up the SOAP call, contacts the webservice and passes the results to the renderResults method which returns them nicely formated into an unordered list.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function renderResults($results) {
      if ($this->debug)
          $this->dumpVariable('LIVEINFO RESULTS (RAW) : ',$results);
      $channels = $results;
      $html ='<ul class="liveResults">';
  foreach ( $results['resultElements'] as $result ) {
      $title = $result['title'] ? $result['title'] : 'no title';
      //opera 7 has problems with brs in snippet field (??)
      $snippet = str_replace("<br>","",$result['snippet']);
      $url = str_replace('&','&amp;',$result['URL']);
      $html .='<li class="liveInfoItem"><a href="'.$result["URL"].'" target="_blank" title="'.$url.'"><strong>'.$title.'</strong><br />'.$snippet.'</a></li>';
      }
  $html.="</ul>";
  return $html;
  }

The resulting document for a search for “news” looks like this : (debug mode turned off)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<liveInfo>
  <liveInfoResult id="liveInfoResult">
      <ul class="liveResults"><li class="liveInfoItem"><a href="http://www.cnn.com/" target="_blank" title="http://www.cnn.com/"><strong>CNN.com</strong><br /><b>...</b> MORE <b>NEWS</b>, Most Popular. <b>...</b> BUSINESS at CNN/Money, Business <b>News</b>. STOCK/FUND QUOTES: enter symbol. MARKETS: 5:16pm ET, 02/03. DJIA, -3.69, 10,593.10, -0.03. <b>...</b>  </a></li>
          <li class="liveInfoItem"><a href="http://news.bbc.co.uk/" target="_blank" title="http://news.bbc.co.uk/"><strong>BBC <b>NEWS</b> | <b>News</b> Front Page</strong><br />Visit BBC <b>News</b> for up-to-the-minute <b>news</b>, breaking <b>news</b>, video, audio and feature stories. BBC <b>News</b> provides trusted World and UK <b>...</b>  </a></li>
          <li class="liveInfoItem"><a href="http://www.foxnews.com/" target="_blank" title="http://www.foxnews.com/"><strong>FOXNews.com</strong><br /><b>...</b> Jacko Talks Neverland. Michael Jackson tells FOX <b>News</b> about the &#39;bliss&#39; of his home, says he&#39;s a target. LATEST HEADLINES. ONLY ON FOX. <b>...</b> FOX <b>NEWS</b> 24/7. <b>...</b>  </a></li>
          <li class="liveInfoItem"><a href="http://abcnews.go.com/" target="_blank" title="http://abcnews.go.com/"><strong>ABC <b>News</b>: Online <b>news</b>, breaking <b>news</b>, feature stories and more</strong><br />ABC <b>News</b> HomeABC <b>News</b> Home. February 3, 2005 | Get Your Local <b>News</b> and Weather. Search ABC <b>News</b> Search the Web. <b>...</b> ABC <b>News</b> Now. View Schedule. Subscribe Now <b>...</b>  </a></li>
          <li class="liveInfoItem"><a href="http://news.google.com/" target="_blank" title="http://news.google.com/"><strong>Google <b>News</b></strong><br />Google <b>News</b>. <b>...</b> Rudy T Runs Himself Out of LA WOAI Los Angeles Daily <b>News</b> - Xinhua - WTNH - People&#39;s Daily Online - all 1,228 related ? BBC Sport. <b>...</b>  </a></li>
          <li class="liveInfoItem"><a href="http://www.cbsnews.com/" target="_blank" title="http://www.cbsnews.com/"><strong>CBSNews.com</strong><br />Home US Iraq World Politics SciTech HealthWatch Entertainment New: Business Opinion FREE CBS <b>News</b> Video. CBSNews.com, <b>...</b> All Evening <b>News</b>, All Early Show. <b>...</b>  </a></li>
          <li class="liveInfoItem"><a href="http://news.yahoo.com/" target="_blank" title="http://news.yahoo.com/"><strong>Yahoo! <b>News</b> - Front Page</strong><br />Personalize <b>News</b> Home Page. Yahoo! <b>News</b> Thu, Feb 03, 2005, <b>...</b> Reuters Video, Stocks Edge Lower; Amazon Weighs (Reuters Video). <b>News</b> via RSS. Top <b>News</b>. Top Stories. <b>...</b>  </a></li>
          <li class="liveInfoItem"><a href="http://www.wired.com/" target="_blank" title="http://www.wired.com/"><strong>Wired <b>News</b></strong><br />Read our design notes for details. Welcome to Wired <b>News</b>. Skip <b>...</b> Advertisement. updated 2:00 am Feb. 3, 2005 PT <b>News</b> Archive. Peekaboo <b>...</b>  </a></li>
          <li class="liveInfoItem"><a href="http://www.msnbc.msn.com/" target="_blank" title="http://www.msnbc.msn.com/"><strong>MSNBC - MSNBC Front Page</strong><br /><b>...</b> MSNBC <b>News</b>, Alerts | Newsletters | RSS | Help, MSNBC Home. MSNBC TV. <b>News</b>. Business. Sports. Entertainment. Tech / Science. Weather. Health. Travel. Blogs Etc. <b>...</b>  </a></li>
          <li class="liveInfoItem"><a href="http://www.usnews.com/usnews/home.htm" target="_blank" title="http://www.usnews.com/usnews/home.htm"><strong>USNews.com: Home</strong><br /><b>...</b> dietary guidelines Best Hospitals: Top medical centers Honor Roll: 14 excellent hospitals Find a hospital: Comprehensive directory Heart Guide: <b>News</b> and tools <b>...</b>  </a></li>
      </ul>
  </liveInfoResult>
</liveInfo>
</html>

If there were no results, the liveInfoResult would be replaced by a liveInfoNoResult node. If there was a fault of some sort, then the liveInfoResult node would be replaced by a liveInfoFault node.

Debugging

If debugging is turned on, then liveInfo outputs the debug output that is received form the server to an element that is identified by the id of serviceName+opName+_liveInfoDebug giving (for wordpress search) wordpressSearch_liveInfoDebug. You can also do some direct checking by inserting the liveInfo url into your browser with the required parameters. For example, for wordpress, the url would be [path to liveInfo]/liveInfo/liveInfo.php?liveInfo=wordpress&opName=Search&s=rpc

Todo:

Streamline debug

Make install easier with less or ideally no editing of xml files needed

Well, there you go… expect some weird stuff as I play around and hopefully I’ll post new content soon…

SynTV provides UK TV listings in syndication formats (RSS 2.0 and ATOM) for use with desktop feed aggregators. Users can generate their own specific categories and searches and site developers are also provided for with support for HTML and Javascript. In a couple of weeks, I’ll also publish the XMLRPC web service.

If you’re interested, please check it out and give me some feedback…

Because the UK TV Listings webservice is implemented using XML RPC it means anyone can access it via a XML RPC client. XMLRPC is the technology on which SOAP is based on. This page shows all the available implementations (servers and clients) using several different technologies so if you haven’t dabbled with this kind of thing before, thats a good page to start..

Before we gone on, I’d like to say thanks because service uses the wonderful data provided by Andrew Flegg over at www.bleb.org, without which I’d have no fun working on this project and I’d probably be working on something quite boring…

Anyway, if you want to use it, you’re gonna need to know what it takes and what it gives…

The URI is :** http://www.nodetraveller.com/webservices/tvGuide/tvGuideRPCService.php**

Methods :

ukTvGuide.nodetraveller.com.getChannels(String date)

• Returns an array of strings, each of which is a name of a channel, for the specified date. The date format is as always dd/MM/YYYY eg . Xmas day is 25/12/2004.

ukTvGuide.nodetraveller.com.getCategories() – Returns an array of strings, each of which is a name of a category

ukTvGuide.nodetraveller.com.getChannelListingsByCategory(String category,String date, String timeslot, Int time) – The category parameter should be a value returned by getCategories. Returns an array for each channel requested. Each element within the array represents a listing. The actual structure is shown below.

ukTvGuide.nodetraveller.com.getChannelListings(Array channels,String date, String timeslot, Int time) – The channels array that is passed should be an array of Strings, each of which is a value returned by getChannels. Returns an array for each channel requested. Each element within the array represents a listing. The actual structure is shown below.

The valid timeslot values are as follows: MORN, AFTER, EVEN, LATE AND WHATSONNOW. Each timeslot, except for WHATSONNOW, represents a 6 hour timeslot; MORN – 6am – noon, AFTER – noon – 6pm, EVEN – 6pm – midnight and LATE – midnight – 6am.

The WHATSONNOW value specifies that only the programme that is currently showing should be returned.

The time parameter should pass the time in 24 hour format. If the WHATSONNOW value is not used, then the time parameter is ignored.

TV Listing structure

The service returns an array of channels and for each channel requested, there are an array of listings within.

The structure of each listing is as follows :

channel – String – channel name date – String – date format dd/mm/YYYY title – String the title of the programme description – String – the description of the programme subtitle – String – the subtitle, if any type – String – some programmes are classified eg Film, Childrens start – String – start time end – String- end time imgUrl – String – the url for the channel img

And that’s it. You can see the actual RPC messages here.

If you do make use of it, please let me know as I’d like to know if its been used and how. Some of the projects that I’d like to see would be a flash client to replace my soap version and an XUL based client for Mozilla (please!). A version for mobile phones would be great too. If I had the time I’d start work on these myself because 1) I always like to try new tech and 2) I find experimenting with different UIs fun.

Also supplied is a module that will display the links. The actual links are configurable, in that you can specify what formats your feeds are in (Take a look on the right). Also you can add custom links and images with the module eg the mamboserver.com link is a custom one.

You can download it at mamboforge or from the my downloads section

[Update]I’ve released a beta version of RSSXT 2. New features include remote blogging and pinging of aggregator sites. You can download it at the mamboforge site

I spent a bit more time on the UI than normal but finally I’m pleased with it. It works using XML RPC, connecting to my service and then displaying the listings. I hope to post more about the XML RPC service soon but I need to finish off a project before I do…

Anyway, click the link in the menu and take a look. You can also download the component here from this site or from mamboforge.

I’ve been doing a lot of work with Mambo recently and I like the thing so much I think I’m going to be moving the backend of this blog form Movable Type to Mambo. The main reason for this is that I’ll need to put up a version of Mambo up anyway to demo the things I’ve been working on, so I might as well use it to blog as well. Also any features that Mambo doesn’t have or I don’t like, I can add it myself, someting I couldn’t do quickly with MT as I don’t know much perl.

So quite soon, hopefully within two weeks, this site will change quite a bit. After that I should have more time to blog about what I’m up to….

We needed some kind of CMS for our own site and after looking around, weren’t really happy with what was out there..

The sites based on *nuke seem so chaotic. But not Mambo. The sites created with Mambo are nicely designed and user friendly. But the admin interface is absolutely brilliant! Its a well designed system with a great community. Theres quite a few templates around which quite nice to look at. Also there are some components and modules around which are actually useful for non-community sites.

If you need a nice CMS and more, take a look…and prepare to dance…