micolous.id.au

the result of a blogging accident

Friday, June 27, 2008

SVGForm alpha3; menus, input boxes, focus model… oh my!

Filed under: Coding, Projects — micolous @ 18:29

I’ve updated SVGForm now to alpha3. It now includes some new stuff, a simple menu system (and I mean, simple), and a focus model allowing an input control to work.

I’ve changed the way label elements are positioned now, and they all use the hanging dominant-baseline. Unfortunately Opera 9.5 doesn’t support dominant-baseline just yet, so all the UI elements will look messed up there. It works fine in Firefox 2 and Firefox 3 though, and I’ve heard it also works in Safari on OSX fine too. Unfortunately because Internet Explorer doesn’t have inbuilt SVG support (and Adobe’s SVG viewer is discontinued), so you may have to wait for Internet Explorer 8 and hope they add support for SVG and the SVG DOM.

Clicking Bricks has been updated to use the new version of the library… no new functionality in it. There’s an SVG part (click this to run), and the source script file.

There’s also a little focus model test that has an input box and a menu that doesn’t do very much. There’s an SVG part (click this to run), and the source script file.

And there’s SVGForm’s source itself if you have a thing for reading source code. It’s now getting quite big, at about 30kB!

Again, it’s still licensed under the GNU General Public License v2, or at your option, any later version published by the Free Software Foundation (this includes GPL3). Once this starts coming along a bit more, I’ll probably change the license to something more appropriate for web application development – as presently you would have to license the JavaScript/ECMAScript and SVG portions of your site also under the GPL as they link to it. As it’s still alpha and incomplete, this shouldn’t be much of an issue for now.

Passing parameters in .addEventListener in JS

Filed under: Coding — micolous @ 01:27 

1
2
3
4
5
6
7
8
9
10

function MyClass() {
  for (x = 0; x < 10; x++) {
    someElement.childNodes[x].addEventListener("click", this, false);
  }
  this.handleEvent = function (e) {
    if (e.type == "click") {
      // .. do something here
    }
  };
}

You can’t use eval() here with an anonymous function, as this will not have the right value. However, you can trick the system into letting you pass additional parameters by implementing another class in the middle like so:

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

function MyClass() {
  for (x = 0; x < 10; x++) {
    someElement.childNodes[x].addEventListener("click", new MyClassDoSomethingClickHandler(this, x), false);
  }
  this.doSomething = function(x) {
    // do something here...
  }
}
 
function MyClassDoSomethingClickHandler(obj, x)
  this.obj = obj;
  this.x = x;
  this.handleEvent = function (e) {
    if (e.type == 'click') {
      this.obj.doSomething(this.x);
    }
  };
}

And thus, you can call doSomething with an event handler, and pass in an extra parameter and still access the rest of the object. You could also extend the MyClassDoSomethingClickHandler and MyClass.doSomething so that it passes through the event data as well, if you require it.

I'm still working on SVGForm, and I have the start of a focus model, text input control, and I've now started on a Menu control. Once the menu works, there'll be another update.

I've passed the "magic" 1,000 lines mark with the code, now. I haven't coded so much ECMAScript/JavaScript for a single project in my life - my previous record was half that.

Powered by WordPress