Thursday, June 9, 2011

Javascript, moo code and webpages Oh My!

It seems that sometimes a bad Internet connection is a good thing.

I've been on a sort of "Busman's Holiday" out to Vancouver Island and the Sunshine Coast over the last two weeks.  During that time we have generally had an Internet connection of some sort, but it has almost always been a bit intermittent.

Normally this state of affairs would be sub-optimal for me to be sure.
This time however, I took the opportunity to apply myself to learning the esoteric art of JavaScript coding... Don't laugh, I have never had to do anything with it before now!

What got me thinking about this was how well the Edit Area Javascript package worked when I integrated it into the Xpress Program Editor in V4 enCore.  You can see some screen shots of the editor here .  The Edit Area Javascript package was created by Christophe Dolivet and can be downloaded here .

The Edit Area system adds a lot of nice capabilities to the enCore editor without using much if any MOO code.  I figured "how hard could it be to do something like that?" Heh...

After two weeks of reading from one of those 2" thick 4lb dead tree chunks, that purports to be "everything you need to know", and lots of experimenting on a copy of my Ewebbed enCore package running in a Virtual Box copy of XP on my Ubuntu EEEpc Netbook (?!?), I managed to add a "debugger" to the program editor.


This is not elegant or fancy, and I'm sure the coding looks like it was done while reading a text book, which it was, but it does add a nice addition to the program editor.  The debugger consists of a framed document that replaces the verb list in the editor.  The debugger is used to create "checkpoints" to be inserted in the code of a verb to give feedback during the verb's execution.

The debugger has a couple of buttons and a set of checkboxes with variable names.  The checkboxes are generated on the fly by a Javascript function which reads the moo code text in the editor window, extracts the variables (any string on the left of an "=" sign), and arranges them on the page.

There is a textbox that lets you put arbitrary text into the checkpoint.
When activated a Javascript routine creates the checkpoint and inserts it at the cursor position in the editor.  The checkpoint is actually a call to a moo code verb on the editor itself that collects the information for the variables requested and send the data to a property on the programmer called debug_log.  This property is read by a moo verb which generates an auto updating web page displayed in another frame of the debugger.  As the target verb runs, each time the checkpoint is executed it updates the debug_log.

When done debugging, another button calls a routine that removes all the checkpoints from the verb.  I could really have used that when working on verbs with several hundred lines!

This is all done by Javascript which is collected in a file and stored with the Javascript library that the Edit Area package uses.   By keeping the Javascript separate this way it is easy to change and augment without effecting the MOO code of the editor.  It is also fast as it does all the processing in the browser the MOO only gets the verb with all it checkpoints when submitted to be compiled.

I'm quite happy with how my first experiment in Javascript coding for enCore has gone.

Oh and I actually had a very nice holiday too.
Thanks for asking.
KJ

1 comment: