Google Wave Syntax Highlighter

This post has been migrated, original date 27 Oct 2009 You can download the XML before reading the post here: Syntaxhighlighter - change the file extension to XML after download. I have just started a project about the Syntax Highlighter I have written for Google Wave. This is my first wave gadget and I wanted to create something quick and simple that would allow me to see how easy it is to develop a gadget for Google wave. The highlighter use the highlighter from Google Code and currently supports C#, XML and JavaScript. It is however a relatively simple process to add further brushes to the highlighter to extend it. When developing the gadget the first mistake I made was to forget that the gadget is within an iframe. This meant that I wasted some time write a complex way of retrieving the elements for the gadget which wasn't needed. The other thing to remember is that each gadget has it's own state. When calling wave.getState() your are actually only getting the state for thr current instance of the gadget. So if a user uses or gadget multiple times each gadgets state will be maintained uniquely. One quirk that took me a little time to work out is that the wave has no obvious method to call to reload state when someone returns to the wave, i.e. closed the browser and come back. How this seems to work is by starting with this init code (obviously):

       function init() {
          if (wave && wave.isInWaveContainer()) {
            LoadControls();
            LoadLanguages();
            wave.setStateCallback(stateUpdated);
          }
        }
        gadgets.util.registerOnLoadHandler(init);

So I register the init method to be called when the gadget is loaded, but within the init method the previous state is not set. LoadControls and LoadLanguages do not load the state. However the state is loaded is in the method passed to setStateCallback, after the gadgets init method had run and the callback has been assigned the callback method is called, this then loads the code from state:

 	  if(!wave.getState().get('code')) {

          }
          else {

            $textarea.val(wave.getState().get('code'));
            $dropdown.val(wave.getState().get('language'));
            Highlight();
          }

As I learn more I will share it, I am very excited to get into developing gadgets for wave and consuming wave on other sites. I think we are a long way from seeing the full potential of wave.