Home > Uncategorized > Dojo GFX and Silverlight test

Dojo GFX and Silverlight test

November 12, 2007

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.

%d bloggers like this: