Dojo GFX and Silverlight test

Reading the release notes for Dojo 1.0, I found a line item that said "dojox.gfx now includes Silverlight support".

For those in the know this was actually added back in v0.9, but it was a new to me and I've been wanting to give it a test drive since I read about it.

From the Dojo docs

What is dojox.gfx?
dojox.gfx is a cross-platform declarative interactive graphics package. It follows SVG loosely as the underlying model. At present time SVG and VML back-ends are implemented.

What does it do?
The dojox.gfx package provides graphics rendering and manipulation. Under Firefox, Opera and Safari dojox.gfx renders the final product as SVG, under IE it renders as VML.

Potentially the gfx package can allow you to create live and interactive graphing, a web based vector drawing program, view svg files in IE.

Basically you use the GFX API to create a surface and then you can add 2D shapes to that surface to render graphs, visuals or perhaps even Channel 9 guy heads.

Dojo was very simple to get started with and once I read through the GFX documentation I was up and running.  In order to use Silverlight as the rendering model you need to follow these steps:

  1. Before adding the reference to the dojo.js file, set the gfxRenderer collection to enforce Silverlight as the output by adding this line:
    var djConfig = { gfxRenderer:"silverlight" };
  2. Add a script reference to the Microsoft maintained Silverlight.js file that comes with the Silverlight 1.0 SDK.  Dojo uses variables within the script to validate Silverlight as an available render type.
  3. Include the gfx module as a requirement:
    dojo.require("dojox.gfx");

My test application renders nine randomly positioned 9 Guy heads which are draggable thanks to the added dojox.gfx.move module.  The source is posted and includes a single .htm file with references to the Dojo and Silverlight js files.

Its nice to have the graphic api as a level of abstraction, but since its targeting multiple output types I'm wondering if I'll be stuck with the lowest common denominator.  The next test might be a dynamic chart, something like the JellyBar but Dojo driven.  This should cover a few areas of investigation such as event handling, text and interactivity.

Overall, Dojo looks very well done and like something I would enjoy using.  I may just have to work it into my blog code with the next update.

posted on Nov 12th, 2007 | Permalink | Comments (4)

4 Comments »

  1. Wow, that's really cool. I agree that an abstraction on top of the graphic renderer is pretty cool, as long as it's not too dumbed down.

    Since Dojo.gfx is loosely based on SVG, it sounds like this could provide an SVG renderer for Silverlight, as well. While it's cool that you can draw using a series of commands, it'd be even better to be able to have support for SVG in all major browsers.

    Comment by Jon Galloway - November 12, 2007 @ 2:14 PM
  2. Initial impressions are good - especially from a performance perspective and your demo shows how easy it is to get going.

    However we've seen a bug with dojo using Silverlight. If you try your demo where the container div has style set to overflow:scroll, and the surface is larger than the div, events from Silverlight don't fire in FireFox. Set the dojo canvas drawing area larger than the containing div such that the user gets a clipped view they can scroll around - this all works fine with SVG and VML, but not in Silverlight.

    I know it's early days yet but there seems to be a fundamental problem with the way dojo is writing XAML. Any ideas?

    Comment by Rob Breeds - December 04, 2007 @ 7:04 AM
  3. This is fixed by Firefox 2.0.0.11 update :$

    Now we're excited because everything's started working :)

    Comment by Rob Breeds - December 07, 2007 @ 8:49 AM
  4. Great thanks for the update Rob :)

    Comment by Adam Kinney - January 04, 2008 @ 10:08 AM

Leave a comment