[dojo-contributors] VML implementation notes

Gavin Doughtie gavin at dfmm.org
Sat Jun 24 16:39:06 EDT 2006


That totally works. Why wasn't it done this way to begin with?

Tom Trenka wrote:

> Hmmm....maybe we have to go back to the other, cleaner method and then
> try to figure out why IE barfs with a base tag then.
>
> If you want to try it out, in hostenv_browser.js, replace the two
> document.write lines with:
>
> document.namespaces.add("v","urn:schemas-microsoft-com:vml");
> document.createStyleSheet().addRule("v\\:*", 
> "behavior:url(#default#VML)");
>
> (you can see it here:
> http://trac.dojotoolkit.org/browser/trunk/src/hostenv_browser.js?rev=3874) 
>
>
> ...and see if you still need to add the behaviors.
>
> Tom
>
> On 6/24/06, Gavin Doughtie <gavin at dfmm.org> wrote:
>
>> I checked this on IE6, too -- hostenv_browser.js is definitely creating
>> the style node via document.write when dojo gets loaded, and before I
>> attempt to create any nodes. They just don't appear unless I also
>> addBehavior to the nodes as they're created.
>>
>>
>>
>> Tom Trenka wrote:
>>
>> > 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
>> >>
>> > _______________________________________________
>> > dojo-contributors mailing list
>> > dojo-contributors at dojotoolkit.org
>> > http://dojotoolkit.org/mailman/listinfo/dojo-contributors
>>
>>
>> _______________________________________________
>> dojo-contributors mailing list
>> dojo-contributors at dojotoolkit.org
>> http://dojotoolkit.org/mailman/listinfo/dojo-contributors
>>
> _______________________________________________
> dojo-contributors mailing list
> dojo-contributors at dojotoolkit.org
> http://dojotoolkit.org/mailman/listinfo/dojo-contributors





More information about the dojo-contributors mailing list