xul, javascript and manipulating svg

[Tony Cox]

I have been writing a xul app that displays and object graphically
using an inline SVG.

I hav ewritten the object, and a renderer that knows how to draw the
object's information. I pass both the object and the SVG (DOM object)
to the renderer - and it all works reasonably well.

I wanted to add some interactivity so that the GUI could modify the
object by clicking on the SVG etc. So I added some event listeners to
various parts of the SVG to make the changes.

Here is my problem. The SVG knows nothing about its parent object (the
renderer). So the event listeners cannot call methods on the renderer
to update itself (and hence the object it is representing). I could
call global functions from the listeners and get those to call
functions on the renderer - but that seems ugly.

So I seem to have a design flaw here. Can anybody suggest a better
design or a way toconnect the SVG listers to the parent renderer?

thanks

Tony

[Neil]

Tony Cox wrote:

>I could call global functions from the listeners and get those to call functions on the renderer - but that seems ugly.
>
>

You can use addEventListener to add inner functions or event objects to
your elements.
If you use inner functions then when they are called back they will have
access to variables declared in their parent function.
If you use event objects then when their handleEvent method is called
the "this" keyword will refer to the object.
Some trivial examples:
function addAlertClickFunction(element, message) {
function alertClickFunction(event) {
alert(message); // accessing variable from parent function
}
element.addEventLIstener("click", alertClickFunction, false);
}
function addAlertClickObject(element, message) {
var alertClickObject = {
message: message, // copies message from parent function
handleEvent: function(event) {
alert(this.message); // accesses copy of variable
}
};
element.addEventListener("click", alertClickObject, false);
}
Which style you use tends to depend on the style of your code; if it is
already heavily object-oriented then the object style often works better
(in some cases you can make the parent object an event listener) but if
it is function-oriented then the function style usually works better.

--
Warning: May contain traces of nuts.