[dojo-contributors] VML implementation notes

Tom Trenka ttrenka at gmail.com
Sat Jun 24 09:56:22 EDT 2006


Gavin,

It's possible that adding the behavior "the other way" (using IE's
stylesheet code as opposed to document.write) would take care of this
but unfortunately that seems to screw with documents that have the
base tag defined...I don't have IE 7 installed (in general I don't
like to work with beta software unless I have to, and what I've seen
of IE7 so far makes me think it has a ways to go) but you *should* be
able to see if that works by taking a look at the Chart code at WebFX;
if you can run that demo, then we could probably figure out a way of
getting the style code working correctly (it's gone back and forth).

trt

On 6/24/06, Gavin Doughtie <gavin at dfmm.org> wrote:
> 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
> _______________________________________________
> dojo-contributors mailing list
> dojo-contributors at dojotoolkit.org
> http://dojotoolkit.org/mailman/listinfo/dojo-contributors
>



More information about the dojo-contributors mailing list