[dojo-contributors] VML implementation notes

Gavin Doughtie gavin at dfmm.org
Sat Jun 24 03:14:00 EDT 2006


Was fooling around with VML just now in an attempt to get Kun's latest 
test_gfx to work. Here's some notes:

I made gfx/__package__.js, which looks like this:

dojo.provide("dojo.gfx.*");

dojo.gfx.defaultRenderer = null;

if (dojo.render.svg.capable) {
   dojo.require("dojo.gfx.svg");
   dojo.gfx.defaultRenderer = dojo.gfx.svg;
} else if (dojo.render.vml.capable) {
   dojo.require("dojo.gfx.vml");
   dojo.gfx.defaultRenderer = dojo.gfx.vml;
}

The change to make test_gfx.html totally generic looks like this:

change
    dojo.require("dojo.gfx.svg");
to:
     dojo.require("dojo.gfx.*");

and the first line of the onload function becomes:

    var g = dojo.gfx.defaultRenderer;    // should select SVG/VML 
automatically

I added the following the the Shape object:

dojo.lang.extend(dojo.gfx.vml.Shape, {
                    nodeType: null,
                    initNode: function(tagName) {
                       tagName = tagName ? tagName : this.nodeType;
                       this.rawNode = document.createElement("v:" + 
tagName);
                       this.rawNode.addBehavior('#default#VML'); // <<<< 
really important!
                       return this;
                    },

and this small change to the other shapes:

dojo.declare("dojo.gfx.vml.Rect", dojo.gfx.vml.Shape, {
                nodeType: 'rect',

So shapes can self-init their nodes, like this:

dojo.lang.extend(dojo.gfx.vml.Surface, {
    // creators
    createRect: function(rect){
        if(!this.rawNode) return null;
             var shape = new dojo.gfx.vml.Rect();
           shape.initNode().setRect(rect);
        this.rawNode.appendChild(shape.rawNode);
        return shape;
    },

The thing that was driving me nuts was figuring out the line:

this.rawNode.addBehavior('#default#VML');

Even though dojo creates this behavior as a style node, it doesn't work 
because something in the mysterious innards of IE7 requires that the 
behavior be defined before javascripts start executing -- or at least so 
it appears (explicitly adding the style header:

        <style>
            v\:* { behavior: url(#default#VML); }
        </style>

rather than trying to get the javascript to do it also works. However, I 
think it would be much better if the gfx API Just Worked without placing 
additional requirements on the markup.

More arcana about behaviors here:

http://msdn.microsoft.com/workshop/author/behaviors/howto/using.asp
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/addbehavior.asp


As a special added bonus, I find that the latest installs of IE7 no 
longer support the DirectAnimation control, so I'm not going to be doing 
any more work in this area.

Gavin



More information about the dojo-contributors mailing list